JSFiddle - React, Tailwind, and code Playground

by parkji

HTML

<p id="errors"></p>
<video autoplay id="stream"></video>
<canvas id="snapshot" height="480px" width="640px"></canvas>
<button id="snapIt" style="display: block">Snap it</button>

JavaScript

var nav = navigator;
var isWebkit = false;

function addError(msg)
{
    document.getElementById('errors').textContent = msg;
}

function mediaAccessed(stream)
{
    var video = document.getElementById('stream');
    var source = stream;
    if (isWebkit) {
        source = window.webkitURL.createObjectURL(stream);
    }
 
    video.src = source;
}

function mediaNotAccessed(error)
{
    addError('Error code: ' + error.code);
}

function snapshot()
{
    var snapshotCanvas = document.getElementById('snapshot');
    var context = snapshotCanvas.getContext('2d');
    var video = document.getElementById('stream');
    
    context.clearRect(0, 0);
    context.drawImage(video, 0, 0);
    snapshotCanvas.setAttribute('style', 'display:block;');
    video.setAttribute('style', 'display:none;');
}

if (nav.getUserMedia) {
    nav.getUserMedia('video', mediaAccessed, mediaNotAccessed);
}
else if (nav.webkitGetUserMedia) {
    isWebkit = true;
    nav.webkitGetUserMedia('video', mediaAccessed, mediaNotAccessed);
}
else {
    addError('getUserMedia not supported');
}

document.getElementById('snapIt').addEventListener('click', function(e) {
    snapshot();     
});