{{APIRef("Media Recorder API")}}
The MediaRecorder
interface of the MediaRecorder API provides functionality to easily record media. It is created by the invocation of the MediaRecorder()
constructor.
Constructor
- {{domxref("MediaRecorder.MediaRecorder()")}}
- Creates a new
MediaRecorder
object.
Properties
- {{domxref("MediaRecorder.mimeType")}} {{readonlyInline}}
- Returns the MIME type that was selected as the recording container for the
MediaRecorder
object when it was created. - {{domxref("MediaRecorder.state")}} {{readonlyInline}}
- Returns the current state of the
MediaRecorder
object (inactive
,recording
, orpaused
.) - {{domxref("MediaRecorder.stream")}} {{readonlyInline}}
- Returns the stream that was passed into the constructor when the
MediaRecorder
was created. - {{domxref("MediaRecorder.ignoreMutedMedia")}}
- What to do with a muted input {{domxref("MediaStreamTrack")}}, e.g. insert black frames/zero audio volume in the recording or ignore altogether.
- {{domxref("MediaRecorder.videoBitsPerSecond")}} {{readonlyInline}}
- Actual video encoding bit rate in use (see the constructor {{domxref("MediaRecorder.MediaRecorder()")}} options).
- {{domxref("MediaRecorder.audioBitsPerSecond;")}} {{readonlyInline}}
- Actual audio encoding bit rate in use (see the constructor {{domxref("MediaRecorder.MediaRecorder()")}} options).
Methods
- {{domxref("MediaRecorder.isTypeSupported(DOMString type)")}}
- Returns a {{domxref("Boolean")}} value indicating if the given MIME type is supported by the current user agent .
- {{domxref("MediaRecorder.pause()")}}
- Pauses the recording of media.
- {{domxref("MediaRecorder.requestData()")}}
- Requests a {{domxref("Blob")}} containing the saved data received thus far (or since the last time
requestData()
was called. After calling this method, recording continues, but in a newBlob
. - {{domxref("MediaRecorder.resume()")}}
- Resumes recording of media after having been paused.
- {{domxref("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. - {{domxref("MediaRecorder.stop()")}}
- Stops recording, at which point a {{event("dataavailable")}} event containing the final
Blob
of saved data is fired. No more recording occurs.
Event Handlers
- {{domxref("MediaRecorder.ondataavailable")}}
- Called to handle the {{event("dataavailable")}} event, which can be used to grab the recorded media (which is made available as a {{domxref("Blob")}} object in the event's
data
attribute.) - {{domxref("MediaRecorder.onerror")}}
- Is an {{domxref("EventHandler")}} called to handle the {{event("recordingerror")}} event, including reporting errors that arise with media recording. These are fatal errors that stop recording.
- {{domxref("MediaRecorder.onpause")}}
- Is an {{domxref("EventHandler")}} called to handle the {{event("pause")}} event, which occurs when media recording is paused.
- {{domxref("MediaRecorder.onresume")}}
- Is an {{domxref("EventHandler")}} called to handle the {{event("resume")}} event, which occurs when media recording resumes after being paused.
- {{domxref("MediaRecorder.onstart")}}
- Is an {{domxref("EventHandler")}} called to handle the {{event("start")}} event, which occurs when media recording starts.
- {{domxref("MediaRecorder.onstop")}}
- Is an {{domxref("EventHandler")}} called to handle the {{event("stop")}} event, which occurs when media recording ends, either when the {{domxref("MediaStream")}} ends — or after the {{domxref("MediaRecorder.stop()")}} method is called.
Example
navigator.getUserMedia = (navigator.getUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.webkitGetUserMedia); if (navigator.getUserMedia) { console.log('getUserMedia supported.'); var constraints = { audio: true }; var chunks = []; var onSuccess = 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.requestData(); } 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 = window.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); } } var onError = function(err) { console.log('The following error occured: ' + err); } navigator.getUserMedia(constraints, onSuccess, onError); } else { console.log('getUserMedia not supported on your browser!'); }
Note: This code sample comes from the Web Dictaphone demo. Some lines have been omitted for brevity; refer to the source for the complete code.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}} | {{Spec2("MediaStream Recording")}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatChrome(47.0)}} | {{CompatGeckoDesktop("25.0")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatChrome(47.0)}} | {{CompatGeckoDesktop("25.0")}} | 1.3[1] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatChrome(47.0)}} |
- [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.
- {{domxref("Navigator.getUserMedia")}}