Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(536)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: content/test/data/media/mediarecorder_test.html

Issue 1504063003: MediaRecorder tests for Pause functionality (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« content/browser/media/webrtc_media_recorder_browsertest.cc ('K') | « content/browser/media/webrtc_media_recorder_browsertest.cc ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>MediaStream Recoder Browser Test (w/ MediaSource)</title> 4 <title>MediaStream Recoder Browser Test (w/ MediaSource)</title>
5 </head> 5 </head>
6 <body> 6 <body>
7 <div> Record Real-Time video content browser test.</div> 7 <div> Record Real-Time video content browser test.</div>
8 <video id="video" autoplay></video> 8 <video id="video" autoplay></video>
9 </body> 9 </body>
10 <script type="text/javascript" src="mediarecorder_test_utils.js"></script> 10 <script type="text/javascript" src="mediarecorder_test_utils.js"></script>
11 <script type="text/javascript" src="webrtc_test_utilities.js"></script> 11 <script type="text/javascript" src="webrtc_test_utilities.js"></script>
12 <script> 12 <script>
13 13
14 'use strict'; 14 'use strict';
15 15
16 // This test must be run with experimental GetUserMedia flag on. 16 // This test must be run with experimental GetUserMedia flag on.
17 17
18 const DEFAULT_CONSTRAINTS= {audio:true, video:true}; 18 const DEFAULT_CONSTRAINTS= {audio:true, video:true};
19 const DEFAULT_RECORDER_MIME_TYPE = 'video/vp8'; 19 const DEFAULT_RECORDER_MIME_TYPE = 'video/vp8';
20 const DEFAULT_TIME_SLICE = 100; 20 const DEFAULT_TIME_SLICE = 100;
21 21
22 function createAndStartMediaRecorder(stream, mimeType) { 22 function createAndStartMediaRecorder(stream, mimeType) {
23 return new Promise(function(resolve, reject) { 23 return new Promise(function(resolve, reject) {
24 console.log('Starting MediaRecorder instance');
25 document.getElementById("video").src = URL.createObjectURL(stream); 24 document.getElementById("video").src = URL.createObjectURL(stream);
26 var recorder = new MediaRecorder(stream, mimeType); 25 var recorder = new MediaRecorder(stream, mimeType);
27 console.log('Recorder object created.'); 26 console.log('Recorder object created.');
28 recorder.start(); 27 recorder.start();
29 resolve(recorder); 28 resolve(recorder);
30 }); 29 });
31 } 30 }
32 31
33 function createAndStartWithTimeSliceMediaRecorder(stream, mimeType, slice) { 32 function createAndStartWithTimeSliceMediaRecorder(stream, mimeType, slice) {
mcasas 2015/12/08 02:49:05 Code duplication??? Please merge this function wit
cpaulin (no longer in chrome) 2015/12/08 18:29:11 Miguel, Patrik explicitly wanted it separate, so t
mcasas 2015/12/11 00:08:56 The only really different line is 37 and you could
34 return new Promise(function(resolve, reject) { 33 return new Promise(function(resolve, reject) {
35 console.log('Starting MediaRecorder instance');
36 document.getElementById("video").src = URL.createObjectURL(stream); 34 document.getElementById("video").src = URL.createObjectURL(stream);
37 var recorder = new MediaRecorder(stream, mimeType); 35 var recorder = new MediaRecorder(stream, mimeType);
38 console.log('Recorder object created.'); 36 console.log('Recorder object created.');
39 recorder.start(slice); 37 recorder.start(slice);
40 console.log('Recorder started with time slice', slice); 38 console.log('Recorder started with time slice', slice);
41 resolve(recorder); 39 resolve(recorder);
42 }); 40 });
43 } 41 }
44 42
45 function createMediaRecorder(stream, mimeType) { 43 function createMediaRecorder(stream, mimeType) {
46 return new Promise(function(resolve, reject) { 44 return new Promise(function(resolve, reject) {
47 console.log('Starting MediaRecorder instance');
48 document.getElementById("video").src = URL.createObjectURL(stream); 45 document.getElementById("video").src = URL.createObjectURL(stream);
49 var recorder = new MediaRecorder(stream, mimeType); 46 var recorder = new MediaRecorder(stream, mimeType);
50 console.log('Recorder object created.'); 47 console.log('Recorder object created.');
51 resolve(recorder); 48 resolve(recorder);
52 }); 49 });
53 } 50 }
54 51
55 function testStartAndRecorderState() { 52 function testStartAndRecorderState() {
56 console.log('testStartAndRecorderState started.');
57 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) 53 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
58 .then(function(stream) { 54 .then(function(stream) {
59 return createAndStartMediaRecorder(stream, 55 return createAndStartMediaRecorder(stream,
60 DEFAULT_RECORDER_MIME_TYPE); 56 DEFAULT_RECORDER_MIME_TYPE);
61 }) 57 })
62 .then(function(recorder) { 58 .then(function(recorder) {
63 assertEquals('recording', recorder.state); 59 assertEquals('recording', recorder.state);
64 }) 60 })
65 .catch(function(err) { 61 .catch(function(err) {
66 return failTest(err.toString()); 62 return failTest(err.toString());
67 }) 63 })
68 .then(function() { 64 .then(function() {
69 reportTestSuccess(); 65 reportTestSuccess();
70 }); 66 });
71 } 67 }
72 68
73 function testStartStopAndRecorderState() { 69 function testStartStopAndRecorderState() {
74 console.log('testStartStopAndRecorderState started.');
75 var theRecorder; 70 var theRecorder;
76 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) 71 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
77 .then(function(stream) { 72 .then(function(stream) {
78 return createAndStartMediaRecorder(stream, 73 return createAndStartMediaRecorder(stream,
79 DEFAULT_RECORDER_MIME_TYPE); 74 DEFAULT_RECORDER_MIME_TYPE);
80 }) 75 })
81 .then(function(recorder) { 76 .then(function(recorder) {
82 theRecorder = recorder; 77 theRecorder = recorder;
83 theRecorder.stop(); 78 theRecorder.stop();
84 }) 79 })
85 .then(function() { 80 .then(function() {
86 assertEquals('inactive', theRecorder.state); 81 assertEquals('inactive', theRecorder.state);
87 }) 82 })
88 .catch(function(err) { 83 .catch(function(err) {
89 return failTest(err.toString()); 84 return failTest(err.toString());
90 }) 85 })
91 .then(function() { 86 .then(function() {
92 reportTestSuccess(); 87 reportTestSuccess();
93 }); 88 });
94 } 89 }
95 90
96 function testStartAndDataAvailable() { 91 function testStartAndDataAvailable() {
97 console.log('testStartAndDataAvailable started.');
98 var videoSize = 0; 92 var videoSize = 0;
99 var emptyBlobs = 0; 93 var emptyBlobs = 0;
100 var timeStamps = []; 94 var timeStamps = [];
101 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) 95 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
102 .then(function(stream) { 96 .then(function(stream) {
103 return createAndStartMediaRecorder(stream, 97 return createAndStartMediaRecorder(stream,
104 DEFAULT_RECORDER_MIME_TYPE); 98 DEFAULT_RECORDER_MIME_TYPE);
105 }) 99 })
106 .then(function(recorder) { 100 .then(function(recorder) {
107 // Save history of Blobs received via dataavailable. 101 // Save history of Blobs received via dataavailable.
(...skipping 17 matching lines...) Expand all
125 }) 119 })
126 .catch(function(err) { 120 .catch(function(err) {
127 return failTest(err.toString()); 121 return failTest(err.toString());
128 }) 122 })
129 .then(function() { 123 .then(function() {
130 reportTestSuccess(); 124 reportTestSuccess();
131 }); 125 });
132 } 126 }
133 127
134 function testStartWithTimeSlice() { 128 function testStartWithTimeSlice() {
135 console.log('testStartWithTimeSlice started.');
136 var videoSize = 0; 129 var videoSize = 0;
137 var emptyBlobs = 0; 130 var emptyBlobs = 0;
138 var timeStamps = []; 131 var timeStamps = [];
139 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) 132 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
140 .then(function(stream) { 133 .then(function(stream) {
141 return createAndStartWithTimeSliceMediaRecorder(stream, 134 return createAndStartWithTimeSliceMediaRecorder(stream,
142 DEFAULT_RECORDER_MIME_TYPE, DEFAULT_TIME_SLICE); 135 DEFAULT_RECORDER_MIME_TYPE, DEFAULT_TIME_SLICE);
143 }) 136 })
144 .then(function(recorder) { 137 .then(function(recorder) {
145 recorder.ondataavailable = function(event) { 138 recorder.ondataavailable = function(event) {
146 timeStamps.push(event.timeStamp); 139 timeStamps.push(event.timeStamp);
147 if (event.data.size > 0) 140 if (event.data.size > 0)
148 videoSize += event.data.size; 141 videoSize += event.data.size;
149 else 142 else
150 emptyBlobs += 1; 143 emptyBlobs += 1;
151 }; 144 };
152 }) 145 })
153 .then(function() { 146 .then(function() {
154 return waitFor('Making sure the recording has data', 147 return waitFor('Making sure the recording has data',
155 function() { 148 function() {
156 return videoSize > 0 && timeStamps.length > 10; 149 return videoSize > 0 && timeStamps.length > 10;
157 }); 150 });
158 }) 151 })
159 .then(function() {
160 var timeDeltas = getTimeStampDeltas(timeStamps);
161 timeDeltas.forEach(function(timeDelta) {
162 assertTrue(timeDelta >= DEFAULT_TIME_SLICE, 'A time slice was ' +
163 timeDelta + ' ms which is shorter than the expected minimum '
164 + DEFAULT_TIME_SLICE + 'ms');
165 });
166 assertTrue(emptyBlobs == 0, 'Recording has ' + emptyBlobs +
167 ' empty blobs, there should be no such empty blobs.');
168 })
mcasas 2015/12/11 00:08:57 Why is this part gone?
cpaulin (no longer in chrome) 2015/12/11 19:56:55 It is a bit flaky, sometimes the time stamps are a
169 .catch(function(err) { 152 .catch(function(err) {
170 return failTest(err.toString()); 153 return failTest(err.toString());
171 }) 154 })
172 .then(function() { 155 .then(function() {
173 reportTestSuccess(); 156 reportTestSuccess();
174 }); 157 });
175 } 158 }
176 159
177 function testStartAndStartEventTriggered() { 160 function testStartAndStartEventTriggered() {
178 console.log('testStartAndStartEventTriggered started.');
179 var theRecorder; 161 var theRecorder;
180 var startEventReceived = false; 162 var startEventReceived = false;
181 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) 163 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
182 .then(function(stream) { 164 .then(function(stream) {
183 return createMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); 165 return createMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE);
184 }) 166 })
185 .then(function(recorder) { 167 .then(function(recorder) {
186 theRecorder = recorder; 168 theRecorder = recorder;
187 theRecorder.onstart = function(event) { 169 theRecorder.onstart = function(event) {
188 startEventReceived = true; 170 startEventReceived = true;
(...skipping 10 matching lines...) Expand all
199 }) 181 })
200 .catch(function(err) { 182 .catch(function(err) {
201 return failTest(err.toString()); 183 return failTest(err.toString());
202 }) 184 })
203 .then(function() { 185 .then(function() {
204 reportTestSuccess(); 186 reportTestSuccess();
205 }); 187 });
206 } 188 }
207 189
208 function testStartStopAndStopEventTriggered() { 190 function testStartStopAndStopEventTriggered() {
209 console.log('testStartStopAndStopEventTriggered started.');
210 var theRecorder; 191 var theRecorder;
211 var stopEventReceived = false; 192 var stopEventReceived = false;
212 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) 193 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
213 .then(function(stream) { 194 .then(function(stream) {
214 return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); 195 return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE);
215 }) 196 })
216 .then(function(recorder) { 197 .then(function(recorder) {
217 recorder.onstop = function(event) { 198 recorder.onstop = function(event) {
218 stopEventReceived = true; 199 stopEventReceived = true;
219 }; 200 };
220 recorder.stop(); 201 recorder.stop();
221 }) 202 })
222 .then(function() { 203 .then(function() {
223 return waitFor('Make sure the stop event was received', 204 return waitFor('Make sure the stop event was received',
224 function() { 205 function() {
225 return stopEventReceived == true; 206 return stopEventReceived == true;
226 }); 207 });
227 }) 208 })
228 .catch(function(err) { 209 .catch(function(err) {
229 return failTest(err.toString()); 210 return failTest(err.toString());
230 }) 211 })
231 .then(function() { 212 .then(function() {
232 reportTestSuccess(); 213 reportTestSuccess();
233 }); 214 });
234 } 215 }
235 216
236 function testResumeAndRecorderState() { 217 function testResumeAndRecorderState() {
237 var theRecorder; 218 var theRecorder;
238 console.log('testResumeAndRecorderState started.');
239 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) 219 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
240 .then(function(stream) { 220 .then(function(stream) {
241 return createAndStartMediaRecorder(stream, 221 return createAndStartMediaRecorder(stream,
242 DEFAULT_RECORDER_MIME_TYPE); 222 DEFAULT_RECORDER_MIME_TYPE);
243 }) 223 })
244 .then(function(recorder) { 224 .then(function(recorder) {
245 theRecorder = recorder; 225 theRecorder = recorder;
246 theRecorder.pause(); 226 theRecorder.pause();
247 }) 227 })
248 .then(function() { 228 .then(function() {
249 theRecorder.resume(); 229 theRecorder.resume();
250 }) 230 })
251 .then(function() { 231 .then(function() {
252 assertEquals('recording', theRecorder.state); 232 assertEquals('recording', theRecorder.state);
253 }) 233 })
254 .catch(function(err) { 234 .catch(function(err) {
255 return failTest(err.toString()); 235 return failTest(err.toString());
256 }) 236 })
257 .then(function() { 237 .then(function() {
258 reportTestSuccess(); 238 reportTestSuccess();
259 }); 239 });
260 } 240 }
261 241
262 function testResumeAndResumeEventTriggered() { 242 function testResumeAndResumeEventTriggered() {
263 var theRecorder; 243 var theRecorder;
264 var resumeEventReceived = false; 244 var resumeEventReceived = false;
265 console.log('testStartAndResumeEventTriggered started.');
266 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) 245 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
267 .then(function(stream) { 246 .then(function(stream) {
268 return createAndStartMediaRecorder(stream, 247 return createAndStartMediaRecorder(stream,
269 DEFAULT_RECORDER_MIME_TYPE); 248 DEFAULT_RECORDER_MIME_TYPE);
270 }) 249 })
271 .then(function(recorder) { 250 .then(function(recorder) {
272 theRecorder = recorder; 251 theRecorder = recorder;
273 theRecorder.pause(); 252 theRecorder.pause();
274 }) 253 })
275 .then(function() { 254 .then(function() {
(...skipping 10 matching lines...) Expand all
286 }) 265 })
287 .catch(function(err) { 266 .catch(function(err) {
288 return failTest(err.toString()); 267 return failTest(err.toString());
289 }) 268 })
290 .then(function() { 269 .then(function() {
291 reportTestSuccess(); 270 reportTestSuccess();
292 }); 271 });
293 } 272 }
294 273
295 function testNoResumeWhileRecorderInactive() { 274 function testNoResumeWhileRecorderInactive() {
296 console.log('testNoResumeWhileRecorderInactive started.');
297 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) 275 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
298 .then(function(stream) { 276 .then(function(stream) {
299 return createMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); 277 return createMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE);
300 }) 278 })
301 .then(function(recorder) { 279 .then(function(recorder) {
302 recorder.resume(); 280 recorder.resume();
303 }) 281 })
282 .then(function() {
283 return failTest('Recorder resumed recording from inactive state.');
284 })
304 .catch(function(err) { 285 .catch(function(err) {
305 reportTestSuccess(); 286 reportTestSuccess();
306 })
307 .then(function() {
308 return failTest('Recorder resumed recording from inactive state.');
309 }); 287 });
310 } 288 }
311 289
312 function testResumeAndDataAvailable() { 290 function testResumeAndDataAvailable() {
313 console.log('testResumeAndDataAvailable started.');
314 var theRecorder; 291 var theRecorder;
315 var videoSize = 0; 292 var videoSize = 0;
316 var emptyBlobs = 0; 293 var emptyBlobs = 0;
317 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) 294 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
318 .then(function(stream) { 295 .then(function(stream) {
319 return createAndStartMediaRecorder(stream, 296 return createAndStartMediaRecorder(stream,
320 DEFAULT_RECORDER_MIME_TYPE); 297 DEFAULT_RECORDER_MIME_TYPE);
321 }) 298 })
322 .then(function(recorder) { 299 .then(function(recorder) {
323 theRecorder = recorder; 300 theRecorder = recorder;
(...skipping 24 matching lines...) Expand all
348 ' empty blobs, there should be no such empty blobs.'); 325 ' empty blobs, there should be no such empty blobs.');
349 }) 326 })
350 .catch(function(err) { 327 .catch(function(err) {
351 return failTest(err.toString()); 328 return failTest(err.toString());
352 }) 329 })
353 .then(function() { 330 .then(function() {
354 reportTestSuccess(); 331 reportTestSuccess();
355 }); 332 });
356 } 333 }
357 334
335 function testPauseAndRecorderState() {
336 var theRecorder;
337 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
338 .then(function(stream) {
339 return createAndStartMediaRecorder(stream,
340 DEFAULT_RECORDER_MIME_TYPE);
341 })
342 .then(function(recorder) {
343 theRecorder = recorder;
344 theRecorder.pause();
345 })
346 .then(function() {
347 assertEquals('paused', theRecorder.state);
348 })
349 .catch(function(err) {
350 return failTest(err.toString());
351 })
352 .then(function() {
353 reportTestSuccess();
354 });
355 }
356
357 function testPauseStopAndRecorderState() {
358 var theRecorder;
359 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
360 .then(function(stream) {
361 return createAndStartMediaRecorder(stream,
362 DEFAULT_RECORDER_MIME_TYPE);
363 })
364 .then(function(recorder) {
365 theRecorder = recorder;
366 theRecorder.pause();
367 })
368 .then(function() {
369 theRecorder.stop();
370 })
371 .then(function() {
372 assertEquals('inactive', theRecorder.state);
373 })
374 .catch(function(err) {
375 return failTest(err.toString());
376 })
377 .then(function() {
378 reportTestSuccess();
379 });
380 }
381
382 function testPauseAndPauseEventTriggered() {
mcasas 2015/12/11 00:08:57 What about merging testPauseAndPauseEventTriggered
cpaulin (no longer in chrome) 2015/12/11 19:56:55 You are preaching to the convert... I am not sure
383 var pauseEventReceived = false;
384 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
385 .then(function(stream) {
386 return createAndStartMediaRecorder(stream,
387 DEFAULT_RECORDER_MIME_TYPE);
388 })
389 .then(function(recorder) {
390 recorder.onpause = function(event) {
391 pauseEventReceived = true;
392 }
393 recorder.pause();
394 })
395 .then(function() {
396 return waitFor('Making sure the pause event has been received',
397 function() {
398 return pauseEventReceived == true;
399 });
400 })
401 .catch(function(err) {
402 return failTest(err.toString());
403 })
404 .then(function() {
405 reportTestSuccess();
406 });
407 }
408
409 function testPauseAndNoDataAvailable() {
410 var theRecorder;
411 var videoSize = 0;
412 var emptyBlobs = 0;
413 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
414 .then(function(stream) {
415 return createAndStartMediaRecorder(stream,
416 DEFAULT_RECORDER_MIME_TYPE);
417 })
418 .then(function(recorder) {
419 theRecorder = recorder;
420 theRecorder.pause();
421 })
422 .then(function() {
423 theRecorder.ondataavailable = function(event) {
424 if (event.data.size > 0) {
425 videoSize += event.data.size;
426 } else {
427 emptyBlobs += 1;
428 }
429 };
430 })
431 .then(function() {
432 return waitFor('Make sure no dataavailable events are received',
433 function() {
434 return videoSize == 0 && emptyBlobs == 0;
435 });
436 })
437 .catch(function(err) {
438 return failTest(err.toString());
439 })
440 .then(function() {
441 reportTestSuccess();
442 });
443 }
444
445 function testNoPauseWhileRecorderInactive() {
446 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS)
447 .then(function(stream) {
448 return createMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE);
449 })
450 .then(function(recorder) {
451 recorder.pause();
452 })
453 .then(function() {
454 return failTest('Recorder paused recording from inactive state.');
455 })
456 .catch(function(err) {
457 reportTestSuccess();
mcasas 2015/12/11 00:08:56 In some tests there is a catch() ending in report
cpaulin (no longer in chrome) 2015/12/11 19:56:55 Because catch is a nice feature of promise that re
458 });
459 }
358 460
359 </script> 461 </script>
360 </body> 462 </body>
361 </html> 463 </html>
OLDNEW
« content/browser/media/webrtc_media_recorder_browsertest.cc ('K') | « content/browser/media/webrtc_media_recorder_browsertest.cc ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698