打开香槟和甜甜圈吧！我们已实现了有史以来获得最多加星标的 Chrome 功能。
想象一下，您可以使用一个滑雪记录器将视频与地理位置数据同步，或者使用一个超简单的语音备忘录应用，或者使用一个 widget 录制视频并将其上传到 YouTube，而无需使用插件。
借助 MediaRecorder API，您可以从 Web 应用录制音频和视频。该 API 现已在 Firefox 以及 Android 版和桌面版 Chrome 中推出。
点击此处即可试用。
该 API 非常简单，我将使用 WebRTC 示例代码库演示版中的代码进行演示。请注意，此 API 只能从安全的来源（HTTPS 或 localhost）使用。
首先，使用 MediaStream 实例化 MediaRecorder。您可以选择使用 options 参数指定所需的输出格式：
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
MediaStream 可以来自以下来源：
getUserMedia()调用。- WebRTC 通话的接收端。
- 屏幕录制内容。
- Web Audio（在此问题实现后）。
对于 options，您可以指定 MIME 类型，日后还可以指定音频和视频的比特率。
MIME 类型具有或多或少具体的值，结合了容器和编解码器。例如：
- 音频/webm
- video/webm
- video/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 {
// ...
}
}
此示例会在有数据可用时向 recordedChunks 数组添加 Blob。您可以选择为 start() 方法提供 timeSlice 参数，用于指定要为每个 Blob 捕获的媒体时长。
录制完毕后，告知 MediaRecorder：
mediaRecorder.stop();
通过从已录制的 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 的语音备忘录应用现在支持 MediaRecorder，并针对不支持 MediaRecorder 音频的浏览器进行了多填充。
Polyfill
- Muaz Khan 的 MediaStreamRecorder 是一个用于录制音频和视频的 JavaScript 库，与 MediaRecorder 兼容。
- Recorderjs 支持从 Web Audio API 节点进行录制。您可以在 Paul Lewis 的语音备忘录应用中查看此操作的实际运行情况。
浏览器支持
- 默认情况下，Chrome 49 及更高版本
- 桌面版 Chrome 47 和 48，其中通过 chrome://flags 启用了实验性 Web 平台功能
- Firefox 25 及更高版本
- Edge：'正在考虑中'
规范
w3c.github.io/mediacapture-record/MediaRecorder.html