Web cam api

by Vladimir

HTML

<video src="" controls></video>
<canvas></canvas>

CSS

video {
   width: 100px;
   height: 100px;
}
canvas {
  border: 1px solid #F00;
}

JavaScript

const constraints = {video: true, audio: false};
const $video = document.querySelector('video');
let $canvas = document.querySelector('canvas');
const ctx = $canvas.getContext('2d');

 navigator.mediaDevices.getUserMedia(constraints)
 	.then( stream => {
 
  	$video.srcObject = stream;
  	$video.onloadmetadata = () => {
    	console.log('Loaded');
    	//$video.play();
      $canvas.width = $video.videoWidth;
      $canvas.height = $video.videoHeight;
      
      const draw = () => {
      	console.log('.');
      	ctx.drawImage($video, 0 ,0);
        //requestAnimationFrame(draw);
      }
      setInterval(draw, 100);
      //requestAnimationFrame(draw);
    }
 	}).catch(error => {});