媒体流录制 API

媒体流录制 API，有时称为媒体录制 API或MediaRecorder API，与媒体捕获和流 API和WebRTC API密切相关。媒体流录制 API 可以捕获由MediaStream或HTMLMediaElement对象生成的用于分析、处理或保存到磁盘的数据。它也出奇地易于使用。

概念和用法

媒体流录制 API 包含一个主要的接口，MediaRecorder，它负责从MediaStream获取数据并将其交付给您进行处理。数据通过一系列dataavailable事件传递，这些事件已为您创建MediaRecorder时指定的格式。然后，您可以根据需要进一步处理数据或将其写入文件。

录制过程概述

录制流的过程很简单

  1. 设置一个MediaStream或HTMLMediaElement（以<audio>或<video>元素的形式）作为媒体数据的源。
  2. 创建一个MediaRecorder对象，指定源流和任何所需的选项（例如容器的 MIME 类型或其轨道的所需比特率）。
  3. 将ondataavailable设置为dataavailable事件的事件处理程序；每当有数据可用时，都会调用此处理程序。
  4. 一旦源媒体开始播放并且您已准备好录制视频，请调用MediaRecorder.start()开始录制。
  5. 您的dataavailable事件处理程序在每次有数据准备就绪时都会被调用，您可以随意处理这些数据；该事件具有一个data属性，其值为包含媒体数据的Blob。您可以强制发生dataavailable事件，从而将最新的声音传递给您，以便您对其进行过滤、保存或执行其他操作。
  6. 源媒体停止播放时，录制会自动停止。
  7. 您可以随时通过调用MediaRecorder.stop()停止录制。

注意：包含录制媒体片段的各个Blob不一定都是可单独播放的。在播放之前需要重新组装媒体。

如果在录制过程中出现任何错误，则会向MediaRecorder发送error事件。您可以通过设置onerror事件处理程序来侦听error事件。

在此示例中，我们使用 HTML Canvas 作为MediaStream的源，并在 9 秒后停止录制。

js
const canvas = document.querySelector("canvas");

// Optional frames per second argument.
const stream = canvas.captureStream(25);
const recordedChunks = [];

console.log(stream);
const options = { mimeType: "video/webm; codecs=vp9" };
const mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
  console.log("data-available");
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
    console.log(recordedChunks);
    download();
  } else {
    // …
  }
}
function download() {
  const blob = new Blob(recordedChunks, {
    type: "video/webm",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "test.webm";
  a.click();
  window.URL.revokeObjectURL(url);
}

// demo: to download after 9sec
setTimeout((event) => {
  console.log("stopping");
  mediaRecorder.stop();
}, 9000);

检查和控制录制状态

您还可以使用MediaRecorder对象的属性来确定录制过程的状态，以及使用其pause()和resume()方法来暂停和恢复源媒体的录制。

如果您需要或希望检查是否支持特定的 MIME 类型，这也是可能的。只需调用MediaRecorder.isTypeSupported()即可。

检查潜在的输入源

如果您的目标是录制摄像头和/或麦克风输入，您可能希望在开始构建MediaRecorder的过程之前检查可用的输入设备。为此，您需要调用navigator.mediaDevices.enumerateDevices()以获取可用媒体设备的列表。然后，您可以检查该列表并识别潜在的输入源，甚至可以根据所需的条件过滤列表。

在此代码片段中，enumerateDevices()用于检查可用的输入设备，找到那些是音频输入设备的设备，并创建<option>元素，然后将其添加到表示输入源选择器的<select>元素中。

js
navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices.forEach((device) => {
    const menu = document.getElementById("inputdevices");
    if (device.kind === "audioinput") {
      const item = document.createElement("option");
      item.textContent = device.label;
      item.value = device.deviceId;
      menu.appendChild(item);
    }
  });
});

类似的代码可用于让用户限制他们希望使用的设备集。

更多信息

要了解有关使用媒体流录制 API 的更多信息，请参阅使用媒体流录制 API，其中显示了如何使用该 API 录制音频剪辑。第二篇文章录制媒体元素描述了如何从<audio>或<video>元素接收流，以及如何使用捕获的流（在本例中，录制并保存到本地磁盘）。

接口

BlobEvent

每次完成录制媒体数据块时，都会使用类型为dataavailable的BlobEvent以Blob的形式将其传递给使用者。

MediaRecorder

实现媒体流录制 API 的主要接口。

MediaRecorderErrorEvent

表示媒体流录制 API 引发的错误的接口。其error属性是一个DOMException，它指定了发生的错误。

规范

规范
媒体流录制

浏览器兼容性

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

另请参阅