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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<!DOCTYPE HTML>
<html>
<head>
<title>Test MediaRecorder Recording canvas dynamically changes to greater resolution</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">
</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.pixelMustBecome(video, helper.red, {
threshold: 128,
infoString: "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>
|
