{{APIRef("MediaStream Recording")}}
MediaRecorder.ondataavailable 事件处理程序(part of the MediaStream记录API)处理{{event("dataavailable")}}事件，让您在响应运行代码{{domxref("Blob")}}数据被提供使用。
dataavailable当MediaRecorder将媒体数据传递到您的应用程序以供使用时，将触发该事件。数据在包含数据的{{domxref("Blob")}}对象中提供。这在四种情况下发生：
ondataavailable处理程序的媒体数据都将在单个{{domxref("Blob")}}中传递。dataavailable事件最后一次发生以来已捕获的所有媒体数据都将传递到{{domxref("Blob")}}}中；此后，捕获结束。dataavailable时，将传递自记录开始或事件最后一次发生以来捕获的所有媒体数据；然后Blob创建一个新文件，并将媒体捕获继续到该blob中。timeslice属性传递到开始媒体捕获的{{domxref("MediaRecorder.start()")}}方法中，dataavailable则每timeslice毫秒触发一次事件。这意味着每个Blob都有特定的持续时间（最后一个Blob除外，后者可能更短，因为它将是自上次事件以来剩下的所有东西）。因此，如果该方法调用看起来像这样- recorder.start(1000);-的dataavailable事件将媒体捕捉的每一秒发生火灾后，我们的事件处理程序将被称为与媒体数据的BLOB每秒即坚持一个第二长。您可以timeslice与{{domxref("MediaRecorder.stop()")}}}和{{domxref("MediaRecorder.requestData()")}}}一起使用，以产生多个相同长度的Blob，以及其他较短的Blob。包含媒体数据的{{domxref("Blob")}}在{{event("dataavailable")}}事件的data属性中可用。
MediaRecorder.ondataavailable = function(event) { ... }
MediaRecorder.addEventListener('dataavailable', function(event) { ... })
...
var chunks = [];
mediaRecorder.onstop = function(e) {
console.log("data available after MediaRecorder.stop() called.");
var audio = document.createElement('audio');
audio.controls = true;
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
console.log("录像停止");
}
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
}
...
| 规范 | 状态 | 评论 |
|---|---|---|
| {{SpecName("MediaStream Recording", "#dom-mediarecorder-ondataavailable", "MediaRecorder.ondataavailable")}} | {{Spec2("MediaStream Recording")}} | 初始定义 |
{{Compat("api.MediaRecorder.ondataavailable")}}