tor-browser

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

test_mediarecorder_pause_resume_video.html (4521B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <title>Test MediaRecorder Recording doesn't record during pause</title>
      5  <script src="/tests/SimpleTest/SimpleTest.js"></script>
      6  <script src="/tests/dom/canvas/test/captureStream_common.js"></script>
      7  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
      8 </head>
      9 <body>
     10 <pre id="test">
     11 <div id="content">
     12  <canvas id="video-src-canvas"></canvas>
     13  <video id="recorded-video"></video>
     14 </div>
     15 <script class="testbody" type="text/javascript">
     16 
     17 function startTest() {
     18  // Setup canvas and take a stream from it
     19  let canvas = document.getElementById("video-src-canvas");
     20 
     21  let canvas_size = 100;
     22  let new_canvas_size = 50;
     23 
     24  canvas.width = canvas.height = canvas_size;
     25 
     26  let helper = new CaptureStreamTestHelper2D(100, 100);
     27  helper.drawColor(canvas, helper.red);
     28 
     29  let canvasStream = canvas.captureStream();
     30  // Canvas set up
     31 
     32   // Check values for events
     33  let numDataAvailabledRaised = 0;
     34  // Recorded data that will be playback.
     35  let blob;
     36 
     37  let mediaRecorder = new MediaRecorder(canvasStream);
     38  is(mediaRecorder.stream, canvasStream,
     39     "Media recorder stream = canvas stream at the start of recording");
     40 
     41  mediaRecorder.onwarning = () => ok(false, "warning unexpectedly fired");
     42 
     43  mediaRecorder.onerror = () => ok(false, "Recording failed");
     44 
     45  mediaRecorder.ondataavailable = ev => {
     46    info("Got 'dataavailable' event");
     47    ++numDataAvailabledRaised;
     48    // Save recorded data for playback
     49    blob = ev.data;
     50  };
     51 
     52  mediaRecorder.onstart = () => {
     53    info("Got 'start' event");
     54    // We just want one frame encoded before we pause
     55    mediaRecorder.pause();
     56    // We may rewrite this once we settle Bug 1363915, could listen for pause event instead
     57    is(mediaRecorder.state, 'paused', 'Media recorder should be paused');
     58 
     59    // Wait a while, then while paused draw blue at another size, then again
     60    // green at the original size and resume.
     61    let numberOfPaintsSincePause = 0;
     62    window.requestAnimationFrame(function draw() {
     63      numberOfPaintsSincePause++;
     64      if (numberOfPaintsSincePause == 8) {
     65        canvas.width = canvas.height = new_canvas_size;
     66        helper.drawColor(canvas, helper.blue);
     67      } else if (numberOfPaintsSincePause == 60) {
     68        canvas.width = canvas.height = canvas_size;
     69        helper.drawColor(canvas, helper.green);
     70      } else if (numberOfPaintsSincePause == 68) {
     71        // Waited 8 draws since changing canvas to green, should be safe to resume
     72        mediaRecorder.resume();
     73      } else if (numberOfPaintsSincePause > 120) {
     74        mediaRecorder.stop();
     75        return; // Early return, we don't want to request any more animation frames
     76      }
     77      window.requestAnimationFrame(draw);
     78    });
     79  };
     80 
     81  mediaRecorder.onstop = () => {
     82    info("Got 'stop' event");
     83    is(mediaRecorder.state, 'inactive', 'Media recorder should be incative after stop');
     84    is(numDataAvailabledRaised, 1, "Expected 1 dataavailable event");
     85 
     86    ok(blob, "Should have gotten a data blob");
     87    let video = document.getElementById("recorded-video");
     88    video.id = "recorded-video";
     89    video.src = URL.createObjectURL(blob);
     90    // Setup a check to make sure we don't play back any blue
     91    let checkVideoHasNoBlue = () => {
     92      if(helper.isPixel(helper.getPixel(video), helper.blue, 128)) {
     93        ok(false, "Video should have no blue frames");
     94        // Remove handler so we don't spam the log
     95        video.ontimeupdate = null;
     96      }
     97    };
     98    video.ontimeupdate = checkVideoHasNoBlue;
     99    video.onerror = () => {
    100      ok(false, "Should be able to play the recording. Got error. code=" + video.error.code);
    101      SimpleTest.finish();
    102    };
    103    video.onended = () => {
    104      ok(helper.isPixel(helper.getPixel(video), helper.green, 128), "Last frame should be green");
    105      SimpleTest.finish();
    106    };
    107    // The video will resize once it loads its metadata, only listen for resizes after that
    108    video.onloadedmetadata = () => {
    109      ok(video.videoWidth === canvas_size && video.videoHeight === canvas_size,
    110         "video element should be same size as canvas once metadata is loaded");
    111      // We shouldn't have any resize events once the video is loaded
    112      video.onresize = () => {
    113        ok(false, "Should not have any resize events!");
    114      };
    115    };
    116 
    117    video.play();
    118  };
    119 
    120  mediaRecorder.start();
    121  is(mediaRecorder.state, "recording", "Media recorder should be recording");
    122 }
    123 
    124 SimpleTest.waitForExplicitFinish();
    125 startTest();
    126 
    127 </script>
    128 </pre>
    129 </body>
    130 </html>