mozilla
Your Search Results

    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

     attribute EventHandler       ondataavailable;

    Example

    if (navigator.getUserMedia) {
       console.log('getUserMedia supported.');
       navigator.getUserMedia (
          // constraints - only audio needed for this app
          {
             audio: true
          },
    
          // Success callback
          function(stream) {
               var mediaRecorder = new MediaRecorder(stream);
    
               ...
    
               stop.onclick = function() {
                   mediaRecorder.stop();
                   console.log("recorder stopped, data available");
               }
    
               mediaRecorder.ondataavailable = function(e) {
                 console.log("data available");
    
                 var audio = document.createElement('audio');
                 audio.setAttribute('controls', '');
                 var audioURL = window.URL.createObjectURL(e.data);
                 audio.src = audioURL;
               }
          },
    
    ...

    Properties

    data
    Contains the captured media blob.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support

    Not supported

    25.0 (25.0) [1] Not supported Not supported Not supported
    Feature Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
    Basic support Not supported 25.0 (25.0) [1] 1.3 Not supported Not supported Not supported

    [1] The current Gecko implementation currently only supports audio recording.

    Specifications

    Specification Status Comment
    MediaStream Recording Editor's Draft  

    See also

    Document Tags and Contributors

    Contributors to this page: kscarfone, teoli, chrisdavidmills
    Last updated by: teoli,