MediaRecorder ondataavailable工作一次成功 [英] MediaRecorder ondataavailable work successfully once
问题描述
MediaRecorder ondataavailable工作一次成功. 我需要获取blob，将其获取base64，发送到我的服务器，将此base64解码为音频blob. 这很奇怪.
MediaRecorder ondataavailable work successful once. I need to get blob, get it base64, send to my server, decode this base64 to audio blob. This is very strange.
例如，输出:
blob1 blob2 blob3 斑点4 blob5 斑点6 blob7 斑点8 blob9
blob1 blob2 blob3 blob4 blob5 blob6 blob7 blob8 blob9
....
我只能听到blob1，其他blob被禁用".
I can hear just blob1, other blobs is "disabled".
尝试一下！ 这段代码记录音频:
Try it! This code record audio:
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>
推荐答案
我不确定您要突出显示的问题是什么，但是:
I am not sure what is the problem you try to highlight, but:
dataavailable事件的data属性仅包含已记录的全部数据的 chunk .
例如，只有第一个 chunk 将包含最终记录的媒体所需的元数据.
The dataavailable event's data property contains only a chunk of the whole data that has been recorded.
For instance, only the first chunk will contain the metadata needed for the final recorded media.
然后，您将在导出它们时将所有这些块合并在一起.
It is then expected that you will merge all these chunks together at the time you will export them.
在MediaRecorder.stop事件中，该操作只能执行一次.
And this should be done only once, at the MediaRecorder.stop event.
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));
这篇关于MediaRecorder ondataavailable工作一次成功的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
