2월12일 - JavaScript navigator.mediaDevices를 통한 카메라 제어

개요

카메라에 찍히는 화면을 JavaScript를 통해 가져와보자

 

노마드코더 zoom 클론코딩 강의를 듣다가 화상 통화 관련해서 처음 써보는 

JavaScript 기능이 있어 복습 겸 정리해본다.

 

사용 방법

HTML

<video id="myFace" autoplay="" playsinline="" width="400" height="400"></video>

JavaScript

const myFace = document.getElementById('myFace');
async function getMedia(){
  try {
    myStream = await navigator.mediaDevices.getUserMedia({
      audio: true, 
      video: true
    });
    // console.log(myStream);
    myFace.srcObject = myStream;
  } catch(e) {
    console.log(e);
  }
}

async / await  한 부분 잊지 말기

navigator.mediaDevices.getUserMedia()를 통해 영상을 가져온 후

video 태그에 srcObject를 통해 뿌려주면 된다.

 

결과

당연히 허용

손금 공개

 

이렇게 작성한 코드를 띄워보면

크롬 탭의 오른쪽 부분에 빨간 점이 생기며

카메라를 통해 video 태그에 화면이 실시간으로 찍히게 된다.

 

zoom이나 zep에서의 카메라 기능이 이런식으로 작동할 것 같은데

너무 신기하고 재밌는 기능인 것 같다.

앞으로 socket 기능을 활용해 서로의 영상을 주고 받는다면

더 멋진 기능이 나올듯!