Snapshots using getUserMedia and HTML video

by Génesis García Morilla

HTML

<video controls autoplay width="320" height="240"></video>
<button>Photo</button>
<canvas width="320" height="240"></canvas>

CSS

button {
  display: flex;
  margin: 5px;
}

JavaScript

const $video = document.querySelector('video')
const $button = document.querySelector('button')
const $canvas = document.querySelector('canvas')


$button.addEventListener('click', () => {
  const context = $canvas.getContext('2d')
  
  context.drawImage($video, 0, 0, $canvas.width, $canvas.height)
})


navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => $video.srcObject = stream)