| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>MediaStream Recoder Browser Test (w/ MediaSource)</title> |
| </head> |
| <body> |
| <div> Record Real-Time video content browser test.</div> |
| <video id="video" autoplay></video> |
| </body> |
| <script type="text/javascript" src="mediarecorder_test_utils.js"></script> |
| <script type="text/javascript" src="webrtc_test_utilities.js"></script> |
| <script> |
| |
| 'use strict'; |
| |
| const DEFAULT_CONSTRAINTS= {audio:true, video:true}; |
| const DEFAULT_RECORDER_MIME_TYPE = ''; |
| const DEFAULT_TIME_SLICE = 100; |
| |
| // Function assert_throws inspired from Blink's |
| // LayoutTests/resources/testharness.js |
| |
| function assertThrows(func, description) { |
| try { |
| func.call(this); |
| failTest('Error:' + func + description + " did not throw!"); |
| } catch (e) { |
| console.log(e); |
| reportTestSuccess(); |
| } |
| } |
| |
| function createAndStartMediaRecorder(stream, mimeType, slice) { |
| return new Promise(function(resolve, reject) { |
| document.getElementById("video").src = URL.createObjectURL(stream); |
| var recorder = new MediaRecorder(stream, {"mimeType" : mimeType}); |
| console.log('Recorder object created.'); |
| if (slice != undefined) { |
| recorder.start(slice); |
| console.log('Recorder started with time slice', slice); |
| } else { |
| recorder.start(); |
| } |
| resolve(recorder); |
| }); |
| } |
| |
| function createMediaRecorder(stream, mimeType) { |
| return new Promise(function(resolve, reject) { |
| document.getElementById("video").src = URL.createObjectURL(stream); |
| var recorder = new MediaRecorder(stream, {"mimeType" : mimeType}); |
| console.log('Recorder object created.'); |
| resolve(recorder); |
| }); |
| } |
| |
| // Tests that the MediaRecorder's start() function will cause the |state| to be |
| // 'recording' and that a 'start' event is fired. |
| function testStartAndRecorderState() { |
| var theRecorder; |
| var startEventReceived = false; |
| navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
| .then(function(stream) { |
| return createMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
| }) |
| .then(function(recorder) { |
| theRecorder = recorder; |
| theRecorder.onstart = function(event) { |
| startEventReceived = true; |
| assertEquals('recording', theRecorder.state); |
| }; |
| }) |
| .then(function() { |
| theRecorder.start(); |
| }) |
| .then(function() { |
| return waitFor('Make sure the start event was received', |
| function() { |
| return startEventReceived == true; |
| }); |
| }) |
| .catch(function(err) { |
| return failTest(err.toString()); |
| }) |
| .then(function() { |
| reportTestSuccess(); |
| }); |
| } |
| |
| // Tests that the MediaRecorder's stop() function will effectively cause the |
| // |state| to be 'inactive' and that a 'stop' event is fired. |
| function testStartStopAndRecorderState() { |
| var theRecorder; |
| var stopEventReceived = false; |
| navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
| .then(function(stream) { |
| return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
| }) |
| .then(function(recorder) { |
| recorder.onstop = function(event) { |
| stopEventReceived = true; |
| assertEquals('inactive', theRecorder.state); |
| }; |
| recorder.stop(); |
| }) |
| .then(function() { |
| return waitFor('Make sure the stop event was received', |
| function() { |
| return stopEventReceived == true; |
| }); |
| }) |
| .catch(function(err) { |
| return failTest(err.toString()); |
| }) |
| .then(function() { |
| reportTestSuccess(); |
| }); |
| } |
| |
| // Tests that when MediaRecorder's start() functioo is called, some data is |
| // made available by media recorder via dataavailable events, containing non |
| // empty blob data. |
| function testStartAndDataAvailable() { |
| var videoSize = 0; |
| var emptyBlobs = 0; |
| var timeStamps = []; |
| navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
| .then(function(stream) { |
| return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
| }) |
| .then(function(recorder) { |
| // Save history of Blobs received via dataavailable. |
| recorder.ondataavailable = function(event) { |
| timeStamps.push(event.timeStamp); |
| if (event.data.size > 0) |
| videoSize += event.data.size; |
| else |
| emptyBlobs += 1; |
| }; |
| }) |
| .then(function() { |
| return waitFor('Make sure the recording has data', |
| function() { |
| return videoSize > 0; |
| }); |
| }) |
| .then(function() { |
| assertTrue(emptyBlobs == 0, 'Recording has ' + emptyBlobs + |
| ' empty blobs, there should be no such empty blobs.'); |
| }) |
| .catch(function(err) { |
| return failTest(err.toString()); |
| }) |
| .then(function() { |
| reportTestSuccess(); |
| }); |
| } |
| |
| // Tests that when MediaRecorder's start(timeSlice) is called, some data |
| // available events are fired containing non empty blob data. |
| function testStartWithTimeSlice() { |
| var videoSize = 0; |
| var emptyBlobs = 0; |
| var timeStamps = []; |
| navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
| .then(function(stream) { |
| return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE, |
| DEFAULT_TIME_SLICE); |
| }) |
| .then(function(recorder) { |
| recorder.ondataavailable = function(event) { |
| timeStamps.push(event.timeStamp); |
| if (event.data.size > 0) |
| videoSize += event.data.size; |
| else |
| emptyBlobs += 1; |
| }; |
| }) |
| .then(function() { |
| return waitFor('Making sure the recording has data', |
| function() { |
| return videoSize > 0 && timeStamps.length > 10; |
| }); |
| }) |
| .then(function() { |
| assertTrue(emptyBlobs == 0, 'Recording has ' + emptyBlobs + |
| ' empty blobs, there should be no such empty blobs.'); |
| }) |
| .catch(function(err) { |
| return failTest(err.toString()); |
| }) |
| .then(function() { |
| reportTestSuccess(); |
| }); |
| } |
| |
| |
| // Tests that when a MediaRecorder's resume() is called, the |state| is |
| // 'recording' and a 'resume' event is fired. |
| function testResumeAndRecorderState() { |
| var theRecorder; |
| var resumeEventReceived = false; |
| navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
| .then(function(stream) { |
| return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
| }) |
| .then(function(recorder) { |
| theRecorder = recorder; |
| theRecorder.pause(); |
| }) |
| .then(function() { |
| theRecorder.onresume = function(event) { |
| resumeEventReceived = true; |
| assertEquals('recording', theRecorder.state); |
| } |
| theRecorder.resume(); |
| }) |
| .then(function() { |
| return waitFor('Making sure the resume event has been received', |
| function() { |
| return resumeEventReceived == true; |
| }); |
| }) |
| .catch(function(err) { |
| return failTest(err.toString()); |
| }) |
| .then(function() { |
| reportTestSuccess(); |
| }); |
| } |
| |
| // Tests that is it not possible to resume an inactive MediaRecorder. |
| function testNoResumeWhileRecorderInactive() { |
| navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
| .then(function(stream) { |
| return createMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
| }) |
| .then(function(recorder) { |
| recorder.resume(); |
| }) |
| .then(function() { |
| return failTest('Recorder resumed recording from inactive state.'); |
| }) |
| .catch(function(err) { |
| reportTestSuccess(); |
| }); |
| } |
| |
| // Tests that MediaRecorder sends data blobs when resume() is called. |
| function testResumeAndDataAvailable() { |
| var theRecorder; |
| var videoSize = 0; |
| var emptyBlobs = 0; |
| navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
| .then(function(stream) { |
| return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
| }) |
| .then(function(recorder) { |
| theRecorder = recorder; |
| theRecorder.pause(); |
| }) |
| .then(function() { |
| theRecorder.ondataavailable = function(event) { |
| if (event.data.size > 0) { |
| videoSize += event.data.size; |
| } else { |
| console.log('This dataavailable event is empty', event); |
| emptyBlobs += 1; |
| } |
| }; |
| }) |
| .then(function() { |
| theRecorder.resume(); |
| }) |
| .then(function() { |
| return waitFor('Make sure the recording has data after resuming', |
| function() { |
| return videoSize > 0; |
| }); |
| }) |
| .then(function() { |
| // There should be no empty blob while recording. |
| assertTrue(emptyBlobs == 0, 'Recording has ' + emptyBlobs + |
| ' empty blobs, there should be no such empty blobs.'); |
| }) |
| .catch(function(err) { |
| return failTest(err.toString()); |
| }) |
| .then(function() { |
| reportTestSuccess(); |
| }); |
| } |
| |
| // Tests that when paused the recorder will transition |state| to |paused| and |
| // then trigger a |pause| event. |
| function testPauseAndRecorderState() { |
| var theRecorder; |
| var pauseEventReceived = false; |
| navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
| .then(function(stream) { |
| return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
| }) |
| .then(function(recorder) { |
| theRecorder = recorder; |
| theRecorder.onpause = function(event) { |
| pauseEventReceived = true; |
| assertEquals('paused', theRecorder.state); |
| } |
| theRecorder.pause(); |
| }) |
| .then(function() { |
| return waitFor('Making sure the pause event has been received', |
| function() { |
| return pauseEventReceived == true; |
| }); |
| }) |
| .catch(function(err) { |
| return failTest(err.toString()); |
| }) |
| .then(function() { |
| reportTestSuccess(); |
| }); |
| } |
| |
| // Tests that is is possible to stop a paused MediaRecorder and that the |state| |
| // becomes 'inactive'. |
| function testPauseStopAndRecorderState() { |
| var theRecorder; |
| navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
| .then(function(stream) { |
| return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
| }) |
| .then(function(recorder) { |
| theRecorder = recorder; |
| theRecorder.pause(); |
| }) |
| .then(function() { |
| theRecorder.stop(); |
| }) |
| .then(function() { |
| assertEquals('inactive', theRecorder.state); |
| }) |
| .catch(function(err) { |
| return failTest(err.toString()); |
| }) |
| .then(function() { |
| reportTestSuccess(); |
| }); |
| } |
| |
| // Tests that no dataavailable event is fired after MediaRecorder's pause() |
| // function is called. |
| function testPausePreventsDataavailableFromBeingFired() { |
| var theRecorder; |
| var videoSize = 0; |
| var emptyBlobs = 0; |
| navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
| .then(function(stream) { |
| return createAndStartMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
| }) |
| .then(function(recorder) { |
| theRecorder = recorder; |
| theRecorder.pause(); |
| }) |
| .then(function() { |
| theRecorder.ondataavailable = function(event) { |
| failTest("Received unexpected data after pause!"); |
| }; |
| }) |
| .then(function() { |
| return waitDuration(2000); |
| }) |
| .catch(function(err) { |
| return failTest(err.toString()); |
| }) |
| .then(function() { |
| reportTestSuccess(); |
| }); |
| } |
| |
| // Tests that MediaRecorder's pause() throws an exception if 'state' is not |
| // 'recording'. |
| function testIllegalPauseThrowsDOMError() { |
| navigator.mediaDevices.getUserMedia(DEFAULT_CONSTRAINTS) |
| .then(function(stream) { |
| return createMediaRecorder(stream, DEFAULT_RECORDER_MIME_TYPE); |
| }) |
| .then(function(recorder) { |
| assertThrows(function() {recorder.pause()}, 'Calling pause() in' + |
| ' inactive state should cause a DOM error'); |
| }); |
| } |
| |
| </script> |
| </body> |
| </html> |
