getDisplayMedia()로 브라우저에서 화면을 캡처하는 방법.
6810 단어 WebRTC
목적
getDisplayMedia()로 브라우저에서 화면을 캡처합니다.
개요
getDisplayMedia() 를 사용하면 디스플레이 전체, Chrome 탭, 실행 중인 앱 화면을 캡처할 수 있습니다. 목표
개발 환경
대응 브라우저
참조 : MediaDevices.get Display Media()
샘플 소스
javascript
js/index.js"user strict";
const mediaStreamConstraints = {
video: true
};
const localVideo = document.querySelector("video");
function gotLocalMediaStream(mediaStream) {
const localStream = mediaStream;
localVideo.srcObject = mediaStream;
}
function handleLocalMediaStreamError(error) {
console.log("navigator.getUserMedia error: ", error);
}
navigator.mediaDevices
.getDisplayMedia(mediaStreamConstraints)
.then(gotLocalMediaStream)
.catch(handleLocalMediaStreamError);
html
html/index.js<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebRTC - getDisplayMedia()</title>
</head>
<body>
<h1>WebRTC - getDisplayMedia()</h1>
<video autoplay playsinline></video>
<script src="index.js"></script>
</body>
</html>
인용원
MediaDevices.get Display Media()
Reference
이 문제에 관하여(getDisplayMedia()로 브라우저에서 화면을 캡처하는 방법.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/miyataku/items/a65bf6eb6fd8ce8593a9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
javascript
js/index.js
"user strict";
const mediaStreamConstraints = {
video: true
};
const localVideo = document.querySelector("video");
function gotLocalMediaStream(mediaStream) {
const localStream = mediaStream;
localVideo.srcObject = mediaStream;
}
function handleLocalMediaStreamError(error) {
console.log("navigator.getUserMedia error: ", error);
}
navigator.mediaDevices
.getDisplayMedia(mediaStreamConstraints)
.then(gotLocalMediaStream)
.catch(handleLocalMediaStreamError);
html
html/index.js
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebRTC - getDisplayMedia()</title>
</head>
<body>
<h1>WebRTC - getDisplayMedia()</h1>
<video autoplay playsinline></video>
<script src="index.js"></script>
</body>
</html>
인용원
MediaDevices.get Display Media()
Reference
이 문제에 관하여(getDisplayMedia()로 브라우저에서 화면을 캡처하는 방법.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/miyataku/items/a65bf6eb6fd8ce8593a9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(getDisplayMedia()로 브라우저에서 화면을 캡처하는 방법.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/miyataku/items/a65bf6eb6fd8ce8593a9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
