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

Question

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

在此阶段，我对录制后的音频所做的就是将其添加到音频元素的源中并进行播放。

当我停止录音机时，会触发“ondataavailable”事件，但数据大小为0，并且无法播放任何内容。

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

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 的实验性网络平台功能。

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

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