<!DOCTYPE HTML> <html> <head> <script type="application/javascript"> </script> </head> <body> <p id="out"></p> <video id="v1" style="position:absolute; left:0; top:0"></video> <canvas id="canvas"></canvas> <script type="application/javascript"> // READ ME FIRST. // The script is trying to make a reftest sample for reftest. // STEP1. Uncomment the method below that you want to use. If you want to dump // Nth frame, modify the parameter to the number of frame you want to dump. //window.onload = function() { setTimeout(dumpFirstFrame, 0); }; //window.onload = function() { setTimeout(dumpLastFrame, 0); }; window.onload = function() { setTimeout(function(){dumpNthFrame(15);}, 0); }; // STEP2. Set the source of video that you want to capture const videoSrc = ''; // STEP3. Ensure the pref `media.seekToNextFrame.enabled` is on // STEP4. In a terminal, navigate to the containing folder and start a server with "python -m SimpleHTTPServer 8000" // STEP5. Open "http://localhost:8000/generateREF.html" in the browser // STEP6. Copy the base64 image url to your xxx-ref.html function drawVideoToInnerHTML(v) { // This allows to dump content via canvas when the source is cross-origin. v.crossorigin = "anonymous"; var canvas = document.getElementById("canvas"); canvas.width = v.videoWidth; canvas.height = v.videoHeight; var ctx = canvas.getContext("2d"); ctx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight); var dataURL = canvas.toDataURL(); document.getElementById("out").innerHTML=dataURL; } function dumpFirstFrame() { var video = document.getElementById("v1"); video.src = videoSrc; video.preload = "metadata"; video.addEventListener("loadeddata", function() { drawVideoToInnerHTML(video); }); } function dumpNthFrame(n) { var video = document.getElementById("v1"); video.src = videoSrc; video.preload = "metadata"; const totalFrames = n; function checkNthFrame() { console.log((totalFrames-n+1)+"th Frame time is " + video.currentTime); n--; if (n == 0) { drawVideoToInnerHTML(video); } else { video.seekToNextFrame(); } } video.addEventListener("loadeddata", checkNthFrame); video.addEventListener("seeked", checkNthFrame); } function dumpLastFrame() { var video = document.getElementById("v1"); video.src = videoSrc; video.preload = "metadata"; video.seenEnded = false; // Seek to the end video.addEventListener("loadeddata", function() { video.currentTime = video.duration; video.onseeked = () => { video.onseeked = null; callSeekToNextFrame(); }; }); function callSeekToNextFrame() { video.seekToNextFrame().then( () => { if (!video.seenEnded) callSeekToNextFrame(); }, () => { // Reach the end, do nothing. } ); } video.addEventListener("ended", function() { video.seenEnded = true; drawVideoToInnerHTML(video); }); } </script> </body> </html>