JSFiddle - React, Tailwind, and code Playground

HTML

<video id="vid"></video>
<canvas id="vidCanvas"> </canvas>

JavaScript

var $vid = document.getElementById('vid');
var $vidCanvas = document.getElementById('vidCanvas');
var $vidCanvasCtx = $vidCanvas.getContext("2d");
var videoActuallyPlaying = false;

navigator.getUserMedia = navigator.getUserMedia       || 
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia    ||
                         navigator.msGetUserMedia;

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia({video: true, audio: false}, function(localMediaStream) { 
  $vid.autoplay = true;
  $vid.src = window.URL.createObjectURL(localMediaStream);
}, function(error) { console.log(error); });

$vid.addEventListener('play', function() {
  drawVideo();
});

function drawVideo() {
  try {
    $vidCanvasCtx.drawImage($vid, 0, 0, $vidCanvas.width, $vidCanvas.height);
      console.log("Started playing");
    // we'll only reach here if no exception was thrown
    if (!videoActuallyPlaying) { // just started playing
      $vidCanvas.width = $vid.clientWidth;
      $vidCanvas.height = $vid.clientHeight;
      videoActuallyPlaying = true;
    }
  } catch (e) {
    if (e.name != "NS_ERROR_NOT_AVAILABLE") {
      throw e;
    }
  }
  setTimeout(drawVideo, 0);
}