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.

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

Browser compatibility

[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