使用 MediaRecorder 录制音频和视频

一起来挑战香槟和甜甜圈吧!迄今为止获得最多星标的 Chrome 功能已经实现。

想象一下,有一款在滑雪运营的录音机,能够将视频与地理位置数据同步;一款超级简单的语音备忘录应用;一个可以让您录制视频并将其上传到 YouTube 的微件,所有这些都无需插件。

借助 MediaRecorder API,您可在 Web 应用中录制音频和视频。现在,Firefox 以及 Android 版和桌面版 Chrome 均支持该 API。

请点击此处试用。

Android Nexus 5X 上 mediaRecorder 演示的屏幕截图

此 API 非常简单,我将使用 WebRTC 示例代码库演示中的代码进行演示。请注意,该 API 只能通过安全源(HTTPS 或 localhost)使用。

首先,使用 MediaStream 实例化 MediaRecorder。(可选)使用 options 参数指定所需的输出格式:

var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);

MediaStream 可以来自:

  • getUserMedia() 调用。
  • WebRTC 调用的接收端。
  • 屏幕录制内容。
  • 网络音频(在实施此问题后)。

对于 options,可以指定 MIME 类型,日后还可以指定音频和视频比特率

MIME 类型具有或多或少特定的值,该值结合了容器和编解码器。例如:

  • 音频/webm
  • 视频/webm
  • 视频/webm;codecs=vp8
  • 视频/webm;codecs=vp9

使用静态方法 MediaRecorder.isTypeSupported() 检查是否支持 MIME 类型,例如,在实例化 MediaRecorder 时检查:

var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
    options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
    options = {mimeType: 'video/webm; codecs=vp8'};
} else {
    // ...
}

点击此处可查看 Chrome 中 MediaRecorder 支持的 MIME 类型的完整列表。

接下来,添加一个数据处理程序并调用 start() 方法以开始录制:

var recordedChunks = [];

var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
    if (event.data.size > 0) {
    recordedChunks.push(event.data);
    } else {
    // ...
    }
}

只要有数据可用,此示例就会向 recordedChunks 数组添加 Blob。可以选择为 start() 方法提供一个 timeSlice 实参,用于为每个 Blob 指定要捕获的媒体长度。

完成录制后,请告知 MediaRecorder:

mediaRecorder.stop();

通过从记录的 Blob 数组创建“super-Blob”来播放视频元素中记录的 Blob:

function play() {
    var superBuffer = new Blob(recordedChunks);
    videoElement.src =
    window.URL.createObjectURL(superBuffer);
}

或者,你可以通过 XHR 上传到服务器,或者使用 YouTube 之类的 API(请参阅下面的实验性演示)。

下载可通过一些链接黑客行为来实现:

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

有关 API 和演示的反馈

对 Web 应用而言,无需插件即可录制音频和视频的功能相对较新,因此非常感谢您提供 API 方面的反馈。

此外,我们还希望了解哪些使用场景对您最为重要,以及您希望我们优先考虑哪些功能。您可以评论本文或访问 crbug.com/262211 跟踪进度。

样本歌曲

应用

  • Paul Lewis 的 Voice Memos 应用现在支持 MediaRecorder,并针对不支持 MediaRecorder 音频的浏览器进行了 polyfill。

Polyfill

  • Muaz Khan 的 MediaStreamRecorder 是一个用于录制音频和视频的 JavaScript 库,与 MediaRecorder 兼容。
  • Recorderjs 支持从 Web Audio API 节点录音。您可以在 Paul Lewis 的语音备忘录应用中查看实际操作。

浏览器支持

  • 默认使用 Chrome 49 及更高版本
  • 启用了实验性网络平台功能的 Chrome 桌面版 47 和 48(通过 chrome://flags 启用)
  • Firefox 25 版
  • Edge:“未考虑”

规格

w3c.github.io/mediacapture-record/MediaRecorder.html

API 信息

developer.mozilla.org/en/docs/Web/API/MediaRecorder_API