一起来挑战香槟和甜甜圈吧!迄今为止获得最多星标的 Chrome 功能已经实现。
想象一下,有一款在滑雪运营的录音机,能够将视频与地理位置数据同步;一款超级简单的语音备忘录应用;一个可以让您录制视频并将其上传到 YouTube 的微件,所有这些都无需插件。
借助 MediaRecorder API,您可在 Web 应用中录制音频和视频。现在,Firefox 以及 Android 版和桌面版 Chrome 均支持该 API。
请点击此处试用。
此 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 方面的反馈。
- 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 的语音备忘录应用中查看实际操作。
浏览器支持
- 默认使用 Chrome 49 及更高版本
- 启用了实验性网络平台功能的 Chrome 桌面版 47 和 48(通过 chrome://flags 启用)
- Firefox 25 版
- Edge:“未考虑”
规格
w3c.github.io/mediacapture-record/MediaRecorder.html