test_mediarecorder_pause_resume_video.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <title>Test MediaRecorder Recording doesn't record during pause</title>

  <script src="/tests/SimpleTest/SimpleTest.js"></script>

  <script src="/tests/dom/canvas/test/captureStream_common.js"></script>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />

</head>

<body>

<pre id="test">

<div id="content">

  <canvas id="video-src-canvas"></canvas>

  <video id="recorded-video"></video>

</div>

<script class="testbody" type="text/javascript">

function startTest() {

  // Setup canvas and take a stream from it

  let canvas = document.getElementById("video-src-canvas");

  let canvas_size = 100;

  let new_canvas_size = 50;

  canvas.width = canvas.height = canvas_size;

  let helper = new CaptureStreamTestHelper2D(100, 100);

  helper.drawColor(canvas, helper.red);

  let canvasStream = canvas.captureStream();

  // Canvas set up

   // Check values for events

  let numDataAvailabledRaised = 0;

  // Recorded data that will be playback.

  let blob;

  let mediaRecorder = new MediaRecorder(canvasStream);

  is(mediaRecorder.stream, canvasStream,

     "Media recorder stream = canvas stream at the start of recording");

  mediaRecorder.onwarning = () => ok(false, "warning unexpectedly fired");

  mediaRecorder.onerror = () => ok(false, "Recording failed");

  mediaRecorder.ondataavailable = ev => {

    info("Got 'dataavailable' event");

    ++numDataAvailabledRaised;

    // Save recorded data for playback

    blob = ev.data;

};

  mediaRecorder.onstart = () => {

    info("Got 'start' event");

    // We just want one frame encoded before we pause

    mediaRecorder.pause();

    // We may rewrite this once we settle Bug 1363915, could listen for pause event instead

    is(mediaRecorder.state, 'paused', 'Media recorder should be paused');

    // Wait a while, then while paused draw blue at another size, then again

    // green at the original size and resume.

    let numberOfPaintsSincePause = 0;

    window.requestAnimationFrame(function draw() {

      numberOfPaintsSincePause++;

      if (numberOfPaintsSincePause == 8) {

        canvas.width = canvas.height = new_canvas_size;

        helper.drawColor(canvas, helper.blue);

      } else if (numberOfPaintsSincePause == 60) {

        canvas.width = canvas.height = canvas_size;

        helper.drawColor(canvas, helper.green);

      } else if (numberOfPaintsSincePause == 68) {

        // Waited 8 draws since changing canvas to green, should be safe to resume

        mediaRecorder.resume();

      } else if (numberOfPaintsSincePause > 120) {

        mediaRecorder.stop();

        return; // Early return, we don't want to request any more animation frames

      window.requestAnimationFrame(draw);

});

};

  mediaRecorder.onstop = () => {

    info("Got 'stop' event");

    is(mediaRecorder.state, 'inactive', 'Media recorder should be incative after stop');

    is(numDataAvailabledRaised, 1, "Expected 1 dataavailable event");

    ok(blob, "Should have gotten a data blob");

    let video = document.getElementById("recorded-video");

    video.id = "recorded-video";

    video.src = URL.createObjectURL(blob);

    // Setup a check to make sure we don't play back any blue

    let checkVideoHasNoBlue = () => {

      if(helper.isPixel(helper.getPixel(video), helper.blue, 128)) {

        ok(false, "Video should have no blue frames");

        // Remove handler so we don't spam the log

        video.ontimeupdate = null;

};

    video.ontimeupdate = checkVideoHasNoBlue;

    video.onerror = () => {

      ok(false, "Should be able to play the recording. Got error. code=" + video.error.code);

      SimpleTest.finish();

};

    video.onended = () => {

      ok(helper.isPixel(helper.getPixel(video), helper.green, 128), "Last frame should be green");

      SimpleTest.finish();

};

    // The video will resize once it loads its metadata, only listen for resizes after that

    video.onloadedmetadata = () => {

      ok(video.videoWidth === canvas_size && video.videoHeight === canvas_size,

         "video element should be same size as canvas once metadata is loaded");

      // We shouldn't have any resize events once the video is loaded

      video.onresize = () => {

        ok(false, "Should not have any resize events!");

};

};

    video.play();

};

  mediaRecorder.start();

  is(mediaRecorder.state, "recording", "Media recorder should be recording");

SimpleTest.waitForExplicitFinish();

startTest();

</script>

</pre>

</body>

</html>