JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Webcam test</title>
</head>
<body>
    <div style="text-align:center;">
        <video id="basic-stream" class="videostream" style="display: none;" autoplay="" src="" controls=""></video>
        <div style="clear:both;"></div>
        <canvas id = "canvas" style="width: 640px; height: 480px; border:1px solid #d3d3d3;"></canvas>
        <p>
            <button id="start" value = "Start">Start</button>
            <button id="stop" value = "Stop">Stop</button>
            <button id="recordedplay" value = "Play recorded">Play recorded</button>
            <span id="fnum"></span>
        </p>
    </div>
    </body>
</html>

JavaScript

function onFailSoHard(e){
    if(e.code==1){
        alert('User denied access to their camera');
    }
    else{
        alert('getUserMedia() not supported in your browser.');
    }
}
var video_arr = [];
var video=document.getElementById('basic-stream');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
    
var timer;
    $('#start').click(function(){
    var localMediaStream=null;
    
        if(navigator.getUserMedia){
            navigator.getUserMedia('video',function(stream){
                video.src=stream;
                video.controls=true;
                localMediaStream=stream;
            },onFailSoHard);
        }
        else 
        if(navigator.webkitGetUserMedia){
            navigator.webkitGetUserMedia({video:true},function(stream){
                video.src=window.webkitURL.createObjectURL(stream);
                video.controls=true;
                localMediaStream=stream;
            },onFailSoHard);
        }
        else{
            onFailSoHard({target:video});
        }
    timer = setInterval(function() {
        ctx.drawImage(video,0,0, 300, 150);
        video_arr.push(canvas.toDataURL());
        
    }, 67);
});
$('#stop').click(function(){
clearInterval(timer);
});
var framenum = 0;
var image = new Image(); 

var curr_frame = 0;
$('#recordedplay').click(function(){
    curr_frame = 0;
    var timer;
    timer = setInterval(function() {
        if(curr_frame<video_arr.length){
            image.src = video_arr[curr_frame];
            ctx.drawImage(image,0,0);
            $('#fnum').html(curr_frame);
        }
        else{
            clearInterval(timer);
        }
        curr_frame++;
    }, 67);
});