MediaRecorder.ondataavailable - 数据大小始终为 0答案

【问题标题】：MediaRecorder.ondataavailable - data size is always 0MediaRecorder.ondataavailable - 数据大小始终为 0
【发布时间】：2017-01-16 13:43:32
【问题描述】：

我正在尝试使用 Web API Media Recorder 在浏览器中录制用户的声音。

在这个阶段，我想要对录制的音频做的只是将它添加到音频元素的源中并播放它。

当我停止录制时，触发了'ondataavailable'事件，但数据大小为0，无法播放任何内容。

这是我的代码所在的位置。我正在使用反应。任何想法将不胜感激！

handleRecording (stream) {
 const recordedChunks = this.state.recordedChunks;
 const mediaRecorder = new MediaRecorder(stream)
 const _this = this;

 mediaRecorder.start();

 mediaRecorder.ondataavailable = function(e) {
  if (e.data.size > 0){
    recordedChunks.push(e.data);
    _this.setState({recordedChunks:recordedChunks});
  }
 }

 mediaRecorder.onstop = function(e) {
  if (recordedChunks){
    if(recordedChunks.length > 0) {
      const audio = document.querySelector('audio');
      audio.controls = true;
      const blob = new Blob(recordedChunks, { 'type' : 'audio/ogg; codecs=opus'      });
      const audioURL = window.URL.createObjectURL(blob);
      audio.src = audioURL;
    }
   }
  }

  this.setState({mediaRecorder:mediaRecorder});
},

startRecording () {
 const recording = true;
 this.setState({recording:recording});

 navigator.mediaDevices.getUserMedia({ audio: true, video: false })
    .then(this.handleRecording);
},

stopRecording () {
 const recording = false;
 const mediaRecorder = this.state.mediaRecorder;

 mediaRecorder.stop();
 this.setState({recording:recording, mediaRecorder:mediaRecorder});
}

文档链接：https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/ondataavailable

【问题讨论】：

标签： javascript html5-audio audio-recording mediarecorder

【解决方案1】：

好的，我想通了！

录制不起作用的原因是我没有启用 Chrome 的实验性 Web 平台功能。

我通过偶然发现这个 WebRTC 媒体记录器示例站点 https://webrtc.github.io/samples/src/content/getusermedia/record/ 了解到这一点 - 记录也无法正常工作。所以我知道这与我的特定代码无关。

要启用标志，请在 Chrome 浏览器中转到 chrome://flags/，启用标志并重新启动。

【讨论】：