바르고 뜨겁게

[web rtc #1] Web 브라우저에서 웹캠 비디오 스트리밍 본문

자바스크립트

[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

 <!DOCTYPE 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>
 ​

main.js

 '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);


img

저작자표시 비영리

'자바스크립트' 카테고리의 다른 글

Javascript 싱글 스레드 눈으로 확인하기.  (0) 2020.11.03
JavaScript - dot(.) 점이 있는 JSON parsing  (0) 2019.09.09
자바스크립트에서 YouTube REST API 사용  (0) 2019.05.04
'자바스크립트' Related Articles more
Comments