MediaRecorder: dataavailable 事件
MediaRecorder 接口的 dataavailable 事件会在 MediaRecorder 将媒体数据传递给您的应用程序供其使用时触发。数据以一个包含数据的 Blob 对象的形式提供。这发生在四种情况下：
- 当媒体流结束时，任何尚未传递给您的
ondataavailable处理程序的媒体数据都会以单个Blob的形式传递。 - 当调用
MediaRecorder.stop()时，自录制开始或上一次dataavailable事件发生以来捕获的所有媒体数据都将以Blob的形式传递；之后，捕获将结束。 - 当调用
MediaRecorder.requestData()时，自录制开始或上一次dataavailable事件发生以来捕获的所有媒体数据都将被传递；然后创建一个新的Blob，媒体捕获将继续写入该 Blob。 - 如果传递给启动媒体捕获的
MediaRecorder.start()方法一个timeslice属性，则每timeslice毫秒会触发一个dataavailable事件。这意味着通常情况下，每个 Blob 都会有一个特定的时间长度（最后一个 Blob 可能较短，因为它会包含自上一个事件以来剩余的所有数据）。所以，如果方法调用如下 —recorder.start(1000);— 那么在每录制一秒后，dataavailable事件都会触发，并且我们的事件处理程序将每秒被调用一次，传入一个时长为一秒的媒体数据 Blob。您可以将timeslice与MediaRecorder.stop()和MediaRecorder.requestData()一起使用，以生成多个相同长度的 Blob 以及其他较短的 Blob。
注意： 与 Web API 中的其他时间值一样，timeslice 并不精确，实际间隔可能会因其他待处理任务、浏览器功能（Safari 中暂停相机和麦克风）、浏览器特定行为（Chrome 在 Android 上录制时锁定屏幕会暂停 dataavailable 事件）或其他浏览器错误而延迟。这些情况也可能导致数据块显著增大。
因此，不要依赖 timeslice 和接收到的块数来计算经过的时间，因为错误可能会累积。相反，请使用 Event.timeStamp 或类似方法维护一个单独的计时器，记录自开始以来的总经过时间。
包含媒体数据的 Blob 可在 dataavailable 事件的 data 属性中找到。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("dataavailable", (event) => { })
ondataavailable = (event) => { }
事件类型
示例
js
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);
};
规范
| 规范 |
|---|
| MediaStream Recording # dom-mediarecorder-ondataavailable |
浏览器兼容性
加载中…
另见
- 使用 MediaStream Recording API
- Web Dictaphone：MediaRecorder + getUserMedia + Web Audio API 可视化演示，由 Chris Mills 制作（GitHub 源代码）。
- simpl.info MediaStream 录制演示，由 Sam Dutton 制作。
Navigator.getUserMedia()- Dealing with huge MediaRecorder chunks on addpipe.com (2024)