MediaRecorder ondata 이용 가능 한 번만

MediaRecorder ondata 이용 가능 한 번만 성공했습니다. blob을 가져 와서 base64로 만들고, 내 서버로 보내고,이 base64를 오디오 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 이벤트에서 한 번만 수행해야합니다.

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 이용 가능 한 번만

답변

관련 문제