MediaRecorder ondataavailable 工作成功一次答案

【问题标题】：MediaRecorder ondataavailable work successfully onceMediaRecorder ondataavailable 工作成功一次
【发布时间】：2018-05-15 16:38:50
【问题描述】：

MediaRecorder ondataavailable 工作成功一次。我需要获取 blob，获取 base64，发送到我的服务器，将此 base64 解码为音频 blob。这很奇怪。

例如输出：

blob1 斑点2 斑点3 斑点4 斑点5 斑点6 斑点7 斑点8 斑点9

....

我只能听到 blob1，其他 blob 被“禁用”。

试试吧！此代码记录音频：

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>

【问题讨论】：

我尝试了同样的事情，TLDR 是使用developer.mozilla.org/en-US/docs/Web/API/WebRTC_API 实现实时语音聊天

标签： javascript html ecmascript-6 web-mediarecorder

【解决方案1】：

我不确定您试图强调的问题是什么，但是：

dataavailable 事件的data 属性仅包含已记录的全部数据的块。
例如，只有第一个 chunk 将包含最终录制媒体所需的元数据。

然后预计您将在导出所有这些块时将它们合并在一起。

这应该只做一次，在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));

【讨论】：

我们能否以某种方式从第一个块中提取元数据并将其添加到每个其他块中，实际上我正在使用它进行实时录制，所以我不能仅在 recorder.onStop() 上使用它
我正在录制音频，同时将这些块发布到服务器上以便其他人可以听到
因此您也需要实时更新服务器上的文件。`
那么发送给其他客户呢？我不能每次都将整个文件发送给每个客户。我不想通过 socket.io 向其他客户端发送块。我的场景有点语音聊天
@Breddy 您可以简单地将