mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-09 19:35:51 +00:00
Bug 1232043 - Update/create mochitests for recorder resolution change. r=pehrsons
MozReview-Commit-ID: IinhX2xFI42
This commit is contained in:
parent
84557a32ed
commit
8e25f6f497
@ -821,6 +821,12 @@ tags=msg
|
||||
[test_mediarecorder_record_changing_video_resolution.html]
|
||||
skip-if = android_version == '17' # android(bug 1232305)
|
||||
tags=msg
|
||||
[test_mediarecorder_record_upsize_resolution.html]
|
||||
skip-if = android_version == '17' # android(bug 1232305)
|
||||
tags=msg
|
||||
[test_mediarecorder_record_downsize_resolution.html]
|
||||
skip-if = android_version == '17' # android(bug 1232305)
|
||||
tags=msg
|
||||
[test_mediarecorder_record_gum_video_timeslice.html]
|
||||
skip-if = android_version == '17' # bug 1297298, android(bug 1232305)
|
||||
tags=msg
|
||||
|
@ -15,53 +15,148 @@ function startTest() {
|
||||
var content = document.getElementById("content");
|
||||
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = canvas.height = 100;
|
||||
const resolution_change = [
|
||||
{width: 100, height: 100, color: "red"},
|
||||
{width: 150, height: 150, color: "blue"},
|
||||
{width: 100, height: 100, color: "red"},
|
||||
];
|
||||
canvas.width = resolution_change[0].width;
|
||||
canvas.height = resolution_change[0].height;
|
||||
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillStyle = resolution_change[0].color;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
var stream = canvas.captureStream(0);
|
||||
// The recorded stream coming from canvas.
|
||||
var stream = canvas.captureStream();
|
||||
|
||||
var numErrorRaised = 0;
|
||||
// Check values for events
|
||||
var numDataAvailabledRaised = 0;
|
||||
var numResizeRaised = 0;
|
||||
// Recorded data that will be playback.
|
||||
var blob;
|
||||
|
||||
mediaRecorder = new MediaRecorder(stream);
|
||||
// Media recorder for VP8 and canvas stream.
|
||||
var mediaRecorder = new MediaRecorder(stream);
|
||||
is(mediaRecorder.stream, stream,
|
||||
"Media recorder stream = canvas stream at the start of recording");
|
||||
|
||||
mediaRecorder.onwarning = () => ok(false, "onwarning unexpectedly fired");
|
||||
|
||||
// Not expected events.
|
||||
mediaRecorder.onwarning = () => ok(false, "MediaRecorder: onwarning unexpectedly fired");
|
||||
mediaRecorder.onerror = err => {
|
||||
info("Got 'error' event, " + err.name + " (" + err.message + ")");
|
||||
++numErrorRaised;
|
||||
ok(false, "MediaRecorder: onerror unexpectedly fired. Code " + err.name);
|
||||
SimpleTest.finish();
|
||||
};
|
||||
|
||||
// When recorder is stopped get recorded data.
|
||||
mediaRecorder.ondataavailable = ev => {
|
||||
info("Got 'dataavailable' event");
|
||||
++numDataAvailabledRaised;
|
||||
is(blob, undefined, "Should only get one dataavailable event");
|
||||
// Save recorded data for playback
|
||||
blob = ev.data;
|
||||
};
|
||||
|
||||
mediaRecorder.onstart = () => {
|
||||
canvas.width = canvas.height = canvas.width * 1.1;
|
||||
ctx.fillStyle = "blue";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
stream.requestFrame();
|
||||
info('onstart fired successfully');
|
||||
};
|
||||
|
||||
mediaRecorder.onstop = () => {
|
||||
info("Got 'stop' event");
|
||||
is(numErrorRaised, 1, "Should have gotten 1 error event");
|
||||
is(numDataAvailabledRaised, 1, "Should have gotten 1 dataavailable event");
|
||||
SimpleTest.finish();
|
||||
// Playback stream and verify resolution changes.
|
||||
ok(blob, "Should have gotten a data blob");
|
||||
|
||||
var video = document.createElement("video");
|
||||
video.id = "recorded-video";
|
||||
video.src = URL.createObjectURL(blob);
|
||||
video.preload = "metadata";
|
||||
|
||||
video.onerror = err => {
|
||||
ok(false, "Should be able to play the recording. Got error. code=" + video.error.code);
|
||||
SimpleTest.finish();
|
||||
};
|
||||
|
||||
video.onloadedmetadata = function(){
|
||||
info("onloadedmetadata");
|
||||
video.seekToNextFrame()
|
||||
.then(()=>video.seekToNextFrame())
|
||||
.catch((reason)=>{
|
||||
info("seekToNextFrame rejected: " + reason)
|
||||
callSeekToNextFrame();
|
||||
});
|
||||
}
|
||||
|
||||
// Check that resize is correct for playback stream.
|
||||
video.onresize = function() {
|
||||
if (numResizeRaised < resolution_change.length) {
|
||||
is(video.videoWidth, resolution_change[numResizeRaised].width,
|
||||
"onresize width should be as expected");
|
||||
is(video.videoHeight, resolution_change[numResizeRaised].height,
|
||||
"onresize height should be as expected");
|
||||
if (numResizeRaised > 0) {
|
||||
callSeekToNextFrame();
|
||||
}
|
||||
} else {
|
||||
ok(false, "Got more resize events than expected");
|
||||
}
|
||||
++numResizeRaised;
|
||||
};
|
||||
|
||||
video.onended = function() {
|
||||
is(numResizeRaised, resolution_change.length, "Expected number of resize events");
|
||||
SimpleTest.finish();
|
||||
};
|
||||
|
||||
document.getElementById("content").appendChild(video);
|
||||
|
||||
function callSeekToNextFrame() {
|
||||
video.seekToNextFrame()
|
||||
.then()
|
||||
.catch((reason)=>{
|
||||
info("seekToNextFrame rejected: " + reason)
|
||||
callSeekToNextFrame();
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
// Start here by stream recorder.
|
||||
mediaRecorder.start();
|
||||
is(mediaRecorder.state, "recording", "Media recorder should be recording");
|
||||
requestAnimationFrame(draw);
|
||||
|
||||
// Change resolution in every frame
|
||||
// Stop recorder on last frame
|
||||
var countFrames=0;
|
||||
var previous_time = performance.now();
|
||||
function draw(timestamp) {
|
||||
if (timestamp - previous_time < 100) {
|
||||
requestAnimationFrame(draw);
|
||||
return;
|
||||
}
|
||||
previous_time = timestamp;
|
||||
|
||||
if (countFrames < resolution_change.length) {
|
||||
canvas.width = resolution_change[countFrames].width;
|
||||
canvas.height = resolution_change[countFrames].height;
|
||||
ctx.fillStyle = resolution_change[countFrames].color;
|
||||
// Resize and draw canvas
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
// Register draw to be called on next rendering
|
||||
requestAnimationFrame(draw);
|
||||
countFrames++;
|
||||
} else {
|
||||
mediaRecorder.stop();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
startTest();
|
||||
SpecialPowers.pushPrefEnv(
|
||||
{
|
||||
"set": [["media.seekToNextFrame.enabled", true ]],
|
||||
"set": [["media.video-queue.send-to-compositor-size", 1]]
|
||||
}, startTest);
|
||||
|
||||
</script>
|
||||
</pre>
|
||||
|
@ -0,0 +1,146 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test MediaRecorder Recording canvas dynamically changes to greater resolution</title>
|
||||
<script type="text/javascript" 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">
|
||||
</div>
|
||||
<script class="testbody" type="text/javascript">
|
||||
|
||||
function startTest() {
|
||||
var canvas = document.createElement("canvas");
|
||||
var canvas_size = 100;
|
||||
var new_canvas_size = 50;
|
||||
canvas.width = canvas.height = canvas_size;
|
||||
|
||||
var helper = new CaptureStreamTestHelper2D(canvas_size, canvas_size);
|
||||
helper.drawColor(canvas, helper.red);
|
||||
|
||||
// The recorded stream coming from canvas.
|
||||
var stream = canvas.captureStream();
|
||||
|
||||
// Check values for events
|
||||
var numDataAvailabledRaised = 0;
|
||||
var numResizeRaised = 0;
|
||||
// Recorded data that will be playback.
|
||||
var blob;
|
||||
|
||||
// Media recorder for VP8 and canvas stream.
|
||||
var mediaRecorder = new MediaRecorder(stream);
|
||||
is(mediaRecorder.stream, stream,
|
||||
"Media recorder stream = canvas stream at the beginning of recording");
|
||||
|
||||
// Not expected events.
|
||||
mediaRecorder.onwarning = () => ok(false, "MediaRecorder: onwarning unexpectedly fired");
|
||||
mediaRecorder.onerror = err => {
|
||||
ok(false, "MediaRecorder: onerror unexpectedly fired. Code " + err.name);
|
||||
SimpleTest.finish();
|
||||
}
|
||||
|
||||
// When recorder is stopped get recorded data.
|
||||
mediaRecorder.ondataavailable = ev => {
|
||||
info("Got 'dataavailable' event");
|
||||
++numDataAvailabledRaised;
|
||||
is(blob, undefined, "On dataavailable event blob is undefined");
|
||||
// Save recorded data for playback
|
||||
blob = ev.data;
|
||||
};
|
||||
|
||||
mediaRecorder.onstart = () => {
|
||||
info('onstart fired successfully');
|
||||
};
|
||||
|
||||
mediaRecorder.onstop = () => {
|
||||
info("Got 'stop' event");
|
||||
is(numDataAvailabledRaised, 1, "Expected 1 dataavailable event");
|
||||
|
||||
// Playback stream and verify resolution changes.
|
||||
ok(blob, "Should have gotten a data blob");
|
||||
var video = document.createElement("video");
|
||||
video.id = "recorded-video";
|
||||
video.src = URL.createObjectURL(blob);
|
||||
video.onerror = err => {
|
||||
ok(false, "Should be able to play the recording. Got error. code=" + video.error.code);
|
||||
SimpleTest.finish();
|
||||
};
|
||||
|
||||
// Check here that resize is correct in the playback stream.
|
||||
video.onresize = function() {
|
||||
++numResizeRaised;
|
||||
if (numResizeRaised == 1) {
|
||||
is(this.videoWidth, canvas_size, "1st resize event original width");
|
||||
is(this.videoHeight, canvas_size, "1st resize event original height ");
|
||||
} else if (numResizeRaised == 2) {
|
||||
is(this.videoWidth, new_canvas_size, "2nd resize event new width");
|
||||
is(this.videoHeight, new_canvas_size, "2nd resize event new height");
|
||||
} else {
|
||||
ok(false, "Only 2 numResizeRaised events are expected");
|
||||
}
|
||||
};
|
||||
|
||||
video.onended = () => {
|
||||
is(numResizeRaised, 2, "Expected 2 resize event");
|
||||
};
|
||||
document.getElementById("content").appendChild(video);
|
||||
video.play();
|
||||
|
||||
// Check last color
|
||||
helper.waitForPixelColor(video, helper.red, 128, "Should become red")
|
||||
.then(() => {
|
||||
video.onresize = {};
|
||||
video.onended = {};
|
||||
SimpleTest.finish();
|
||||
});
|
||||
};
|
||||
|
||||
// Start here by stream recorder.
|
||||
mediaRecorder.start();
|
||||
is(mediaRecorder.state, "recording", "Media recorder started");
|
||||
requestAnimationFrame(draw);
|
||||
|
||||
// Change resolution every 100ms
|
||||
var countFrames=0;
|
||||
var previous_time = performance.now();
|
||||
function draw(timestamp) {
|
||||
if (timestamp - previous_time < 100) {
|
||||
requestAnimationFrame(draw);
|
||||
return;
|
||||
}
|
||||
previous_time = timestamp;
|
||||
|
||||
var size = 0;
|
||||
var color = "";
|
||||
if (countFrames < 1) {
|
||||
// Initial size
|
||||
size = canvas_size;
|
||||
color = helper.blue;
|
||||
} else if (countFrames < 2) {
|
||||
// upsize
|
||||
size = new_canvas_size;
|
||||
color = helper.red;
|
||||
} else {
|
||||
// Stop recoredr on last frame
|
||||
mediaRecorder.stop();
|
||||
return;
|
||||
}
|
||||
// Resize and draw canvas
|
||||
canvas.width = canvas.height = size;
|
||||
helper.drawColor(canvas, color);
|
||||
// Register next draw on every call
|
||||
requestAnimationFrame(draw);
|
||||
countFrames++;
|
||||
}
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
startTest();
|
||||
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
146
dom/media/test/test_mediarecorder_record_upsize_resolution.html
Normal file
146
dom/media/test/test_mediarecorder_record_upsize_resolution.html
Normal file
@ -0,0 +1,146 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test MediaRecorder Recording canvas dynamically changes to greater resolution</title>
|
||||
<script type="text/javascript" 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">
|
||||
</div>
|
||||
<script class="testbody" type="text/javascript">
|
||||
|
||||
function startTest() {
|
||||
var canvas = document.createElement("canvas");
|
||||
var canvas_size = 100;
|
||||
var new_canvas_size = 150;
|
||||
canvas.width = canvas.height = canvas_size;
|
||||
|
||||
var helper = new CaptureStreamTestHelper2D(canvas_size, canvas_size);
|
||||
helper.drawColor(canvas, helper.red);
|
||||
|
||||
// The recorded stream coming from canvas.
|
||||
var stream = canvas.captureStream();
|
||||
|
||||
// Check values for events
|
||||
var numDataAvailabledRaised = 0;
|
||||
var numResizeRaised = 0;
|
||||
// Recorded data that will be playback.
|
||||
var blob;
|
||||
|
||||
// Media recorder for VP8 and canvas stream.
|
||||
var mediaRecorder = new MediaRecorder(stream);
|
||||
is(mediaRecorder.stream, stream,
|
||||
"Media recorder stream = canvas stream at the beginning of recording");
|
||||
|
||||
// Not expected events.
|
||||
mediaRecorder.onwarning = () => ok(false, "MediaRecorder: onwarning unexpectedly fired");
|
||||
mediaRecorder.onerror = err => {
|
||||
ok(false, "MediaRecorder: onerror unexpectedly fired. Code " + err.name);
|
||||
SimpleTest.finish();
|
||||
}
|
||||
|
||||
// When recorder is stopped get recorded data.
|
||||
mediaRecorder.ondataavailable = ev => {
|
||||
info("Got 'dataavailable' event");
|
||||
++numDataAvailabledRaised;
|
||||
is(blob, undefined, "On dataavailable event blob is undefined");
|
||||
// Save recorded data for playback
|
||||
blob = ev.data;
|
||||
};
|
||||
|
||||
mediaRecorder.onstart = () => {
|
||||
info('onstart fired successfully');
|
||||
};
|
||||
|
||||
mediaRecorder.onstop = () => {
|
||||
info("Got 'stop' event");
|
||||
is(numDataAvailabledRaised, 1, "Expected 1 dataavailable event");
|
||||
|
||||
// Playback stream and verify resolution changes.
|
||||
ok(blob, "Should have gotten a data blob");
|
||||
var video = document.createElement("video");
|
||||
video.id = "recorded-video";
|
||||
video.src = URL.createObjectURL(blob);
|
||||
video.onerror = err => {
|
||||
ok(false, "Should be able to play the recording. Got error. code=" + video.error.code);
|
||||
SimpleTest.finish();
|
||||
};
|
||||
|
||||
// Check here that resize is correct in the playback stream.
|
||||
video.onresize = function() {
|
||||
++numResizeRaised;
|
||||
if (numResizeRaised == 1) {
|
||||
is(this.videoWidth, canvas_size, "1st resize event original width");
|
||||
is(this.videoHeight, canvas_size, "1st resize event original height ");
|
||||
} else if (numResizeRaised == 2) {
|
||||
is(this.videoWidth, new_canvas_size, "2nd resize event new width");
|
||||
is(this.videoHeight, new_canvas_size, "2nd resize event new height");
|
||||
} else {
|
||||
ok(false, "Only 2 numResizeRaised events are expected");
|
||||
}
|
||||
};
|
||||
|
||||
video.onended = () => {
|
||||
is(numResizeRaised, 2, "Expected 2 resize event");
|
||||
};
|
||||
document.getElementById("content").appendChild(video);
|
||||
video.play();
|
||||
|
||||
// Check last color
|
||||
helper.waitForPixelColor(video, helper.red, 128, "Should become red")
|
||||
.then(() => {
|
||||
video.onresize = {};
|
||||
video.onended = {};
|
||||
SimpleTest.finish();
|
||||
});
|
||||
};
|
||||
|
||||
// Start here by stream recorder.
|
||||
mediaRecorder.start();
|
||||
is(mediaRecorder.state, "recording", "Media recorder started");
|
||||
requestAnimationFrame(draw);
|
||||
|
||||
// Change resolution every 100 ms
|
||||
var countFrames=0;
|
||||
var previous_time = performance.now();
|
||||
function draw(timestamp) {
|
||||
if (timestamp - previous_time < 100) {
|
||||
requestAnimationFrame(draw);
|
||||
return;
|
||||
}
|
||||
previous_time = timestamp;
|
||||
|
||||
var size = 0;
|
||||
var color = "";
|
||||
if (countFrames < 1) {
|
||||
// Initial size
|
||||
size = canvas_size;
|
||||
color = helper.blue;
|
||||
} else if (countFrames < 2) {
|
||||
// upsize
|
||||
size = new_canvas_size;
|
||||
color = helper.red;
|
||||
}else {
|
||||
// Stop recoredr on last frame
|
||||
mediaRecorder.stop();
|
||||
return;
|
||||
}
|
||||
// Resize and draw canvas
|
||||
canvas.width = canvas.height = size;
|
||||
helper.drawColor(canvas, color);
|
||||
// Register next draw on every call
|
||||
requestAnimationFrame(draw);
|
||||
countFrames++;
|
||||
}
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
startTest();
|
||||
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user