爆开香槟和甜甜圈！迄今为止加星标次数最多的 Chrome 功能现已实现。
假设有一款滑雪板记录器（可将视频与地理位置数据同步）或一款超级简单的语音备忘录应用，或一款可让您录制视频并将其上传到 YouTube 的微件，所有这些都无需插件。
借助 MediaRecorder API，您可以通过 Web 应用录制音频和视频。现在，您可以在 Firefox 以及 Android 版和桌面版 Chrome 中使用此功能。
请点击此处试用。
<ph type="x-smartling-placeholder">
此 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
- video/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 {
// ...
}
}
此示例会在数据可用时将 Blob 添加到 recordedChunks 数组。可以选择为 start() 方法提供一个 timeSlice 参数，用于指定要为每个 Blob 捕获的媒体长度。
完成录制后，告知 MediaRecorder：
mediaRecorder.stop();
通过创建“super-Blob”在视频元素中播放录制的 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 的反馈。
- MediaRecorder 实现 bug：crbug.com/262211
- Chrome：crbug.com/new
- Firefox：bugzil.la
- 演示：github.com/webrtc/samples
我们还想知道对您来说最重要的使用场景以及您希望我们优先使用哪些功能。您可以评论本文或访问 crbug.com/262211 跟踪进度。
演示
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr（适用于移动设备的相同代码，更简单的网址！）
- 使用实验性的自定义
<google-youtube-upload>元素录制视频并将其上传到 YouTube
应用
- Paul Lewis 的 Voice Memos 应用现在支持 MediaRecorder，并针对不支持 MediaRecorder 音频的浏览器使用 polyfill。
Polyfill
- Muaz Khan 的 MediaStreamRecorder 是一个用于录制音频和视频的 JavaScript 库，与 MediaRecorder 兼容。
- Recorderjs 支持从 Web Audio API 节点进行录音。您可以在 Paul Lewis 的 Voice Memos 应用中查看实际操作。
浏览器支持
- 默认使用 Chrome 49 及更高版本
- 通过 chrome://flags 启用实验性网络平台功能的 Chrome 桌面版 47 和 48
- Firefox（版本 25）
- Edge：“处于考虑阶段”
规范
w3c.github.io/mediacapture-record/MediaRecorder.html