[책] 자바스크립트 코드 레시피 278 - 180일차

카메라 기능 사용하기

• 웹 카메라를 사용해 사이트 내 유저의 카메라 화면을 표시하고 싶을 때

설명

웹 카메라로 영상과 사운드의 사용이 가능하며, 반응형 콘텐츠와 실시간 비디오챗 등에 이용합니다. 웹 카메라는 getUserMedia()를 사용합니다. video 요소 srcObject 속성에 웹 카메라 스트림을 지정하고, video 요소에는 autoplay 속성을 지정합니다. autoplay 속성을 지정하지 않으면 브라우저에 따라 화면의 표시가 지연되는 경우가 있습니다.

실습

index.html

<video id="myVideo" width="640" height="480" autoplay></video>
<button id="loadAndPlay">재생</button>
<button id="stop">정지</button>

---

script.js

const loadAndPlayVideo = document.querySelector('#loadAndPlay');
const stopVideo = document.querySelector('#stop');
loadAndPlayVideo.addEventListener('click', loadAndPlay);
stopVideo.addEventListener('click', stop);
let stream;
async function loadAndPlay() {
  const video = document.querySelector('#myVideo');
  stream = await getDeviceStream({
    video: {
      width: 640,
      height: 320,
    },
    audio: false,
  });
  video.srcObject = stream;
};

function stop() {
  const video = document.querySelector('#myVideo');
  const tracks = stream.getTracks();
  tracks.forEach((track) => {
    track.stop();
  });
  video.srcObject = null;
};

function getDeviceStream(option) {
  if ('getUserMedia' in navigator.mediaDevices) {
    return navigator.mediaDevices.getUserMedia(option);
  } else {
    return new Promise(function(resolve, reject) {
      navigator.getUserMedia(option, resolve, reject);
    });
  };
};