Source code

Revision control

Other Tools

Test Info: Warnings

  • This test gets skipped with pattern: (os == "win" && processor == "aarch64") toolkit == 'android'
<!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>