MediaRecorder: dataavailable event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨April 2021⁩.

Thedataavailable event of theMediaRecorder interface is fired when the MediaRecorder delivers mediadata to your application for its use. The data is provided in aBlobobject that contains the data. This occurs in four situations:

When the media stream ends, any media data not already delivered to yourondataavailable handler is passed in a singleBlob.
WhenMediaRecorder.stop() is called, all media data which has beencaptured since recording began or the last time adataavailable eventoccurred is delivered in aBlob; after this, capturing ends.
WhenMediaRecorder.requestData() is called, all media data which hasbeen captured since recording began or the last time adataavailableevent occurred is delivered; then a newBlob is created and media capturecontinues into that blob.
If atimeslice property was passed into theMediaRecorder.start() method that started media capture, adataavailable event is fired everytimeslice milliseconds.That means that normally, 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); — thedataavailable event would fire after each second of media capture, andour event handler would be called every second with a blob of media data that's onesecond long. You can usetimeslice alongsideMediaRecorder.stop() andMediaRecorder.requestData() toproduce multiple same-length blobs plus other shorter blobs as well.

Note:Like other time values in web APIs,timeslice is not exact and the real intervals may be delayed due to other pending tasks, browser features (pausing the camera and microphone in Safari), browser-specific behaviors (locking the screen while recording on Chrome on Android pauses thedataavailable event), or other browser bugs. Such scenarios can also lead to significantly larger chunks.

Therefore, don't rely ontimeslice and the number of chunks received to calculate the time elapsed, because errors may accumulate. Instead, keep a separate timer usingEvent.timeStamp or similar, that records the total time elapsed since starting.

TheBlob containing the media data is available in thedataavailable event'sdata property.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("dataavailable", (event) => { })ondataavailable = (event) => { }

Event type

ABlobEvent. Inherits fromEvent.

Example

const chunks = [];mediaRecorder.onstop = (e) => {  console.log("data available after MediaRecorder.stop() called.");  const audio = document.createElement("audio");  audio.controls = true;  const blob = new Blob(chunks, { type: mediaRecorder.mimeType });  const audioURL = window.URL.createObjectURL(blob);  audio.src = audioURL;  console.log("recorder stopped");};mediaRecorder.ondataavailable = (e) => {  chunks.push(e.data);};