The MediaRecorder.ondataavailable
event handler (part of the MediaStream Recording API) handles the dataavailable
event, letting you run code in response to Blob
data being made available for use.
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.
The Blob
containing the media data is available in the dataavailable
event's data
property.
Syntax
MediaRecorder.ondataavailable = function(event) { ... }
MediaRecorder.addEventListener('dataavailable', function(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
Specification | Status | Comment |
---|---|---|
MediaStream Recording The definition of 'MediaRecorder.ondataavailable' in that specification. |
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |
Legend
- Full support
- Full support
- No support
- No support
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