The MediaRecorder
interface of the MediaStream Recording API provides functionality to easily record media. It is created using the MediaRecorder()
constructor.
Constructor
MediaRecorder()
- Creates a new
MediaRecorder
object, given aMediaStream
to record. Options are available to do things like set the container's MIME type (such as"video/webm"
or"video/mp4"
) and the bit rates of the audio and video tracks or a single overall bit rate.
Properties
MediaRecorder.mimeType
Read only- Returns the MIME type that was selected as the recording container for the
MediaRecorder
object when it was created. MediaRecorder.state
Read only- Returns the current state of the
MediaRecorder
object (inactive
,recording
, orpaused
.) MediaRecorder.stream
Read only- Returns the stream that was passed into the constructor when the
MediaRecorder
was created. MediaRecorder.ignoreMutedMedia
- Indicates whether the
MediaRecorder
instance will record input when the inputMediaStreamTrack
is muted. If this attribute isfalse
,MediaRecorder
will record silence for audio and black frames for video. The default isfalse
. MediaRecorder.videoBitsPerSecond
Read only- Returns the video encoding bit rate in use. This may differ from the bit rate specified in the constructor (if it was provided).
MediaRecorder.audioBitsPerSecond
Read only- Returns the audio encoding bit rate in use. This may differ from the bit rate specified in the constructor (if it was provided).
Methods
MediaRecorder.pause()
- Pauses the recording of media.
MediaRecorder.requestData()
- Requests a
Blob
containing the saved data received thus far (or since the last timerequestData()
was called. After calling this method, recording continues, but in a newBlob
. MediaRecorder.resume()
- Resumes recording of media after having been paused.
MediaRecorder.start()
- Begins recording media; this method can optionally be passed a
timeslice
argument with a value in milliseconds. If this is specified, the media will be captured in separate chunks of that duration, rather than the default behavior of recording the media in a single large chunk. MediaRecorder.stop()
- Stops recording, at which point a
dataavailable
event containing the finalBlob
of saved data is fired. No more recording occurs.
Static methods
MediaRecorder.isTypeSupported()
- A static method which returns a
Boolean
value indicating if the given MIME media type is supported by the current user agent.
Event handlers
MediaRecorder.ondataavailable
- Called to handle the
dataavailable
event, which is periodically triggered each timetimeslice
milliseconds of media have been recorded (or when the entire media has been recorded, iftimeslice
wasn't specified). The event, of typeBlobEvent
, contains the recorded media in itsdata
property. You can then collect and act upon that recorded media data using this event handler. MediaRecorder.onerror
- An
EventHandler
called to handle theerror
event, including reporting errors that arise with media recording. These are fatal errors that stop recording. The received event is based on theMediaRecorderErrorEvent
interface, whoseerror
property contains aDOMException
that describes the actual error that occurred. MediaRecorder.onpause
- An
EventHandler
called to handle thepause
event, which occurs when media recording is paused. MediaRecorder.onresume
- An
EventHandler
called to handle theresume
event, which occurs when media recording resumes after being paused. MediaRecorder.onstart
- An
EventHandler
called to handle thestart
event, which occurs when media recording starts. MediaRecorder.onstop
- An
EventHandler
called to handle thestop
event, which occurs when media recording ends, either when theMediaStream
ends — or after theMediaRecorder.stop()
method is called.
Events
Listen to these events using addEventListener()
or by assigning an event listener to the oneventname
property of this interface.
error
- Fired when an error occurs: for example because recording wasn't allowed or was attempted using an unsupported codec.
Also available via theonerror
property.
Example
if (navigator.mediaDevices) { console.log('getUserMedia supported.'); var constraints = { audio: true }; var chunks = []; navigator.mediaDevices.getUserMedia(constraints) .then(function(stream) { var mediaRecorder = new MediaRecorder(stream); visualize(stream); record.onclick = function() { mediaRecorder.start(); console.log(mediaRecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } stop.onclick = function() { mediaRecorder.stop(); console.log(mediaRecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.color = ""; } mediaRecorder.onstop = function(e) { console.log("data available after MediaRecorder.stop() called."); var clipName = prompt('Enter a name for your sound clip'); var clipContainer = document.createElement('article'); var clipLabel = document.createElement('p'); var audio = document.createElement('audio'); var deleteButton = document.createElement('button'); clipContainer.classList.add('clip'); audio.setAttribute('controls', ''); deleteButton.innerHTML = "Delete"; clipLabel.innerHTML = clipName; clipContainer.appendChild(audio); clipContainer.appendChild(clipLabel); clipContainer.appendChild(deleteButton); soundClips.appendChild(clipContainer); audio.controls = true; var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; var audioURL = URL.createObjectURL(blob); audio.src = audioURL; console.log("recorder stopped"); deleteButton.onclick = function(e) { evtTgt = e.target; evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode); } } mediaRecorder.ondataavailable = function(e) { chunks.push(e.data); } }) .catch(function(err) { console.log('The following error occurred: ' + err); }) }
This code sample is inspired by the Web Dictaphone demo. Some lines have been omitted for brevity; refer to the source for the complete code.
Specifications
Specification | Status | Comment |
---|---|---|
MediaStream Recording | Working Draft | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
MediaRecorder | 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 |
MediaRecorder() constructor | 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 |
audioBitsPerSecond | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 71 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android ? | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
error event | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
ignoreMutedMedia | Chrome No support 49 — 57 | Edge No support No | Firefox ? | IE No support No | Opera No support 36 — 44 | Safari No support No | WebView Android No support 49 — 57 | Chrome Android No support 49 — 57 | Firefox Android ? | Opera Android No support 36 — 44 | Safari iOS No support No | Samsung Internet Android No support 5.0 — 7.0 |
isTypeSupported | 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 |
mimeType | Chrome
Full support
49
| Edge Full support 79 | Firefox
Full support
25
| IE No support No | Opera Full support 36 | Safari No support No | WebView Android
Full support
49
| Chrome Android
Full support
49
| Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
ondataavailable | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
onerror | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
onpause | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 65 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 65 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
onresume | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 65 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 65 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
onstart | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
onstop | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
onwarning | Chrome Full support 49 | Edge Full support 79 | Firefox No support 25 — 71 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
pause | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
requestData | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
resume | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
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 |
state | Chrome
Full support
49
| Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android
Full support
49
| Chrome Android
Full support
49
| Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
stop | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
stream | Chrome
Full support
49
| Edge Full support 79 | Firefox Full support 25 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android
Full support
49
| Firefox Android Full support 25 | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
videoBitsPerSecond | Chrome Full support 49 | Edge Full support 79 | Firefox Full support 71 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android ? | Opera Android Full support 36 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
warning event | Chrome Full support 49 | Edge Full support 79 | Firefox No support 25 — 71 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android Full support 49 | Chrome Android Full support 49 | 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
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
See also
- Using the MediaRecorder API
- Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on Github.)
- Recording a media element
- simpl.info MediaStream Recording demo, by Sam Dutton.
navigator.mediaDevices.getUserMedia
- OpenLang: HTML5 video language lab web application using MediaDevices and the MediaStream Recording API for video recording (source on GitHub)