The MediaRecorder
interface's dataavailable
event is fired when the MediaRecorder delivers media data to your application for its use.
Bubbles | No |
---|---|
Cancelable | No |
Interface | BlobEvent |
Event handler property | ondataavailable |
For details of the all the possible reasons this event may raise, see the documentation for the event handler property: ondataavailable
.
Examples
Using addEventListener
to listen for dataavailable
events:
...
var chunks = [];
mediaRecorder.addEventListener('stop', (event) => {
console.log("data available after MediaRecorder.stop() called.");
var audio = document.createElement('audio');
audio.controls = true;
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
console.log("recorder stopped");
});
mediaRecorder.addEventListener('dataavailable', (event) => {
chunks.push(event.data);
});
...
The same, but using the ondataavailable event handler property:
...
var chunks = [];
mediaRecorder.onstop = function(e) {
console.log("data available after MediaRecorder.stop() called.");
var audio = document.createElement('audio');
audio.controls = true;
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
console.log("recorder stopped");
}
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
}
...
Specifications
Specification | Status |
---|---|
MediaStream Recording | Working Draft |
Browser compatibility
TODO