<!
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>
