JSFiddle - React, Tailwind, and code Playground

HTML

<button id="start">Start</button>
<button id="capture">Capture</button>
<video autoplay="true"></video>
<canvas width="300" height="200"></canvas>

JavaScript

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

window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

var start = document.querySelector('#start'),
    capture = document.querySelector('#capture'),
    canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
    video = document.querySelector('video');

start.addEventListener('click', function () {

    navigator.getUserMedia({
      video: true
    }, function (stream) {
      var src = window.URL.createObjectURL(stream);
      video.src = src;
    }, function (e) {
      console.log(e);
    });

    capture.addEventListener('click', function () {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    }, false);

}, false);