브라우저로 영상&음성 캡쳐하기

🤔영상통화 웹사이트를 만들어보자!

  사회적 거리두기를 실천하기 위해, 화상채팅을 할일이 부쩍 많아졌다. 이번 기회에 간단한 영상통화가 가능한 웹사이트를 만들어보기로 결정했다. 프론트엔드는 react, 백엔드는 django, 영상통화 기능은 webrtc로 만들어볼 계획이다.

  천리길도 한걸음부터라고. 우선 카메라와 마이크에 접근해야한다. 안드로이드로를 공부할 때, 카메라는 스트레스 유발 치트키였다. 반면 브라우저로 카메라와 마이크에 접근하는 것은 생각보다 간단했다. Viva standardization.😂

🤦매우매우 짧은 배경역사

예전에는 브라우저에서 디바이스에 접근하는 것이 쉽지 않았다고 한다. 표준과 보안의 문제 때문이라고. 하지만 Chrome 21, Opera 18, and Firefox 17 기준으로 getUserMedia()가 사용가능하다!

👉getUserMedia 사용가능한지 확인하기

function hasGetUserMedia() {
  return !!(navigator.mediaDevices &&
    navigator.mediaDevices.getUserMedia);
}

if (hasGetUserMedia()) {
  // Good to go!
} else {
  alert('getUserMedia() is not supported by your browser');
}　

👏input device에 접근하기

<video autoplay></video>

<script>
const constraints = {
  video: true
};

const video = document.querySelector('video');

navigator.mediaDevices.getUserMedia(constraints).
  then((stream) => {video.srcObject = stream});
</script>

✍참조

원문 및 다른 함수들 보기