The MediaRecorder()
constructor creates a new MediaRecorder
object that will record a specified MediaStream
.
Syntax
var mediaRecorder = new MediaRecorder(stream[, options]);
Parameters
stream
- The
MediaStream
that will be recorded. This source media can come from a stream created usingnavigator.mediaDevices.getUserMedia()
or from an<audio>
,<video>
or<canvas>
element. -
options
Optional -
A dictionary object that can contain the following properties:
mimeType
: The mime type you want to use as the recording container for the newMediaRecorder
. Applications can check in advance if thismimeType
is supported by the user agent by callingMediaRecorder.isTypeSupported()
.audioBitsPerSecond
: The chosen bitrate for the audio component of the media.videoBitsPerSecond
: The chosen bitrate for the video component of the media.bitsPerSecond
: The chosen bitrate for the audio and video components of the media. This can be specified instead of the above two properties. If this is specified along with one or the other of the above properties, this will be used for the one that isn't specified.
If bits per second values are not specified for video and/or audio, the default adopted for video is 2.5Mbps, while the audio default is adaptive, depending upon the sample rate and the number of channels.
Example
This example shows how to create a media recorder for a specified stream, whose audio bit rate is set to 128Kbit/sec and whose video bit rate is set to 2.5 Mbit/sec. The recorded media data will be stored in an MP4 wrapper (so if you gather the chunks of media data and save them to disk, they will be in an MP4 file).
...
if (navigator.mediaDevices.getUserMedia) {
var constraints = { audio: true, video: true };
var chunks = [];
var onSuccess = function(stream) {
var options = {
audioBitsPerSecond : 128000,
videoBitsPerSecond : 2500000,
mimeType : 'video/mp4'
}
var mediaRecorder = new MediaRecorder(stream,options);
m = mediaRecorder;
...
Specifications
Specification | Status | Comment |
---|---|---|
MediaStream Recording | 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 |
options object | No support | 43.0 (43.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 initial 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.mediaDevices.getUserMedia()