MediaRecorder: dataavailable event
The dataavailable
event is fired when the MediaRecorder delivers media
data to your application for its use. The data is provided in a Blob
object that contains the data. This occurs in four situations:
-
When the media stream ends, any media data not already delivered to your
ondataavailable
handler is passed in a singleBlob
. -
When
MediaRecorder.stop()
is called, all media data which has been captured since recording began or the last time adataavailable
event occurred is delivered in aBlob
; after this, capturing ends. -
When
MediaRecorder.requestData()
is called, all media data which has been captured since recording began or the last time adataavailable
event occurred is delivered; then a newBlob
is created and media capture continues into that blob. -
If a
timeslice
property was passed into theMediaRecorder.start()
method that started media capture, adataavailable
event is fired everytimeslice
milliseconds. That means that each blob will have a specific time duration (except the last blob, which might be shorter, since it would be whatever is left over since the last event). So if the method call looked like this —recorder.start(1000);
— thedataavailable
event would fire after each second of media capture, and our event handler would be called every second with a blob of media data that's one second long. You can usetimeslice
alongsideMediaRecorder.stop()
andMediaRecorder.requestData()
to produce multiple same-length blobs plus other shorter blobs as well.
Note: The Blob
containing the media data is available in the
dataavailable
event's data
property.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener('dataavailable', event => { });
ondataavailable = event => { };
Event type
A generic Event
.
Example
...
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
No specification found
No specification data found for api.MediaRecorder.dataavailable_event
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
No compatibility data found for api.MediaRecorder.dataavailable_event
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.
See also
- Using the MediaStream Recording 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.getUserMedia