MediaRecorder.ondataavailable

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 single Blob.
  • When MediaRecorder.stop() is called, all media data which has been captured since recording began or the last time a dataavailable event occurred is delivered in a Blob; after this, capturing ends.
  • When MediaRecorder.requestData() is called, all media data which has been captured since recording began or the last time a dataavailable event occurred is delivered; then a new Blob is created and media capture continues into that blob.
  • If a timeslice property was passed into the MediaRecorder.start() method that started media capture, a dataavailable event is fired every timeslice 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); — the dataavailable 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 use timeslice alongside MediaRecorder.stop() and MediaRecorder.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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support471 ?25 ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ?25 ? ? ?

1. From version 47: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.

See also

Document Tags and Contributors

Contributors to this page: lucian95, Jib, Sheppy, jpmedley, Sebastianz, chrisdavidmills, teoli, kscarfone
Last updated by: lucian95,