Question

我正在尝试使用Web API媒体记录器在浏览器中录制用户的语音。

在这个阶段，我正在尝试使用录制的音频，将其添加到音频元素的来源并播放。

当我停止录音机时，会触发“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媒体记录器样本网站https://ant.design/components/tree/#TreeNode-props来了解到这一点 - 记录也无效。所以我知道这与我的具体代码无关。

要启用该标记，请转到Chrome浏览器中的chrome：// flags /，启用该标记并重新启动。

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

1 个答案: