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

Question

我正在尝试使用 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

Answer 1

好的，我想通了！

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

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

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