1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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>
|
