MediaRecorder.ondataavailable

MediaRecorder.ondataavailable 事件处理程序 (part of the MediaStream 记录 API) 处理 dataavailable 事件，让你在响应运行代码Blob数据被提供使用。

dataavailable当 MediaRecorder 将媒体数据传递到你的应用程序以供使用时，将触发该事件。数据在包含数据的Blob对象中提供。这在四种情况下发生：

  • 媒体流结束时，所有尚未传递到ondataavailable处理程序的媒体数据都将在单个Blob中传递。
  • 当调用MediaRecorder.stop()时，自记录开始或dataavailable事件最后一次发生以来已捕获的所有媒体数据都将传递到Blob中；此后，捕获结束。
  • 调用MediaRecorder.requestData() dataavailable时，将传递自记录开始或事件最后一次发生以来捕获的所有媒体数据；然后Blob创建一个新文件，并将媒体捕获继续到该 blob 中。
  • 如果将timeslice属性传递到开始媒体捕获的MediaRecorder.start()方法中，dataavailable则每timeslice毫秒触发一次事件。这意味着每个 Blob 都有特定的持续时间（最后一个 Blob 除外，后者可能更短，因为它将是自上次事件以来剩下的所有东西）。因此，如果该方法调用看起来像这样 - recorder.start(1000);-的dataavailable事件将媒体捕捉的每一秒发生火灾后，我们的事件处理程序将被称为与媒体数据的 BLOB 每秒即坚持一个第二长。你可以timeslice与MediaRecorder.stop()和MediaRecorder.requestData()一起使用，以产生多个相同长度的 Blob，以及其他较短的 Blob。

备注：包含媒体数据的 Blob 在 dataavailable 事件的 data 属性中可用。

语法

在类似 addEventListener() 这样的方法中使用事件名称，或设置事件处理器属性。

js
addEventListener("dataavailable", (event) => {});

ondataavailable = (event) => {};

示例

js
const chunks = [];

mediaRecorder.onstop = (e) => {
  console.log("数据将在调用 MediaRecorder.stop() 后可用。");

  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("录制停止");
};

mediaRecorder.ondataavailable = (e) => {
  chunks.push(e.data);
};

规范

Specification
MediaStream Recording
# dom-mediarecorder-ondataavailable

浏览器兼容性

BCD tables only load in the browser

参见