tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

generateREF.html (2961B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4 <script type="application/javascript">
      5 </script>
      6 </head>
      7 <body>
      8 <p id="out"></p>
      9 <video id="v1" style="position:absolute; left:0; top:0"></video>
     10 <canvas id="canvas"></canvas>
     11 <script type="application/javascript">
     12 // READ ME FIRST.
     13 // The script is trying to make a reftest sample for reftest.
     14 
     15 // STEP1. Uncomment the method below that you want to use. If you want to dump
     16 // Nth frame, modify the parameter to the number of frame you want to dump.
     17 //window.onload = function() { setTimeout(dumpFirstFrame, 0); };
     18 //window.onload = function() { setTimeout(dumpLastFrame, 0); };
     19 window.onload = function() { setTimeout(function(){dumpNthFrame(15);}, 0); };
     20 
     21 // STEP2. Set the source of video that you want to capture
     22 const videoSrc = '';
     23 
     24 // STEP3. Ensure the pref `media.seekToNextFrame.enabled` is on
     25 // STEP4. In a terminal, navigate to the containing folder and start a server with "python -m SimpleHTTPServer 8000"
     26 // STEP5. Open "http://localhost:8000/generateREF.html" in the browser
     27 // STEP6. Copy the base64 image url to your xxx-ref.html
     28 
     29 function drawVideoToInnerHTML(v) {
     30  // This allows to dump content via canvas when the source is cross-origin.
     31  v.crossorigin = "anonymous";
     32  var canvas = document.getElementById("canvas");
     33  canvas.width = v.videoWidth;
     34  canvas.height = v.videoHeight;
     35  var ctx = canvas.getContext("2d");
     36  ctx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight);
     37  var dataURL = canvas.toDataURL();
     38  document.getElementById("out").innerHTML=dataURL;
     39 }
     40 
     41 function dumpFirstFrame() {
     42  var video = document.getElementById("v1");
     43  video.src = videoSrc;
     44  video.preload = "metadata";
     45 
     46  video.addEventListener("loadeddata", function() {
     47    drawVideoToInnerHTML(video);
     48  });
     49 }
     50 
     51 function dumpNthFrame(n) {
     52  var video = document.getElementById("v1");
     53  video.src = videoSrc;
     54  video.preload = "metadata";
     55  const totalFrames = n;
     56 
     57  function checkNthFrame() {
     58    console.log((totalFrames-n+1)+"th Frame time is " + video.currentTime);
     59    n--;
     60    if (n == 0) {
     61      drawVideoToInnerHTML(video);
     62    } else {
     63      video.seekToNextFrame();
     64    }
     65  }
     66  video.addEventListener("loadeddata", checkNthFrame);
     67  video.addEventListener("seeked", checkNthFrame);
     68 }
     69 
     70 function dumpLastFrame() {
     71  var video = document.getElementById("v1");
     72  video.src = videoSrc;
     73  video.preload = "metadata";
     74  video.seenEnded = false;
     75 
     76  // Seek to the end
     77  video.addEventListener("loadeddata", function() {
     78    video.currentTime = video.duration;
     79    video.onseeked = () => {
     80      video.onseeked = null;
     81      callSeekToNextFrame();
     82    };
     83  });
     84 
     85  function callSeekToNextFrame() {
     86    video.seekToNextFrame().then(
     87      () => {
     88        if (!video.seenEnded)
     89          callSeekToNextFrame();
     90      },
     91      () => {
     92        // Reach the end, do nothing.
     93      }
     94    );
     95  }
     96 
     97  video.addEventListener("ended", function() {
     98    video.seenEnded = true;
     99    drawVideoToInnerHTML(video);
    100  });
    101 }
    102 </script>
    103 </body>
    104 </html>