The MediaRecorder
interface of the MediaRecorder API provides functionality to easily capture media. It is created by the invocation of the MediaRecorder()
constructor.
Constructor
MediaRecorder.MediaRecorder()
Creates a new MediaRecorder
object.
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
, or paused
.)
MediaRecorder.stream
Read only
Returns the stream that was passed into the constructor when the MediaRecorder
was created.
Methods
MediaRecorder.canRecordMimeType()
A DOMString
that indicates whether the value of MediaRecorder.mimeType
is one the user agent can record.
MediaRecorder.pause()
Pauses the recording of media.
MediaRecorder.requestData()
Requests a 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 new Blob
.
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 final Blob
of saved data is fired. No more recording occurs.
Event Handlers
MediaRecorder.ondataavailable
Called to handle the dataavailable
event, which can be used to grab the recorded media (which is made available as a Blob
object in the event's data
attribute.)
MediaRecorder.onerror
Is an EventHandler
called to handle the recordingerror
event, including reporting errors that arise with media recording. These are fatal errors that stop recording.
MediaRecorder.onpause
Is an EventHandler
called to handle the pause
event, which occurs when media recording is paused.
MediaRecorder.onresume
Is an EventHandler
called to handle the resume
event, which occurs when media recording resumes after being paused.
MediaRecorder.onstart
Is an EventHandler
called to handle the start
event, which occurs when media recording starts.
MediaRecorder.onstop
Is an EventHandler
called to handle the stop
event, which occurs when media recording ends, either when the MediaStream
ends — or after the MediaRecorder.stop()
method is called.
MediaRecorder.onwarning
Is an EventHandler
called to handle the warning
event, which occurs when non-fatal errors occur that do not stop the recording.
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
Browser compatibility
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)
Basic support
47 [2]
25.0 (25.0)
Not supported
Not supported
Not supported
Feature
Android
Android Webview
Firefox Mobile (Gecko)
Firefox OS
IE Phone
Opera Mobile
Safari Mobile
Chrome for Android
Basic support
Not supported
Not supported
25.0 (25.0)
1.3[1]
Not supported
Not supported
Not supported
Not supported
[1] The initial Firefox OS implementation only supported audio recording.
[2] To try this feature on Chrome, enable Experimental Web Platform features from chrome://flags . Currently only video is supported, not audio.
See also
Document Tags and Contributors
Last updated by:
jpmedley ,
Dec 9, 2015, 1:11:30 PM