Bug 1378285 - Modify the generateREF.html to resolve the output limit of console. r=alwu
MozReview-Commit-ID: Aneusk1hYK8
--- a/dom/media/test/reftest/generateREF.html
+++ b/dom/media/test/reftest/generateREF.html
@@ -1,55 +1,55 @@
<!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.
HOW TO USE:
1. Choose the first or last frame you want to generate. And set
-window.onload function to dumpFirstFrameToConsole/dumpLastFrameToConsole.
-2. Set the video.src in dumpFirstFrameToConsole/dumpLastFrameToConsole.
+window.onload function to dumpFirstFrame/dumpLastFrame.
+2. Set the video.src in dumpFirstFrame/dumpLastFrame.
3. Run the script on browser.
-4. Open console (ctrl+shift+k) to get the first/last frame.
-5. Copy the url to your xxx-ref.html(short.mp4.firstframe-ref.html).
+4. Copy the base64 image url to your xxx-ref.html(short.mp4.firstframe-ref.html).
You might hit security error if the video.src cross origin.
Enable "media.seekToNextFrame.enabled" for the seekToNextFrame function
or using nightly, the seekToNextFrame() ensure the ended event fired.
*/
-//window.onload = function() { setTimeout(dumpFirstFrameToConsole, 0); };
-window.onload = function() { setTimeout(dumpLastFrameToConsole, 0); };
+//window.onload = function() { setTimeout(dumpFirstFrame, 0); };
+window.onload = function() { setTimeout(dumpLastFrame, 0); };
-function drawVideoToConsole(v) {
+function drawVideoToInnerHTML(v) {
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();
- console.log(dataURL);
+ document.getElementById("out").innerHTML=dataURL;
}
-function dumpFirstFrameToConsole() {
+function dumpFirstFrame() {
var video = document.getElementById("v1");
video.src = "short.mp4";
video.preload = "metadata";
video.addEventListener("loadeddata", function() {
- drawVideoToConsole(video);
+ drawVideoToInnerHTML(video);
});
}
-function dumpLastFrameToConsole() {
+function dumpLastFrame() {
var video = document.getElementById("v1");
video.src = "short.mp4";
video.preload = "metadata";
video.seenEnded = false;
// Seek to the end
video.addEventListener("loadeddata", function() {
video.currentTime = video.duration;
video.onseeked = () => {
@@ -67,14 +67,14 @@ function dumpLastFrameToConsole() {
() => {
// Reach the end, do nothing.
}
);
}
video.addEventListener("ended", function() {
video.seenEnded = true;
- drawVideoToConsole(video);
+ drawVideoToInnerHTML(video);
});
}
</script>
</body>
</html>