MediaRecorder ondataavailable work successfully on

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.

For example, output:

blob1 blob2 blob3 blob4 blob5 blob6 blob7 blob8 blob9

....

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>

标签： javascript html ecmascript-6 web-mediarecorder

1条回答

forever°为你锁心

2楼-- · 2020-04-11 02:04

I am not sure what is the problem you try to highlight, but:

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.

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));

0人赞添加讨论(0) 举报

MediaRecorder ondataavailable work successfully on

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间