JSFiddle - React, Tailwind, and code Playground

by Roman Fedytskyi

HTML

<video id="video" src="https://f001.backblazeb2.com/b2api/v1/b2_download_file_by_id?fileId=4_z9150dcddda4dfe1053ba071d_f1133343fca79f7ed_d20170720_m114110_c001_v0001043_t0000" type="video/mp4" width="400" heigth="300" controls></video><br/>
<button onclick="capture()">Capture</button> <br/><br/>
<canvas id="canvas"></canvas> <br/><br/>
<!--<button onclick="save()">Save</button> <br/><br/>-->

JavaScript

function capture(){
    var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);
}

/*

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
(bc inside iframe, but we can still save the image by right-clicking on the generated canevas)

function save(){
    var canvas = document.getElementById('canvas');
    return canvas.toDataURL("image/png");
}

*/