Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Gecko Bug 1670561] Use a utils library for creating media streams in MediaRecorder wpt. #26447

Merged
merged 2 commits into from
Nov 10, 2020
Merged

[Gecko Bug 1670561] Use a utils library for creating media streams in MediaRecorder wpt. #26447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5ace7d2
Use a utils library for creating media streams in MediaRecorder wpt.
Pehrsons Nov 9, 2020
a303ca5
Don't use getUserMedia in a http WPT.
Pehrsons Nov 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 5 additions & 5 deletions mediacapture-record/MediaRecorder-destroy-script-execution.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
var testForAllTrackEnded = async_test('MediaRecorder will not fire the stop event when all tracks are ended and the script execution context is going away');

iframeForCallingStop.onload = function(e) {
subFrameStop.window.prepareForTest();
subFrameStop.window.prepareForTest(testForCallingStop);
const recorder = subFrameStop.window.recorder;
recorder.ondataavailable = testForCallingStop.step_func(blobEvent => {
iframeForCallingStop.remove();
Expand All @@ -24,12 +24,12 @@
recorder.onstop = testForCallingStop.unreached_func('Unexpected stop event');
recorder.start();
assert_equals(recorder.state, 'recording', 'MediaRecorder has been started successfully');
subFrameStop.window.drawSomethingOnCanvas();
subFrameStop.window.control.addVideoFrame();
recorder.stop();
};

iframeForAllTrackEnded.onload = function(e) {
subFrameAllTrackEnded.window.prepareForTest();
subFrameAllTrackEnded.window.prepareForTest(testForAllTrackEnded);
const recorder = subFrameAllTrackEnded.window.recorder;
recorder.ondataavailable = testForAllTrackEnded.step_func(blobEvent => {
iframeForAllTrackEnded.remove();
Expand All @@ -38,10 +38,10 @@
recorder.onstop = testForAllTrackEnded.unreached_func('Unexpected stop event');
recorder.start();
assert_equals(recorder.state, 'recording', 'MediaRecorder has been started successfully');
subFrameAllTrackEnded.window.drawSomethingOnCanvas();
subFrameAllTrackEnded.window.control.addVideoFrame();
subFrameAllTrackEnded.window.video.getVideoTracks()[0].stop();
};

</script>
</body>
</html>
</html>
43 changes: 10 additions & 33 deletions mediacapture-record/MediaRecorder-error.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,14 @@
<link rel="help" href="https://w3c.github.io/mediacapture-record/MediaRecorder.html#mediarecorder">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="utils/sources.js"></script>
</head>
<body>
<canvas id="canvas" width="320" height="320">
</canvas>
<script>
function createAudioStream() {
let ac = new AudioContext();
let osc = ac.createOscillator();
let dest = ac.createMediaStreamDestination();
osc.connect(dest);
return dest.stream;
}

function createVideoStream() {
let canvas = document.getElementById("canvas");
canvas.getContext('2d').lineTo(10, 10);
return canvas.captureStream();
}

function drawSomethingOnCanvas() {
let canvas = document.getElementById("canvas");
// Drawing something on the canvas generates a frame in its captured stream.
let context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(0, 0, 10, 10);
}

async_test(t => {
let video = createVideoStream();
let audio = createAudioStream();
let recorder = new MediaRecorder(video);
const {stream: video, control} = createVideoStream(t);
const {stream: audio} = createAudioStream(t);
const recorder = new MediaRecorder(video);
recorder.onerror = t.step_func(mediaRecorderErrorEvent => {
assert_true(mediaRecorderErrorEvent instanceof MediaRecorderErrorEvent, 'the type of event should be MediaRecorderErrorEvent');
assert_equals(mediaRecorderErrorEvent.error.name, 'InvalidModificationError', 'the type of error should be InvalidModificationError when track has been added or removed');
Expand All @@ -46,15 +23,15 @@
recorder.start();
assert_equals(recorder.state, "recording", "MediaRecorder has been started successfully");
video.addTrack(audio.getAudioTracks()[0]);
drawSomethingOnCanvas();
control.addVideoFrame();
t.step_timeout(() => {
assert_unreached("error event is not fired after 2 seconds");
}, 2000);
}, "MediaRecorder will stop recording when any of track is added and error event will be fired");

async_test(t => {
let video = createVideoStream();
let recorder = new MediaRecorder(video);
const {stream: video, control} = createVideoStream(t);
const recorder = new MediaRecorder(video);
recorder.onerror = t.step_func(mediaRecorderErrorEvent => {
assert_true(mediaRecorderErrorEvent instanceof MediaRecorderErrorEvent, 'the type of event should be MediaRecorderErrorEvent');
assert_equals(mediaRecorderErrorEvent.error.name, 'InvalidModificationError', 'the type of error should be InvalidModificationError when track has been added or removed');
Expand All @@ -65,15 +42,15 @@
recorder.start();
assert_equals(recorder.state, "recording", "MediaRecorder has been started successfully");
video.removeTrack(video.getVideoTracks()[0]);
drawSomethingOnCanvas();
control.addVideoFrame();
t.step_timeout(() => {
assert_unreached("error event is not fired after 2 seconds");
}, 2000);
}, "MediaRecorder will stop recording when any of track is removed and error event will be fired");

test(t => {
let video = createVideoStream();
let recorder = new MediaRecorder(video);
const {stream: video} = createVideoStream(t);
const recorder = new MediaRecorder(video);
recorder.start();
assert_equals(recorder.state, "recording", "MediaRecorder has been started successfully");
assert_throws_dom("InvalidStateError", function() {
Expand Down
24 changes: 5 additions & 19 deletions mediacapture-record/MediaRecorder-events-and-exceptions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,16 @@
<link rel="help" href="https://w3c.github.io/mediacapture-record/MediaRecorder.html#mediarecorder">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="utils/sources.js"></script>
</head>
<body>
<canvas id="canvas" width="320" height="320"></canvas>
<script>

// This test exercises the MediaRecorder API event sequence:
// onStart -> onPause -> onResume -> onDataAvailable -> onStop
// verifying the |state| and a few exceptions that are supposed to be thrown
// when doing the wrong thing.

function createVideoStream() {
let canvas = document.getElementById("canvas");
canvas.getContext('2d').lineTo(10, 10);
return canvas.captureStream();
}

function drawSomethingOnCanvas() {
let canvas = document.getElementById("canvas");
// Drawing something on the canvas generates a frame in its captured stream.
let context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(0, 0, 10, 10);
}

async_test(test => {

recorderOnUnexpectedEvent = test.step_func(() => {
Expand Down Expand Up @@ -75,18 +61,18 @@
recorder.pause();
});

let stream = createVideoStream();
const {stream, control} = createVideoStream(test);
assert_equals(stream.getAudioTracks().length, 0);
assert_equals(stream.getVideoTracks().length, 1);
assert_equals(stream.getVideoTracks()[0].readyState, 'live');

assert_throws_dom("NotSupportedError",
function() {
recorder = new MediaRecorder(
new MediaRecorder(
new MediaStream(), {mimeType : "video/invalid"});
},
"recorder should throw() with unsupported mimeType");
let recorder = new MediaRecorder(new MediaStream());
const recorder = new MediaRecorder(new MediaStream());
assert_equals(recorder.state, "inactive");

recorder.stop();
Expand All @@ -106,7 +92,7 @@

recorder.stream.addTrack(stream.getTracks()[0]);

drawSomethingOnCanvas();
control.addVideoFrame();

recorder.onstop = recorderOnUnexpectedEvent;
recorder.onpause = recorderOnUnexpectedEvent;
Expand Down
68 changes: 16 additions & 52 deletions mediacapture-record/MediaRecorder-mimetype.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,60 +5,24 @@
<link rel="help" href="https://w3c.github.io/mediacapture-record/MediaRecorder.html#dom-mediarecorder-mimeType">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="utils/sources.js"></script>
</head>
<body>
<canvas id="canvas" width="200" height="200">
</canvas>
<script>
function createAudioStream(t) {
const ac = new AudioContext();
const dest = ac.createMediaStreamDestination();
const osc = ac.createOscillator();
osc.connect(dest);
osc.start();
const [track] = dest.stream.getTracks();
t.add_cleanup(() => track.stop());
return dest.stream;
}

function createVideoStream(t) {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
const stream = canvas.captureStream();
const [track] = stream.getTracks();
t.add_cleanup(() => track.stop());
ctx.fillStyle = 'green';
requestAnimationFrame(function draw() {
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (track.readyState == "live") {
requestAnimationFrame(draw);
}
});
return stream;
}

function createAudioVideoStream(t) {
return new MediaStream([
...createAudioStream(t).getTracks(),
...createVideoStream(t).getTracks(),
]);
}

test(t => {
const recorder = new MediaRecorder(createAudioStream(t));
const recorder = new MediaRecorder(createAudioStream(t).stream);
assert_equals(recorder.mimeType, "",
"MediaRecorder has no default mimeType");
}, "MediaRecorder sets no default mimeType in the constructor for audio");

test(t => {
const recorder = new MediaRecorder(createVideoStream(t));
const recorder = new MediaRecorder(createVideoStream(t).stream);
assert_equals(recorder.mimeType, "",
"MediaRecorder has no default mimeType");
}, "MediaRecorder sets no default mimeType in the constructor for video");

test(t => {
const stream = createAudioVideoStream(t);
const recorder = new MediaRecorder(stream);
const recorder = new MediaRecorder(createAudioVideoStream(t).stream);
assert_equals(recorder.mimeType, "",
"MediaRecorder has no default mimeType");
}, "MediaRecorder sets no default mimeType in the constructor for audio/video");
Expand Down Expand Up @@ -115,46 +79,46 @@
}

promise_test(async t => {
const recorder = new MediaRecorder(createAudioStream(t));
const recorder = new MediaRecorder(createFlowingAudioStream(t).stream);
recorder.start();
await new Promise(r => recorder.onstart = r);
assert_not_equals(recorder.mimeType, "");
}, "MediaRecorder sets a nonempty mimeType on 'onstart' for audio");

promise_test(async t => {
const recorder = new MediaRecorder(createVideoStream(t));
const recorder = new MediaRecorder(createFlowingVideoStream(t).stream);
recorder.start();
await new Promise(r => recorder.onstart = r);
assert_not_equals(recorder.mimeType, "");
}, "MediaRecorder sets a nonempty mimeType on 'onstart' for video");

promise_test(async t => {
const recorder = new MediaRecorder(createAudioVideoStream(t));
const recorder = new MediaRecorder(createFlowingAudioVideoStream(t).stream);
recorder.start();
await new Promise(r => recorder.onstart = r);
assert_not_equals(recorder.mimeType, "");
}, "MediaRecorder sets a nonempty mimeType on 'onstart' for audio/video");

promise_test(async t => {
const recorder = new MediaRecorder(createAudioStream(t));
const recorder = new MediaRecorder(createFlowingAudioStream(t).stream);
recorder.start();
assert_equals(recorder.mimeType, "");
}, "MediaRecorder mimeType is not set before 'onstart' for audio");

promise_test(async t => {
const recorder = new MediaRecorder(createVideoStream(t));
const recorder = new MediaRecorder(createFlowingVideoStream(t).stream);
recorder.start();
assert_equals(recorder.mimeType, "");
}, "MediaRecorder mimeType is not set before 'onstart' for video");

promise_test(async t => {
const recorder = new MediaRecorder(createAudioVideoStream(t));
const recorder = new MediaRecorder(createFlowingAudioVideoStream(t).stream);
recorder.start();
assert_equals(recorder.mimeType, "");
}, "MediaRecorder mimeType is not set before 'onstart' for audio/video");

promise_test(async t => {
const recorder = new MediaRecorder(createAudioStream(t));
const recorder = new MediaRecorder(createFlowingAudioStream(t).stream);
const onstartPromise = new Promise(resolve => {
recorder.onstart = () => {
recorder.onstart = () => t.step_func(() => {
Expand All @@ -169,7 +133,7 @@
}, "MediaRecorder doesn't fire 'onstart' multiple times for audio");

promise_test(async t => {
const recorder = new MediaRecorder(createVideoStream(t));
const recorder = new MediaRecorder(createFlowingVideoStream(t).stream);
const onstartPromise = new Promise(resolve => {
recorder.onstart = () => {
recorder.onstart = () => t.step_func(() => {
Expand All @@ -184,7 +148,7 @@
}, "MediaRecorder doesn't fire 'onstart' multiple times for video");

promise_test(async t => {
const recorder = new MediaRecorder(createAudioVideoStream(t));
const recorder = new MediaRecorder(createFlowingAudioVideoStream(t).stream);
const onstartPromise = new Promise(resolve => {
recorder.onstart = () => {
recorder.onstart = () => t.step_func(() => {
Expand All @@ -199,7 +163,7 @@
}, "MediaRecorder doesn't fire 'onstart' multiple times for audio/video");

promise_test(async t => {
const recorder = new MediaRecorder(createAudioStream(t));
const recorder = new MediaRecorder(createFlowingAudioStream(t).stream);
recorder.start();
await new Promise(r => recorder.onstart = r);
assert_regexp_match(recorder.mimeType, /^audio\//,
Expand All @@ -212,7 +176,7 @@
}, "MediaRecorder formats mimeType well after 'start' for audio");

promise_test(async t => {
const recorder = new MediaRecorder(createVideoStream(t));
const recorder = new MediaRecorder(createFlowingVideoStream(t).stream);
recorder.start();
await new Promise(r => recorder.onstart = r);
assert_regexp_match(recorder.mimeType, /^video\//,
Expand All @@ -225,7 +189,7 @@
}, "MediaRecorder formats mimeType well after 'start' for video");

promise_test(async t => {
const recorder = new MediaRecorder(createAudioVideoStream(t));
const recorder = new MediaRecorder(createFlowingAudioVideoStream(t).stream);
recorder.start();
await new Promise(r => recorder.onstart = r);
assert_regexp_match(recorder.mimeType, /^video\//,
Expand Down
20 changes: 6 additions & 14 deletions mediacapture-record/MediaRecorder-pause-resume.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,10 @@
<link rel="help" href="https://w3c.github.io/mediacapture-record/MediaRecorder.html#mediarecorder">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="utils/sources.js"></script>
</head>
<body>
<canvas id="canvas" width="200" height="200">
</canvas>
<script>
function createVideoStream() {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, canvas.width, canvas.height);
return canvas.captureStream();
}

function recordEvents(target, events) {
let arr = [];
for (let ev of events) {
Expand All @@ -26,10 +17,11 @@
return arr;
}

promise_test(async () => {
let video = createVideoStream();
let recorder = new MediaRecorder(video);
let events = recordEvents(recorder,
promise_test(async t => {
const {stream: video, control} = createVideoStream(t);
control.addVideoFrame();
const recorder = new MediaRecorder(video);
const events = recordEvents(recorder,
["start", "stop", "dataavailable", "pause", "resume", "error"]);

recorder.start();
Expand Down