[JavaScript] 자바스크립트에서 카메라 기능 사용하기

196_자바스크립트에서 카메라 기능 사용하기

[적용]

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

---

[내용]

웹 카메라로 영상과 사운드의 사용이 가능하며, 반응형 콘텐츠와 실시간 비디오챗 등에 이용한다.

 

웹 카메라는 getUserMdeia()를 사용한다.

video 요소 srcObject 속성에 웹 카메라 스트림을 지정하고, vidoe 요소에는 autoplay 속성을 지정한다.

autoplay 속성을 지정하지 않으면 브라우저에 따라 화면의 표시가 지연되는 경우가 있다.

 

HTML                                                                                                                                                              index.html

<video id="myVideo" width="640" height="480" autoplay></video>

JavaScript                                                                                                                                                          main.js

let stream;

async function loadAndPlay() {
  const video = document.getElementById('myVideo');
  stream = await getDeviceStream({
    video: { width: 640, height: 480 },
    audio: false
  });
  video.srcObject = stream;
}

function stop() {
  const video = document.getElementById('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);
    });
  }
}

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김