JSFiddle - React, Tailwind, and code Playground

HTML

<video id="video" width="640" height="480" autoplay></video>
	<button id="snap" class="sexyButton">Snap Photo</button>
	<canvas id="canvas" width="640" height="480"></canvas>

JavaScript

// Put event listeners into place

// Grab elements, create settings, etc.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = {
  video: true
};
var errBack = function (e) {
  console.log('An error has occurred!', e)
};

// Put video listeners into place
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia(mediaConfig).then(function (stream) {
    video.src = window.URL.createObjectURL(stream);
    video.play();
  });
}

/* Legacy code below! */
else if (navigator.getUserMedia) { // Standard
  navigator.getUserMedia(mediaConfig, function (stream) {
    video.src = stream;
    video.play();
  }, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
  navigator.webkitGetUserMedia(mediaConfig, function (stream) {
    video.src = window.webkitURL.createObjectURL(stream);
    video.play();
  }, errBack);
} else if (navigator.mozGetUserMedia) { // Mozilla-prefixed
  navigator.mozGetUserMedia(mediaConfig, function (stream) {
    video.src = window.URL.createObjectURL(stream);
    video.play();
  }, errBack);
}

// Trigger photo take
document.getElementById('snap').addEventListener('click', function () {
  context.drawImage(video, 0, 0, 640, 480);
});