104 lines
2.9 KiB
HTML
104 lines
2.9 KiB
HTML
<!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>
|