MediaStreamRecorder 不会触发 ondataavailable 事件答案

【问题标题】：MediaStreamRecorder doesn't fire the ondataavailable eventMediaStreamRecorder 不会触发 ondataavailable 事件
【发布时间】：2017-04-17 13:41:55
【问题描述】：

我正在使用开源 JavaScript 库 MediaStreamRecorder 在 Mozilla Firefox 和 Google Chrome 中录制音频和视频 webRTC 调用。

通话录音成功，但我面临以下问题。

如果我在 multiStreamRecorder.start() 中使用 1 秒 (1000 毫秒) 的时间间隔，则不会触发 multiStreamRecorder.ondataavailable 事件。这就是为什么没有错误或没有登录控制台的原因。

但是，如果我使用 1.5 秒（1500 毫秒）或更长的时间间隔，它会触发 multiStreamRecorder.ondataavailable 事件，并且一切正常。 （仅限视频案例）

我只想将间隔保持在 1 秒（1000 毫秒）。

var ws;

function start() {

    ws = new WebSocket("wss://xyz/");

    ws.onopen = function () {
        console.log("WebSocket has been opened!");
    };

    ws.onmessage = function (message) {
        console.log("A messsage is received from WebSocket Server.", message);
    };

    ws.onclose = function (e) {
        console.log('WebSocket is closed. Reconnection will be attempted in 5 second.', e.reason);
        setTimeout(function () {
            start();
        }, 5000);
    };

    ws.onerror = function (err) {
        console.error('WebSocket encountered an error: ', err.message, 'Closing WebSocket');
        ws.close();
    };

}

start();


function startRecording(localStream, remoteStream) {

    if (localStream != null && remoteStream != null) {

        multiStreamRecorder = new MultiStreamRecorder([localStream, remoteStream], "video/webm");
        multiStreamRecorder.mimeType = "video/webm";

        multiStreamRecorder.ondataavailable = function (blob) {

            console.log("sending blob to websocket server", blob);
            ws.send(blob);

        };

        // It doesn't work with the 1000ms time interval
        multiStreamRecorder.start(1500);

    }
    else{
        console.error("One or more streams are null.");
    }

}

【问题讨论】：

标签： javascript websocket streaming blob webrtc

【解决方案1】：

我怀疑一秒钟的时间不足以让摄像机流预热。虽然您可以立即将记录器附加到流中，但它似乎还没有准备好在零时间内播放/记录。

视频元素有.onloadedmetadata让你等待数据准备好；录音机没有。

你可以制作一个（使用 https fiddle 用于 Chrome）：

var haveLoadedMetadata = stream => {
  let preview = document.createElement("video");
  preview.srcObject = stream;
  return new Promise(resolve => preview.onloadedmetadata = resolve); 
};

var start = ms => navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => haveLoadedMetadata(stream)
    .then(() => record(stream, ms))
    .then(recording => {
      stop(stream);
      video.src = link.href = URL.createObjectURL(new Blob(recording));
      link.download = "recording.webm";
      link.innerHTML = "Download recording";
      log("Playing "+ recording[0].type +" recording:");
    }))
  .catch(log);

var record = (stream, ms) => {
  var rec = new MediaRecorder(stream), data = [];
  rec.ondataavailable = e => data.push(e.data);
  rec.start();
  log(rec.state + " for "+ (ms / 1000) +" seconds...");
  var stopped = new Promise((y, n) => (rec.onstop = y, rec.onerror = e => n(e.error || e.name)));
  return Promise.all([stopped, wait(ms).then(() => rec.stop())])
    .then(() => data);
};

var stop = stream => stream.getTracks().forEach(track => track.stop());
var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
var log = msg => div.innerHTML += "<br>" + msg;

<button onclick="start(1000)">Record 1 second!</button>
<div id="div"></div><br>
<video id="video" height="120" width="160" autoplay></video>
<a id="link"></a>

（Chrome 和 Firefox 都直接实现 MediaRecorder，所以我已经使用它来回答了）。

【讨论】：

MediaRecorder.ondataavailable 在窗口最小化或浏览器选项卡切换后不触发......有什么办法可以防止它？或者如果它是图书馆的性质，那么一旦我切换标签并再次回到它，我该如何恢复这个过程？
我不知道图书馆。我在my fiddle 中使用本机，它似乎并没有被标签切换或最小化所困扰。例如。修改为记录10秒。 WFM。
为什么这个例子没有直播视频？

【解决方案2】：

我遇到了类似的问题。它没有触发ondataavailable 事件，除非我开始录制并停止了几次。两天后发现问题是我的麦克风驱动程序:)。它可能会一直尝试使用麦克风，因此需要几秒钟才能发现它不起作用。一旦将audio 设置为false，一切都可以完美运行。只是没有声音大声笑。

【讨论】：