MediaStream 录制 API

MediaStream 录制 API ,有时简称为 Media Recording API MediaRecorder API ,密切隶属于 Media Capture and Streams API WebRTC API 。MediaStream Recording API 使捕获生成数据成为可能通过 MediaStream or HTMLMediaElement 对象为分析、处理或保存到磁盘。它还出乎意料的易于使用。

基本概念

The MediaStream Recording API is comprised of a single major interface, MediaRecorder , which does all the work of taking the data from a MediaStream and delivering it to you for processing. The data is delivered by a series of dataavailable events, already in the format you specify when creating the MediaRecorder . You can then process the data further or write it to file as desired.

录制过程的概述

录制流的过程很简单:

  1. 设置 MediaStream or HTMLMediaElement (in the form of an <audio> or <video> element) to serve as the source of the media data.
  2. 创建 MediaRecorder object, specifying the source stream and any desired options (such as the container's MIME type or the desired bit rates of its tracks).
  3. Set MediaRecorder.ondataavailable to an event handler for the dataavailable event; this will be called whenever data is available for you.
  4. Once the source media is playing and you've reached the point where you're ready to record video, call MediaRecorder.start() to begin recording.
  5. Your dataavailable event handler gets called every time there's data ready for you to do with as you will; the event has a data attribute whose value is a Blob that contains the media data. You can force a dataavailable event to occur, thereby delivering the latest sound to you so you can filter it, save it, or whatever.
  6. Recording stops automatically when the source media stops playing.
  7. 可以随时停止录制通过调用 MediaRecorder.stop() .

注意: Individual Blob s containing slices of the recorded media will not necessarily be individually playable. The media needs to be reassembled before playback.

If anything goes wrong during recording, an error event is sent to the MediaRecorder . You can listen for error events by setting up a onerror event handler.

Example here, we use an HTML Canvas as source of the MediaStream , and stop recording after 9 seconds.

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);
					

Examining and controlling the recorder status

You can also use the properties of the MediaRecorder object to determine the state of the recording process, and its pause() and resume() methods to pause and resume recording of the source media.

If you need or want to check to see if a specific MIME type is supported, that's possible as well. Just call MediaRecorder.isTypeSupported() .

Examining potential input sources

If your goal is to record camera and/or microphone input, you may wish to examine the available input devices before beginning the process of constructing the MediaRecorder . To do so, you'll need to call navigator.mediaDevices.enumerateDevices() to get a list of the available media devices. You can then examine that list and identify the potential input sources, and even filter the list based on desired criteria.

In this code snippet, enumerateDevices() is used to examine the available input devices, locate those which are audio input devices, and create <option> elements that are then added to a <select> element representing an input source picker.

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);
    }
  });
});
					

Code similar to this can be used to let the user restrict the set of devices they wish to use.

For more information

To learn more about using the MediaStream Recording API, see Using the MediaStream Recording API , which shows how to use the API to record audio clips. A second article, Recording a media element , describes how to receive a stream from an <audio> or <video> element and use the captured stream (in this case, recording it and saving it to a local disk).

参考

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.

规范

规范 状态 Comment
MediaStream 录制 工作草案 初始定义

浏览器兼容性

MediaRecorder

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
MediaRecorder Chrome 47 Edge 79 Firefox 25
25
Prior to Firefox 58, using MediaStream.addTrack() on a stream obtained using getUserMedia() , then attempting to record the resulting stream would result in only recording the original stream without the added tracks (severe bug).
IE No Opera 36 Safari No WebView Android 47 Chrome Android 47 Firefox Android 25
25
Prior to Firefox 58, using MediaStream.addTrack() on a stream obtained using getUserMedia() , then attempting to record the resulting stream would result in only recording the original stream without the added tracks (severe bug).
Opera Android 36 Safari iOS No Samsung Internet Android 5.0
MediaRecorder() 构造函数 Chrome 47 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 47 Chrome Android 47 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
audioBitsPerSecond
Chrome 49 Edge 79 Firefox 71 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android ? Opera Android 36 Safari iOS No Samsung Internet Android 5.0
error event Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
ignoreMutedMedia
弃用 非标
Chrome 49 — 57 Edge No Firefox ? IE No Opera 36 — 44 Safari No WebView Android 49 — 57 Chrome Android 49 — 57 Firefox Android ? Opera Android 36 — 44 Safari iOS No Samsung Internet Android 5.0 — 7.0
isTypeSupported Chrome 47 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 47 Chrome Android 47 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
mimeType Chrome 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Edge 79 Firefox 25
25
Starting with Firefox 71, the behavior of mimeType is more consistent. For example, it now returns the media type even after recording has stopped.
IE No Opera 36 Safari No WebView Android 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Chrome Android 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
ondataavailable Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onerror Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onpause Chrome 49 Edge 79 Firefox 65 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 65 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onresume Chrome 49 Edge 79 Firefox 65 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 65 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onstart Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onstop Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onwarning
弃用
Chrome 49 Edge 79 Firefox 25 — 71 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
pause Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
requestData Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
resume Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
start Chrome 47 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 47 Chrome Android 47 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
state Chrome 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Chrome Android 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
stop Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
stream Chrome 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
videoBitsPerSecond
Chrome 49 Edge 79 Firefox 71 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android ? Opera Android 36 Safari iOS No Samsung Internet Android 5.0
warning event
弃用
Chrome 49 Edge 79 Firefox 25 — 71 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
弃用。不要用于新网站。
见实现注意事项。

另请参阅