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

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

好吧，我想通了！

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

我是通过偶然发现这个 WebRTC Media Recorder 示例网站了解到这一点的https://webrtc.github.io/samples/src/content/getusermedia/record/- 录音也不起作用。所以我知道这与我的特定代码无关。

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