MediaRecorder

MediaRecorder 接口是 MediaStream 录制 API 的一部分，它提供了轻松录制媒体的功能。它使用 MediaRecorder() 构造函数创建。

EventTarget MediaRecorder

构造函数

MediaRecorder()

创建一个新的 MediaRecorder 对象，给定要录制的 MediaStream。可以使用选项来执行一些操作，例如设置容器的 MIME 类型（例如 "video/webm" 或 "video/mp4"）以及音频和视频轨道的比特率或单个总比特率。

实例属性

MediaRecorder.mimeType 只读

返回创建 MediaRecorder 对象时作为录制容器选择的 MIME 类型。

MediaRecorder.state 只读

返回 MediaRecorder 对象的当前状态（inactive、recording 或 paused）。

MediaRecorder.stream 只读

返回创建 MediaRecorder 时传递给构造函数的流。

MediaRecorder.videoBitsPerSecond 只读

返回使用的视频编码比特率。这可能与构造函数中指定的比特率不同（如果提供了）。

MediaRecorder.audioBitsPerSecond 只读

返回使用的音频编码比特率。这可能与构造函数中指定的比特率不同（如果提供了）。

MediaRecorder.audioBitrateMode 只读

返回用于编码音频轨道的比特率模式。

静态方法

MediaRecorder.isTypeSupported()

一个静态方法，它返回一个 true 或 false 值，指示当前用户代理是否支持给定的 MIME 媒体类型。

实例方法

MediaRecorder.pause()

暂停媒体录制。

MediaRecorder.requestData()

请求一个包含迄今为止保存的数据的 Blob（或自上次调用 requestData() 以来保存的数据）。调用此方法后，录制继续，但使用新的 Blob。

MediaRecorder.resume()

在暂停后恢复媒体录制。

MediaRecorder.start()

开始录制媒体；此方法可以选择地传递一个 timeslice 参数，其值为毫秒。如果指定了此参数，则媒体将以该持续时间的单独块捕获，而不是以单个大块录制媒体的默认行为。

MediaRecorder.stop()

停止录制，此时将触发一个包含保存数据的最终 Blob 的 dataavailable 事件。不再进行录制。

事件

使用 addEventListener() 或将事件监听器分配给此接口的 oneventname 属性来监听这些事件。

dataavailable

每当录制了 timeslice 毫秒的媒体时（或如果未指定 timeslice，则在整个媒体录制完成后），此事件会定期触发。该事件（类型为 BlobEvent）在其 data 属性中包含已录制媒体。

error

当有导致录制停止的致命错误时触发。接收到的事件基于 MediaRecorderErrorEvent 接口，其 error 属性包含一个 DOMException，它描述了发生的实际错误。

pause

当媒体录制暂停时触发。

resume

当媒体录制在暂停后恢复时触发。

start

当媒体录制开始时触发。

stop

当媒体录制结束时触发，无论是 MediaStream 结束，还是在调用 MediaRecorder.stop() 方法后触发。

示例

js
if (navigator.mediaDevices) {
  console.log("getUserMedia supported.");

  const constraints = { audio: true };
  let chunks = [];

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      const mediaRecorder = new MediaRecorder(stream);

      record.onclick = () => {
        mediaRecorder.start();
        console.log(mediaRecorder.state);
        console.log("recorder started");
        record.style.background = "red";
        record.style.color = "black";
      };

      stop.onclick = () => {
        mediaRecorder.stop();
        console.log(mediaRecorder.state);
        console.log("recorder stopped");
        record.style.background = "";
        record.style.color = "";
      };

      mediaRecorder.onstop = (e) => {
        console.log("data available after MediaRecorder.stop() called.");

        const clipName = prompt("Enter a name for your sound clip");

        const clipContainer = document.createElement("article");
        const clipLabel = document.createElement("p");
        const audio = document.createElement("audio");
        const deleteButton = document.createElement("button");
        const mainContainer = document.querySelector("body");

        clipContainer.classList.add("clip");
        audio.setAttribute("controls", "");
        deleteButton.textContent = "Delete";
        clipLabel.textContent = clipName;

        clipContainer.appendChild(audio);
        clipContainer.appendChild(clipLabel);
        clipContainer.appendChild(deleteButton);
        mainContainer.appendChild(clipContainer);

        audio.controls = true;
        const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
        chunks = [];
        const audioURL = URL.createObjectURL(blob);
        audio.src = audioURL;
        console.log("recorder stopped");

        deleteButton.onclick = (e) => {
          const evtTgt = e.target;
          evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
        };
      };

      mediaRecorder.ondataavailable = (e) => {
        chunks.push(e.data);
      };
    })
    .catch((err) => {
      console.error(`The following error occurred: ${err}`);
    });
}

注意：此代码示例的灵感来自 Web Dictaphone 演示。为了简洁起见，省略了一些行；请参阅源代码 获取完整代码。

规范

规范
MediaStream 录制
# mediarecorder-api

浏览器兼容性

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

另请参阅