dom/media/test/reftest/generateREF.html
author bechen <bechen@mozilla.com>
Tue, 25 Jul 2017 10:41:41 +0800
changeset 423096 d0c8e848fdd251e6e7068465d78399cf41791f64
parent 420291 820a85e09ac38f45cbd78ccf57e2a4e37db1eae6
child 423166 7423fc05e05b5d8c2448da9a0517a1c366199c32
permissions -rw-r--r--
Bug 1374183 - Add a reftest to verify seeking to 0.466667 of street.mp4 should be the 15th frame. r=alwu MozReview-Commit-ID: GdykZYs7wAq

<!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 dumpFirstFrame/dumpLastFrame.
2. Set the video.src in dumpFirstFrame/dumpLastFrame.
3. Run the script on browser.
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(dumpFirstFrame, 0); };
//window.onload = function() { setTimeout(dumpLastFrame, 0); };
window.onload = function() { setTimeout(function(){dumpNthFrame(15);}, 0); };

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();
  document.getElementById("out").innerHTML=dataURL;
}

function dumpFirstFrame() {
  var video = document.getElementById("v1");
  video.src = "short.mp4";
  video.preload = "metadata";
  video.addEventListener("loadeddata", function() {
    drawVideoToInnerHTML(video);
  });
}

function dumpNthFrame(n) {
  var video = document.getElementById("v1");
  video.src = "street.mp4";
  video.preload = "metadata";

  function checkNthFrame() {
    console.log(n+"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 = "short.mp4";
  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>