MediaRecorder: dataavailable 事件

当 MediaRecorder 接口向您的应用程序提供媒体数据以供使用时，将触发 MediaRecorder 的 dataavailable 事件。 数据以包含该数据的 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 并不精确，实际间隔可能会由于其他待处理的任务而略有延迟。 因此，不要依赖 timeslice 和接收到的块数来计算经过的时间，因为误差可能会累积。 相反，请使用 Event.timeStamp 或类似方法来维护一个单独的计时器，记录自启动以来的总经过时间。

包含媒体数据的 Blob 可在 dataavailable 事件的 data 属性中找到。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

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

ondataavailable = (event) => {};

事件类型

一个 BlobEvent。 继承自 Event。

Event BlobEvent

示例

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

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅