Baseline Widely available
The dataavailable event of the MediaRecorder interface 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:
ondataavailable handler is passed in a single Blob.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.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.timeslice property was passed into the MediaRecorder.start() method that started media capture, a dataavailable event is fired every timeslice 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); â 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.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 the dataavailable event), or other browser bugs. Such scenarios can also lead to significantly larger chunks.
Therefore, don't rely on timeslice and the number of chunks received to calculate the time elapsed, because errors may accumulate. Instead, keep a separate timer using Event.timeStamp or similar, that records the total time elapsed since starting.
The Blob containing the media data is available in the dataavailable event's data property.
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("dataavailable", (event) => { })
ondataavailable = (event) => { }
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);
};
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3