The MediaRecorder method start(), which is part of the MediaStream Recording API, begins recording media into one or more Blob objects. You can record the entire duration of the media into a single Blob (or until you call requestData()), or you can specify the number of milliseconds to record at a time. Then, each time that amount of media has been recorded, an event will be delivered to let you act upon the recorded media, while a new Blob is created to record the next slice of the media
Assuming the MediaRecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream. A Blob is created and the data is collected in it until the time slice period elapses or the source media ends. Each time a Blob is filled up to that point (the timeslice duration or the end-of-media, if no slice duration was provided), a dataavailable event is sent to the MediaRecorder with the recorded data. If the source is still playing, a new Blob is created and recording continues into that, and so forth.
When the source stream ends, state is set to inactive and data gathering stops. A final dataavailable event is sent to the MediaRecorder, followed by a stop event.
Note: If the browser is unable to start recording or continue recording, it will raise a DOMError event, followed by a MediaRecorder.dataavailable event containing the Blob it has gathered, followed by the MediaRecorder.stop event.
Syntax
mediaRecorder.start(timeslice)
Parameters
timesliceOptional- The number of milliseconds to record into each
Blob. If this parameter isn't included, the entire media duration is recorded into a singleBlobunless therequestData()method is called to obtain theBloband trigger the creation of a newBlobinto which the media continues to be recorded.
Return value
undefined.
Exceptions
Errors that can be detected immediately are thrown as DOM exceptions. All other errors are reported through error events sent to the MediaRecorder object. You can implement the onerror event handler to respond to these errors.
InvalidModificationError- The number of tracks on the stream being recorded has changed. You can't add or remove tracks while recording media.
InvalidStateError- The
MediaRecorderis not in theinactivestate; you can't start recording media if it's already being recorded. See thestateproperty. NotSupportedError- The media stream you're attempting to record is inactive, or one or more of the stream's tracks is in a format that can't be recorded using the current configuration.
SecurityError- The
MediaStreamis configured to disallow recording. This may be the case, for example, with sources obtained usinggetUserMedia()when the user denies permission to use an input device. This also happens when aMediaStreamTrackwithin the stream is marked asisolateddue to thepeerIdentityconstraint on the source stream. This exception may also be delivered as anerrorevent if the security options for the source media change after recording begins. UnknownError- Something else went wrong during the recording process.
Example
...
record.onclick = function() {
mediaRecorder.start();
console.log("recorder started");
}
...
Specifications
| Specification | Status | Comment |
|---|---|---|
| MediaStream Recording The definition of 'MediaRecorder.start()' in that specification. |
Working Draft | Initial definition |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
start | Chrome Full support 47 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 47 | Chrome Android Full support 47 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
- Using the MediaRecorder API
- Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on Github.)
- simpl.info MediaStream Recording demo, by Sam Dutton.
getUserMedia()
