JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<video autoplay controls></video>
<button>Snapshot</button>
<div></div>

JavaScript

var video = document.querySelector('video');

var constraints = {video: true};

var mediaStream; 

function successCb(stream) {
    video.src = URL.createObjectURL(stream);
    mediaStream = stream;
}

function errorCb() {
    alert('Error: ' + error);
}

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

if (navigator.getUserMedia) {
    navigator.getUserMedia(constraints, successCb, errorCb);
} else {
    alert('No fun with your browser');
}

document.querySelector('button').onclick = function() {
    var canvas = document.createElement('canvas');
    canvas.width = 640;
    canvas.height = 480;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, 640, 480);
    var data = canvas.toDataURL('image/png');
    var img = new Image();
    img.src = data;
    document.querySelector('div').appendChild(img);
};