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
timeslice
Optional- The number of milliseconds to record into each
Blob
. If this parameter isn't included, the entire media duration is recorded into a singleBlob
unless therequestData()
method is called to obtain theBlob
and trigger the creation of a newBlob
into 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.
InvalidStateError
- The
MediaRecorder
is not in theinactive
state; you can't start recording media if it's already being recorded. See thestate
property. SecurityError
- The
MediaStream
is 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 aMediaStreamTrack
within the stream is marked asisolated
due to thepeerIdentity
constraint on the source stream. This exception may also be delivered as anerror
event 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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 47 | 25.0 (25.0) | No support | No support | No support |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | No support | 47 | 25.0 (25.0) | 1.3[1] | No support | No support | No support | 47 |
[1] The intial Firefox OS implementation only supported audio recording.
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.
Navigator.getUserMedia