MediaRecorder.ondataavailable
The MediaRecorder.ondataavailable
event handler (part of the MediaRecorder API) handles the dataavailable
event, allowing you to run code in response to Blob
data being made available for use.
The dataavailable
event is fired when a Blob
is made available for use in your application. This occurs in four different circumstances:
- When the media stream ends, the whole stream is made available in one single
Blob
. - When
MediaRecorder.stop()
is called, all of the media captured up to that point is made available in one singleBlob
, after which no more capturing occurs. - When
MediaRecorder.requestData
is called, all of the media captured up to that point is made available in one singleBlob
, after which a new Blob is created and media capture continues separately in that blob. - If a
timeslice
property was passed into theMediaRecorder.start()
method that started the media capture, things behave a little differently.timeslice
contains a millisecond value that specifies how many milliseconds of media eachBlob
should contain. So if the method call looked like this —recorder.start(1000);
— thedataavailable
event would fire after each second of media capture, and you'd end up with multiple second-long blobs of media to grab in multiple captures. You can use timeslice alongsideMediaRecorder.stop()
andMediaRecorder.requestData()
to produce multiple same-length blobs plus other shorter blobs as well.
Note: The Blob
is available in the dataavailable's data
property.
Syntax
<span id="idl-def-IDBRequest" class="idlInterface"><span id="idl-def-MediaRecorder" class="idlInterface">MediaRecorder.ondataavailable = function(event) { ... } MediaRecorder.addEventListener('dataavailable', function(event) { ... })</span></span>
Example
... 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); } ...
Properties
- data
- Contains the captured media blob.
Specifications
Specification | Status | Comment |
---|---|---|
MediaStream Recording The definition of 'MediaRecorder.ondataavailable' in that specification. |
Working Draft | Initial definition |
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 intial 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
- 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.
Navigator.getUserMedia
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/mediarecorder/ondataavailable