자바스크립트
[web rtc #1] Web 브라우저에서 웹캠 비디오 스트리밍
RightHot
2020. 9. 28. 10:56
출처 : https://codelabs.developers.google.com/codelabs/webrtc-web/#0
[web rtc #1] Web 브라우저에서 웹캠 비디오 스트리밍
index.html
<html>
<head>
<title>Realtime communication with WebRTC</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>Realtime communication with WebRTC</h1>
<video autoplay playsinline></video>
<script src="js/main.js"></script>
</body>
</html>
'use strict';
// streaming only video
const mediaStreamConstraints = {
video: true,
};
// VIEW의 video Element
const localVideo = document.querySelector('video');
// Local stream that will be reproduced on the video.
let localStream;
// 웹캠에서 반환된 mediaStream 데이터를 VIEW에 전달.
function gotLocalMediaStream(mediaStream) {
localStream = mediaStream;
localVideo.srcObject = mediaStream;
}
// mediaDevice 에러 핸들러
function handleLocalMediaStreamError(error) {
console.log('navigator.getUserMedia error: ', error);
}
// Navigator.mediaDevices 속성은 카메라, 마이크, 화면 공유와 같이 현재 연결된 미디어 입력 장치에 접근할 수 있는 MediaDevices 객체를 반환
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
.then(gotLocalMediaStream).catch(handleLocalMediaStreamError);