diff options
Diffstat (limited to 'dom/media/test/test_mediarecorder_pause_resume_video.html')
-rw-r--r-- | dom/media/test/test_mediarecorder_pause_resume_video.html | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/dom/media/test/test_mediarecorder_pause_resume_video.html b/dom/media/test/test_mediarecorder_pause_resume_video.html new file mode 100644 index 0000000000..a9b3d6a034 --- /dev/null +++ b/dom/media/test/test_mediarecorder_pause_resume_video.html @@ -0,0 +1,130 @@ +<!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> |