OLD | NEW |
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'); | 24 console.log('Starting MediaRecorder instance'); |
25 document.getElementById("video").src = URL.createObjectURL(stream); | 25 document.getElementById("video").src = URL.createObjectURL(stream); |
26 var recorder = new MediaRecorder(stream, mimeType); | 26 var recorder = new MediaRecorder(stream, {"mimeType" : mimeType}); |
27 console.log('Recorder object created.'); | 27 console.log('Recorder object created.'); |
28 recorder.start(); | 28 recorder.start(); |
29 resolve(recorder); | 29 resolve(recorder); |
30 }); | 30 }); |
31 } | 31 } |
32 | 32 |
33 function createAndStartWithTimeSliceMediaRecorder(stream, mimeType, slice) { | 33 function createAndStartWithTimeSliceMediaRecorder(stream, mimeType, slice) { |
34 return new Promise(function(resolve, reject) { | 34 return new Promise(function(resolve, reject) { |
35 console.log('Starting MediaRecorder instance'); | 35 console.log('Starting MediaRecorder instance'); |
36 document.getElementById("video").src = URL.createObjectURL(stream); | 36 document.getElementById("video").src = URL.createObjectURL(stream); |
37 var recorder = new MediaRecorder(stream, mimeType); | 37 var recorder = new MediaRecorder(stream, {"mimeType" : mimeType}); |
38 console.log('Recorder object created.'); | 38 console.log('Recorder object created.'); |
39 recorder.start(slice); | 39 recorder.start(slice); |
40 console.log('Recorder started with time slice', slice); | 40 console.log('Recorder started with time slice', slice); |
41 resolve(recorder); | 41 resolve(recorder); |
42 }); | 42 }); |
43 } | 43 } |
44 | 44 |
45 function createMediaRecorder(stream, mimeType) { | 45 function createMediaRecorder(stream, mimeType) { |
46 return new Promise(function(resolve, reject) { | 46 return new Promise(function(resolve, reject) { |
47 console.log('Starting MediaRecorder instance'); | 47 console.log('Starting MediaRecorder instance'); |
48 document.getElementById("video").src = URL.createObjectURL(stream); | 48 document.getElementById("video").src = URL.createObjectURL(stream); |
49 var recorder = new MediaRecorder(stream, mimeType); | 49 var recorder = new MediaRecorder(stream, {"mimeType" : mimeType}); |
50 console.log('Recorder object created.'); | 50 console.log('Recorder object created.'); |
51 resolve(recorder); | 51 resolve(recorder); |
52 }); | 52 }); |
53 } | 53 } |
54 | 54 |
55 function testStartAndRecorderState() { | 55 function testStartAndRecorderState() { |
56 console.log('testStartAndRecorderState started.'); | 56 console.log('testStartAndRecorderState started.'); |
57 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) | 57 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
58 .then(function(stream) { | 58 .then(function(stream) { |
59 return createAndStartMediaRecorder(stream, | 59 return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
60 DEFAULT_RECORDER_MIME_TYPE); | |
61 }) | 60 }) |
62 .then(function(recorder) { | 61 .then(function(recorder) { |
63 assertEquals('recording', recorder.state); | 62 assertEquals('recording', recorder.state); |
64 }) | 63 }) |
65 .catch(function(err) { | 64 .catch(function(err) { |
66 return failTest(err.toString()); | 65 return failTest(err.toString()); |
67 }) | 66 }) |
68 .then(function() { | 67 .then(function() { |
69 reportTestSuccess(); | 68 reportTestSuccess(); |
70 }); | 69 }); |
71 } | 70 } |
72 | 71 |
73 function testStartStopAndRecorderState() { | 72 function testStartStopAndRecorderState() { |
74 console.log('testStartStopAndRecorderState started.'); | 73 console.log('testStartStopAndRecorderState started.'); |
75 var theRecorder; | 74 var theRecorder; |
76 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) | 75 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
77 .then(function(stream) { | 76 .then(function(stream) { |
78 return createAndStartMediaRecorder(stream, | 77 return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
79 DEFAULT_RECORDER_MIME_TYPE); | |
80 }) | 78 }) |
81 .then(function(recorder) { | 79 .then(function(recorder) { |
82 theRecorder = recorder; | 80 theRecorder = recorder; |
83 theRecorder.stop(); | 81 theRecorder.stop(); |
84 }) | 82 }) |
85 .then(function() { | 83 .then(function() { |
86 assertEquals('inactive', theRecorder.state); | 84 assertEquals('inactive', theRecorder.state); |
87 }) | 85 }) |
88 .catch(function(err) { | 86 .catch(function(err) { |
89 return failTest(err.toString()); | 87 return failTest(err.toString()); |
90 }) | 88 }) |
91 .then(function() { | 89 .then(function() { |
92 reportTestSuccess(); | 90 reportTestSuccess(); |
93 }); | 91 }); |
94 } | 92 } |
95 | 93 |
96 function testStartAndDataAvailable() { | 94 function testStartAndDataAvailable() { |
97 console.log('testStartAndDataAvailable started.'); | 95 console.log('testStartAndDataAvailable started.'); |
98 var videoSize = 0; | 96 var videoSize = 0; |
99 var emptyBlobs = 0; | 97 var emptyBlobs = 0; |
100 var timeStamps = []; | 98 var timeStamps = []; |
101 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) | 99 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
102 .then(function(stream) { | 100 .then(function(stream) { |
103 return createAndStartMediaRecorder(stream, | 101 return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
104 DEFAULT_RECORDER_MIME_TYPE); | |
105 }) | 102 }) |
106 .then(function(recorder) { | 103 .then(function(recorder) { |
107 // Save history of Blobs received via dataavailable. | 104 // Save history of Blobs received via dataavailable. |
108 recorder.ondataavailable = function(event) { | 105 recorder.ondataavailable = function(event) { |
109 timeStamps.push(event.timeStamp); | 106 timeStamps.push(event.timeStamp); |
110 if (event.data.size > 0) | 107 if (event.data.size > 0) |
111 videoSize += event.data.size; | 108 videoSize += event.data.size; |
112 else | 109 else |
113 emptyBlobs += 1; | 110 emptyBlobs += 1; |
114 }; | 111 }; |
(...skipping 116 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
231 .then(function() { | 228 .then(function() { |
232 reportTestSuccess(); | 229 reportTestSuccess(); |
233 }); | 230 }); |
234 } | 231 } |
235 | 232 |
236 function testResumeAndRecorderState() { | 233 function testResumeAndRecorderState() { |
237 var theRecorder; | 234 var theRecorder; |
238 console.log('testResumeAndRecorderState started.'); | 235 console.log('testResumeAndRecorderState started.'); |
239 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) | 236 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
240 .then(function(stream) { | 237 .then(function(stream) { |
241 return createAndStartMediaRecorder(stream, | 238 return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
242 DEFAULT_RECORDER_MIME_TYPE); | |
243 }) | 239 }) |
244 .then(function(recorder) { | 240 .then(function(recorder) { |
245 theRecorder = recorder; | 241 theRecorder = recorder; |
246 theRecorder.pause(); | 242 theRecorder.pause(); |
247 }) | 243 }) |
248 .then(function() { | 244 .then(function() { |
249 theRecorder.resume(); | 245 theRecorder.resume(); |
250 }) | 246 }) |
251 .then(function() { | 247 .then(function() { |
252 assertEquals('recording', theRecorder.state); | 248 assertEquals('recording', theRecorder.state); |
253 }) | 249 }) |
254 .catch(function(err) { | 250 .catch(function(err) { |
255 return failTest(err.toString()); | 251 return failTest(err.toString()); |
256 }) | 252 }) |
257 .then(function() { | 253 .then(function() { |
258 reportTestSuccess(); | 254 reportTestSuccess(); |
259 }); | 255 }); |
260 } | 256 } |
261 | 257 |
262 function testResumeAndResumeEventTriggered() { | 258 function testResumeAndResumeEventTriggered() { |
263 var theRecorder; | 259 var theRecorder; |
264 var resumeEventReceived = false; | 260 var resumeEventReceived = false; |
265 console.log('testStartAndResumeEventTriggered started.'); | 261 console.log('testStartAndResumeEventTriggered started.'); |
266 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) | 262 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
267 .then(function(stream) { | 263 .then(function(stream) { |
268 return createAndStartMediaRecorder(stream, | 264 return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
269 DEFAULT_RECORDER_MIME_TYPE); | |
270 }) | 265 }) |
271 .then(function(recorder) { | 266 .then(function(recorder) { |
272 theRecorder = recorder; | 267 theRecorder = recorder; |
273 theRecorder.pause(); | 268 theRecorder.pause(); |
274 }) | 269 }) |
275 .then(function() { | 270 .then(function() { |
276 theRecorder.onresume = function(event) { | 271 theRecorder.onresume = function(event) { |
277 resumeEventReceived = true; | 272 resumeEventReceived = true; |
278 } | 273 } |
279 theRecorder.resume(); | 274 theRecorder.resume(); |
(...skipping 29 matching lines...) Expand all Loading... |
309 }); | 304 }); |
310 } | 305 } |
311 | 306 |
312 function testResumeAndDataAvailable() { | 307 function testResumeAndDataAvailable() { |
313 console.log('testResumeAndDataAvailable started.'); | 308 console.log('testResumeAndDataAvailable started.'); |
314 var theRecorder; | 309 var theRecorder; |
315 var videoSize = 0; | 310 var videoSize = 0; |
316 var emptyBlobs = 0; | 311 var emptyBlobs = 0; |
317 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) | 312 navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
318 .then(function(stream) { | 313 .then(function(stream) { |
319 return createAndStartMediaRecorder(stream, | 314 return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
320 DEFAULT_RECORDER_MIME_TYPE); | |
321 }) | 315 }) |
322 .then(function(recorder) { | 316 .then(function(recorder) { |
323 theRecorder = recorder; | 317 theRecorder = recorder; |
324 theRecorder.pause(); | 318 theRecorder.pause(); |
325 }) | 319 }) |
326 .then(function() { | 320 .then(function() { |
327 theRecorder.ondataavailable = function(event) { | 321 theRecorder.ondataavailable = function(event) { |
328 if (event.data.size > 0) { | 322 if (event.data.size > 0) { |
329 videoSize += event.data.size; | 323 videoSize += event.data.size; |
330 } else { | 324 } else { |
(...skipping 17 matching lines...) Expand all Loading... |
348 ' empty blobs, there should be no such empty blobs.'); | 342 ' empty blobs, there should be no such empty blobs.'); |
349 }) | 343 }) |
350 .catch(function(err) { | 344 .catch(function(err) { |
351 return failTest(err.toString()); | 345 return failTest(err.toString()); |
352 }) | 346 }) |
353 .then(function() { | 347 .then(function() { |
354 reportTestSuccess(); | 348 reportTestSuccess(); |
355 }); | 349 }); |
356 } | 350 } |
357 | 351 |
358 | |
359 </script> | 352 </script> |
360 </body> | 353 </body> |
361 </html> | 354 </html> |
OLD | NEW |