MediaRecorder.ondataavailable - Web API 接口参考 编辑

MediaRecorder.ondataavailable 事件处理程序(part of the MediaStream记录API)处理{{event("dataavailable")}}事件，让您在响应运行代码Blob数据被提供使用。

dataavailable当MediaRecorder将媒体数据传递到您的应用程序以供使用时，将触发该事件。数据在包含数据的Blob对象中提供。这在四种情况下发生：

• 媒体流结束时，所有尚未传递到ondataavailable处理程序的媒体数据都将在单个Blob中传递。
• 当调用MediaRecorder.stop()时，自记录开始或dataavailable事件最后一次发生以来已捕获的所有媒体数据都将传递到Blob}中；此后，捕获结束。
• 调用MediaRecorder.requestData() dataavailable时，将传递自记录开始或事件最后一次发生以来捕获的所有媒体数据；然后Blob创建一个新文件，并将媒体捕获继续到该blob中。
• 如果将timeslice属性传递到开始媒体捕获的MediaRecorder.start()方法中，dataavailable则每timeslice毫秒触发一次事件。这意味着每个Blob都有特定的持续时间（最后一个Blob除外，后者可能更短，因为它将是自上次事件以来剩下的所有东西）。因此，如果该方法调用看起来像这样- recorder.start(1000);-的dataavailable事件将媒体捕捉的每一秒发生火灾后，我们的事件处理程序将被称为与媒体数据的BLOB每秒即坚持一个第二长。您可以timeslice与MediaRecorder.stop()}和MediaRecorder.requestData()}一起使用，以产生多个相同长度的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);
  }

...

技术指标

浏览器兼容性

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