JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<div style="border: solid 1px #ccc; padding: 10px; text-align: center;">
    <video id="video" width="320" controls="true">
        <source src="video.ogv"><!-- FireFox 3.5 -->
        <source src="https://redirector.googlevideo.com/videoplayback?expire=1642473909&ei=VNXlYYW8O_OI6dsP39KEIA&ip=207.154.216.138&id=o-AOD1PGVDufT93XNFjyPinJPfR2v6E6YeKZ75gR9etVbY&itag=22&source=youtube&requiressl=yes&mh=MF&mm=31%2C29&mn=sn-4g5ednsd%2Csn-4g5lznl7&ms=au%2Crdu&mv=m&mvi=1&pl=20&initcwndbps=176250&vprv=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=1251.532&lmt=1642392863709719&mt=1642451817&fvip=1&fexp=24001373%2C24007246&c=ANDROID&txp=3316222&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRgIhAMaK9H6howoupqvd-K8sdXYMrv0_7GQa6VHxPzaS2djUAiEAl0WUZ_YHMZgT-vlL5nYQpVzNWGVfJLtDrkE9KWNnqAU%3D&lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpl%2Cinitcwndbps&lsig=AG3C_xAwRAIgb4QGHHfDVW_Fa4JTgLeYH-ozUxLq6QcbO9I0xStDJ0ACIEbJDaDDESGBuBojBwfZdd_LA1tQxjqMQnyTzii-v0YX&host=rr1---sn-4g5ednsd.googlevideo.com&title=yt5s.com-Infinity%20pool%20in%20Colombo%20%7C%20Ganga%20Ramaya%20Temple%20%7C%20Sri%20Lanka%20Vlogs%20%7C%20Ravi%20Telugu%20Traveller"><!-- WebKit -->
        Your browser does not support HTML5 video tag. Please download FireFox 3.5 or higher.
    </video><br/>
    <button onclick="shoot()" style="width: 64px;border: solid 2px #ccc;">Capture</button><br/>
    <div id="output" style="display: inline-block; top: 4px; position: relative ;border: dotted 1px #ccc; padding: 2px;"></div>
</div>

JavaScript

var videoId = 'video';
var scaleFactor = 0.25;
var snapshots = [];
 
/**
 * Captures a image frame from the provided video element.
 *
 * @param {Video} video HTML5 video element from where the image frame will be captured.
 * @param {Number} scaleFactor Factor to scale the canvas element that will be return. This is an optional parameter.
 *
 * @return {Canvas}
 */
function capture(video, scaleFactor) {
    if(scaleFactor == null){
        scaleFactor = 1;
    }
    var w = video.videoWidth * scaleFactor;
    var h = video.videoHeight * scaleFactor;
    var canvas = document.createElement('canvas');
        canvas.width  = w;
        canvas.height = h;
    var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
    return canvas;
} 
 
/**
 * Invokes the <code>capture</code> function and attaches the canvas element to the DOM.
 */
function shoot(){
    var video  = document.getElementById(videoId);
    var output = document.getElementById('output');
    var canvas = capture(video, scaleFactor);
        canvas.onclick = function(){
            window.open(this.toDataURL());
        };
    snapshots.unshift(canvas);
    output.innerHTML = '';
    for(var i=0; i<4; i++){
        output.appendChild(snapshots[i]);
    }
}