MediaStream Recording API 由一个主接口{{domxref("MediaRecorder")}}组成，这个接口负责的所有工作是从{{domxref("MediaStream")}}获取数据并将其传递给你进行处理。数据通过一系列{{event("dataavailable")}}事件传递，这些数据已经成为你创建 MediaRecorder 时所声明的格式。然后，您可以进一步处理数据，或者根据需要将其写入文件。
记录一个流的过程是非常容易的:
data 属性. 你可以强制 dataavailable 事件发生, 因此会给你传递最新的声音以至于可以让你过滤、保存或者做一些其他的事情。注意: 单单使用包含已经录制好媒体切片的{{domxref("Blob")}}s 将大可不能单独播放. 媒体在重放之前需要重新组装 .
如果在录制过程中出错, {{event("error")}} 事件将会传给MediaRecorder. 你可以设置{{domxref("MediaRecorder.onerror", "onerror")}}去监听 error 事件.
例子中，我们使用Canvas 作为{{domxref("MediaStream")}}的源，在9秒后停止录音.
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);
你也可以使用 MediaRecorder 对象的属性去决定录制过程的状态, 用 {{domxref("MediaRecorder.pause", "pause()")}} 和 {{domxref("MediaRecorder.resume", "resume()")}} 方法暂停或者继续媒体源的录制.
如果你需要检查一个特殊的MIME类型是否被支持，使用{{domxref("MediaRecorder.isTypeSupported()")}}.
如果你的目标是记录摄像头或麦克风输入,您可能希望在构建 MediaRecorder 之前检查可用的输入设备. 这时，你需要调用 {{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}} 来得到可使用的媒体设备. 你可以检查此列表，发现潜在的设备，甚至在有需要的时候过滤掉设备.
在这块代码中, enumerateDevices() 被用来检查可利用的设备,找到那些音频输入设备, 创建{{HTMLElement("option")}} 元素，之后添加到{{HTMLElement("select")}}元素，代表输入源选择器 .
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);
}
});
});
类似的代码可以用来让用户限制他们希望使用的设备。
更多关于MediaStream Recording API 的使用, 查看 Using the MediaStream Recording API, 这个显示了如何使用API来记录音频剪辑. 另一篇文章, Recording a media element, 介绍了如何从 {{HTMLElement("audio")}} 或{{HTMLElement("video")}} 元素 接收信息流和如何使用接收到的信息流（这个案例中，接收、存到硬盘）。
dataavailable.| Specification | Status | Comment |
|---|---|---|
| {{SpecName("MediaStream Recording", "#MediaRecorderAPI")}} | {{Spec2("MediaStream Recording")}} | Initial definition |