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

OK！

Chromeの実験的なウェブプラットフォーム機能を有効にしていないため、録音が機能しない理由がありました。

このWebRTC Media Recorderのサンプルサイトhttps://webrtc.github.io/samples/src/content/getusermedia/record/ - 録音も機能していなかったことがわかりました。だから私はそれが私の特定のコードと関係ないことを知っていた。

フラグを有効にするには、Chromeブラウザでchrome：// flags /に移動し、フラグを有効にして再起動します。