MediaRecorder.ondataavailable
MediaRecorder.ondataavailable
事件处理程序 (part of the MediaStream 记录 API) 处理 dataavailable
事件,让您在响应运行代码Blob
数据被提供使用。
dataavailable
当 MediaRecorder 将媒体数据传递到您的应用程序以供使用时,将触发该事件。数据在包含数据的Blob
对象中提供。这在四种情况下发生:
- 媒体流结束时,所有尚未传递到
ondataavailable
处理程序的媒体数据都将在单个Blob
中传递。 - 当调用
MediaRecorder.stop()
(en-US)时,自记录开始或dataavailable
事件最后一次发生以来已捕获的所有媒体数据都将传递到Blob
}中;此后,捕获结束。 - 调用
MediaRecorder.requestData()
(en-US)dataavailable
时,将传递自记录开始或事件最后一次发生以来捕获的所有媒体数据;然后Blob
创建一个新文件,并将媒体捕获继续到该 blob 中。 - 如果将
timeslice
属性传递到开始媒体捕获的MediaRecorder.start()
(en-US)方法中,dataavailable
则每timeslice
毫秒触发一次事件。这意味着每个 Blob 都有特定的持续时间(最后一个 Blob 除外,后者可能更短,因为它将是自上次事件以来剩下的所有东西)。因此,如果该方法调用看起来像这样 -recorder.start(1000);
-的dataavailable
事件将媒体捕捉的每一秒发生火灾后,我们的事件处理程序将被称为与媒体数据的 BLOB 每秒即坚持一个第二长。您可以timeslice
与MediaRecorder.stop()
(en-US)}和MediaRecorder.requestData()
(en-US)}一起使用,以产生多个相同长度的 Blob,以及其他较短的 Blob。
备注: 包含媒体数据的 Blob
在 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); } ...
规范
Specification |
---|
MediaStream Recording # dom-mediarecorder-ondataavailable |
浏览器兼容性
BCD tables only load in the browser
参见
- 使用 MediaStream 录制 API
- Web Dictaphone:Chris Mills 提供的 MediaRecorder + getUserMedia + Web Audio API 可视化演示 (在 Github 上提供)。
- simpl.info MediaStream 录制演示,作者Sam Dutton。
Navigator.getUserMedia