webCamera

HTML

video 아래에 canvas 배치하기,
그 중간에 snap 버튼 생성하기

canvas는 내부에 그림 그릴 수 있는 컨테이너.

<video id="video" width="640" height="480" autoplay></video>
  <button id="snap">Take Photo</button>
  <canvas id="canvas" width="640" height="480"></canvas>
  <script src="app.js"></script>

JS

navigator 객체는 브라우저에 대한 정보를 가지고 있는 객체.

navigator.mediaDevices는 카메라, 마이크 등 연결된 미디어 입력 장치랑 화면 공유에 대한 엑세스 제공하는 개체를 반환함.

navigator.mediaDevices.getUserMedia는 유저의 미디어 input 사용을 허가 받아 오디오나 비디오 같은 미디어 스트림을 웹에서 사용 가능한 형태로 반환함.

스트림을 받아서, video.srcObject에 넣고 video.play();

HTMLCanvasElement.getContext()
=> 캔버스에서 그리기 컨텍스트 반환.

CanvasRenderingContext2D.drawImage()

drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

let canvas = document.querySelector('#canvas');
let context = canvas.getContext('2d');
let video = document.querySelector('#video');


if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({video: true}).then(stream => {
    video.srcObject = stream;
    video.play();
  })
}

document.getElementById('snap').addEventListener('click', () => {
  context.drawImage(video, 0, 0, 640, 480);
})

참고

Interacting With A Web Camera Using JavaScript
[Javascript] navigator 객체