MediaRecorder ondata利用可能な作業は一度

MediaRecorder ondata利用可能な作業が一度成功しました。私はblobを取得する必要があります、それをbase64、私のサーバーに送信、このblobをオーディオblobにデコードします。これは非常に奇妙です。MediaRecorder ondata利用可能な作業は一度

例えば、出力：

blob1 blob2 blob3 blob4 blob5 blob6 blob7 blob8 blob9

....

私はちょうどblob1、他のブロブを聞くことができます無効になっています"。

このコード・レコード・オーディオ：

window.startRecord = function(cb){ 
 
    var int; 
 
    navigator.mediaDevices.getUserMedia({ audio: true , video:false}).then(function(stream){ 
 
    var options = { 
 
     audioBitsPerSecond : 128000, 
 
     videoBitsPerSecond : 2500000, 
 
     mimeType : 'audio/webm\;codecs=opus' 
 
    } 
 

 
    if(!MediaRecorder.isTypeSupported(options['mimeType'])) options['mimeType'] = "audio/ogg; codecs=opus"; 
 

 

 
    window.voice = new MediaRecorder(stream, options); 
 

 
    voice.start(500); 
 
    voice.ondataavailable = function(data){ 
 

 

 
     var reader = new FileReader(); 
 
     var blob = data.data; 
 

 
     reader.readAsDataURL(blob); 
 
     reader.onloadend = function() { 
 
     var result = reader.result; 
 

 
     cb(result); 
 
     } 
 
    }; 
 

 
    voice.onstop = function(){ 
 
     console.log('stop audio call'); 
 
    } 
 
    }); 
 
} 
 

 
window.convertDataURIToBinary = function(dataURI) { 
 
    var BASE64_MARKER = ';base64,'; 
 
    var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length; 
 
    var base64 = dataURI.substring(base64Index); 
 
    var raw = window.atob(base64); 
 
    var rawLength = raw.length; 
 
    var array = new Uint8Array(new ArrayBuffer(rawLength)); 
 

 
    for(i = 0; i < rawLength; i++) { 
 
    array[i] = raw.charCodeAt(i); 
 
    } 
 
    return array; 
 
}

<body> 
 
<button onclick="startRecord(function(r){ 
 
    
 
    var binary= convertDataURIToBinary(r); 
 
    var blob=new window.Blob([binary], {type : 'audio/webm'}); 
 
    var blobUrl = window.URL.createObjectURL(blob); 
 
    console.log('URL : ' + blobUrl); 
 

 
    document.getElementById('data').append(blobUrl + ` 
 

 
| 
 

 
    `); 
 
    })">Exec</button> 
 

 
    <div id="data"> 
 
     
 
    </div> 
 
<body> 
 

 
</body>

出典

2017-12-01 DuckerMan

私はあなたが強調表示しようとする問題が何であるかわからない、しかし：dataavailableイベントのdataプロパティが唯一のチャンクが含まれてい

記録されたデータ全体。
たとえば、最初のチャンクには、最終記録メディアに必要なメタデータが含まれます。

これらのチャンクをすべてエクスポートするときに一緒にマージすることが期待されます。

これは、MediaRecorder.stopイベントで1回だけ実行する必要があります。

const chunks = []; // store all the chunks in an array 
recorder.ondataavailable = e => chunks.push(e.data); 
// merge the chunks in a single Blob here 
recoder.onstop = e => export_media(new Blob(chunks));

出典

2018-02-08 05:28:54 Kaiido

MediaRecorder ondata利用可能な作業は一度

答えて

関連する問題