The Media.start()
method (part of the MediaRecorder API) is used to start capturing media into a {{domxref("Blob")}}.
When the start()
method is invoked, the UA queues a task that runs the following steps:
- If the {{domxref("MediaRecorder.state")}} is not "inactive", raise a DOM
InvalidState
error and terminate these steps. if the {{domxref("MediaRecorder.state")}} is "inactive", continue on to the next step. - Set the {{domxref("MediaRecorder.state")}} to "recording" and wait until media becomes available from the
stream
passed into {{domxref("Navigator.getUserMedia")}}. - Once data becomes available, raise a {{domxref("MediaRecorder.start")}} event and start gathering the data into a {{domxref("Blob")}} (see FILE-API).
- If the
timeSlice
argument has been provided, once that many milliseconds of data have been collected — or a minimum time slice imposed by the UA, whichever is greater — raise a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob of collected data, and start gathering a new Blob of data. IftimeSlice
has not been provided, continue gathering data into the original Blob. - When the
stream
is ended, set {{domxref("MediaRecorder.state")}} to "inactive" and stop gathering data. - Raise a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob of data.
- Raise a {{domxref("MediaRecorder.stop")}} event.
Note: If the browser is unable to start recording or continue recording, it will raise a {{domxref("DOMError")}} event, followed by a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob it has gathered, followed by the {{domxref("MediaRecorder.stop")}} event.
Syntax
void start (optional long timeslice);
Parameters
timeslice
{{optional_inline}}- This parameter takes a value of milliseconds, and represents the length of media capture to return in each Blob. If it is not specified, all media captured will be returned in a single Blob, unless one or more calls are made to {{domxref("MediaRecorder.requestData")}}.
Errors
An InvalidState
error is raised if the start()
method is called while the MediaRecorder
object’s {{domxref("MediaRecorder.state")}} is not "inactive" — it makes no sense to start media capture if it is already happening.
Example
... record.onclick = function() { mediaRecorder.start(); console.log("recorder started"); } ...
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName("MediaStream Recording", "#widl-MediaRecorder-start-void-long-timeslice", "MediaRecorder.start()")}} | {{Spec2("MediaStream Recording")}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoDesktop("25.0")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoDesktop("25.0")}} | 1.3[1] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[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.
- {{domxref("Navigator.getUserMedia")}}