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 single Blob, 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 single Blob, after which a new Blob is created and media capture continues separately in that blob.
  • If a timeslice property was passed into the MediaRecorder.start() method that started the media capture, things behave a little differently. timeslice contains a millisecond value that specifies how many milliseconds of media each Blob should contain. So if the method call looked like this — recorder.start(1000); — the dataavailable 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 alongside MediaRecorder.stop() and MediaRecorder.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

MediaRecorder.ondataavailable = function(event) { ... }
MediaRecorder.addEventListener('dataavailable', function(event) { ... })

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

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