MediaStream Recording API

基线广泛可用 *

自 2021年4月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

* 此特性的某些部分的支持程度可能有所不同。

MediaStream Recording API 有时简称为 Media Recording API 或者 MediaRecorder API，与媒体捕捉与媒体流 API 和 WebRTC API 密切相关。MediaStream Recording API 使得捕获通过 MediaStream 或者HTMLMediaElement 对象产生的用于分析、加工或者保存到硬盘的数据成为可能。它也非常容易让人们使用。

本文内容

基本概念

MediaStream Recording API 由一个主接口MediaRecorder组成，这个接口负责的所有工作是从MediaStream获取数据并将其传递给你进行处理。数据通过一系列 dataavailable 事件传递，这些数据已经成为你创建 MediaRecorder 时所声明的格式。然后，你可以进一步处理数据，或者根据需要将其写入文件。

录制过程概述

记录一个流的过程是非常容易的：

建立一个 MediaStream或者HTMLMediaElement (以 <audio> 或 <video> 元素的形式) 来充当媒体数据的源。
创建一个 MediaRecorder 对象，指定源以及任何有需求的选项 (比如容器的 MIME 类型或它轨道所需的比特率).
给 dataavailable 事件设置MediaRecorder.ondataavailable 事件处理函数; 会在数据可利用时候调用。
一旦媒体源播放，你已经准备好录制，使用 MediaRecorder.start() 开始录制。
dataavailable 事件处理函数正如你所愿的在每次数据准备好时调用; 这个事件有一个值为包含媒体数据的Blob 类型的 data 属性。你可以强制 dataavailable 事件发生，因此会给你传递最新的声音以至于可以让你过滤、保存或者做一些其他的事情。
当源媒体停止播放时候，录制自动结束。
你可以随时结束录制通过使用 MediaRecorder.stop().

备注：单单使用包含已经录制好媒体切片的Blobs 将大可不能单独播放。媒体在重放之前需要重新组装。

如果在录制过程中出错，error 事件将会传给MediaRecorder. 你可以设置onerror去监听 error 事件。

例子中，我们使用 Canvas 作为MediaStream的源，在 9 秒后停止录音。

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

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

console.log(stream);
var options = { mimeType: "video/webm; codecs=vp9" };
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() {
  var blob = new Blob(recordedChunks, {
    type: "video/webm",
  });
  var url = URL.createObjectURL(blob);
  var 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);

检查 and 控制记录器的状态

你也可以使用 MediaRecorder 对象的属性去决定录制过程的状态，用 pause() 和 resume() 方法暂停或者继续媒体源的录制。

如果你需要检查一个特殊的 MIME 类型是否被支持，使用MediaRecorder.isTypeSupported().

检查潜在的输入源

如果你的目标是记录摄像头或麦克风输入，你可能希望在构建 MediaRecorder 之前检查可用的输入设备。这时，你需要调用 navigator.mediaDevices.enumerateDevices() 来得到可使用的媒体设备。你可以检查此列表，发现潜在的设备，甚至在有需要的时候过滤掉设备。

在这块代码中，enumerateDevices() 被用来检查可利用的设备，找到那些音频输入设备，创建<option> 元素，之后添加到<select>元素，代表输入源选择器 .

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

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

参考

BlobEvent

Each time a chunk of media data is finished being recorded, it's delivered to consumers in Blob form using a BlobEvent of type dataavailable.

MediaRecorder

The primary interface that implements the MediaStream Recording API.

MediaRecorderErrorEvent

The interface that represents errors thrown by the MediaStream Recording API. Its error property is a DOMException that specifies that error occurred.

Using the MediaStream Recording API
Recording a media element
simpl.info MediaStream Recording demo, by Sam Dutton
navigator.mediaDevices.getUserMedia()
HTML5’s Media Recorder API in Action on Chrome and Firefox
MediaRecorder polyfill for Safari and Edge
TutorRoom: HTML5 video capture/playback/download using getUserMedia and the MediaRecorder API (source on GitHub)
FingerSpell: Sign Language Fingerspelling practice using getUserMedia and the MediaRecorder API to create and download recordings, MediaRecorder API supported desktop browsers only (source on GitHub)
Simple video recording demo
Advanced media stream recorder sample
OpenLang: HTML5 video language lab web application using MediaDevices and the MediaStream Recording API for video recording (source on GitHub)

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2024年12月13日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题