Javascript 当流挂起时，远程流上的WebRTC MediaRecorder会切断 问题是：

在WebRTC单播视频会议期间，我可以成功地将视频从移动设备的网络摄像头传输到笔记本电脑/台式机。我想在笔记本电脑/桌面端记录远程流。（设置是移动设备流到笔记本电脑/台式机）

然而，视频流通常会不时挂起。这不是问题，因为“观众”一方将迎头赶上。但是，远程流的记录将在第一次挂起时停止

最小和删除的实现（本地录制）： 我可以从

navigator.mediaDevices.getUserMedia（）

成功录制本地流，如下所示：

const recordedChunks = [];

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
}).then(stream => {
    const localVideoElement = document.getElementById('local-video');
    localVideoElement.srcObject = stream;
    return stream;
}).then(stream => {
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = (event) => {
        if(event.data && event.data.size > 0) {
            recordedChunks.push(event.data);
        }
    };
    mediaRecorder.start({ mimeType: 'video/webm;codecs=vp9' }, 10);
});

const blob = new Blob(recordedChunks, { type: 'video/webm' });

const url = URL.createObjectURL(blob);
const a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.download = 'test.webm';
a.click();
window.URL.revokeObjectURL(url);

我可以很容易地下载它，如下所示：

const recordedChunks = [];

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
}).then(stream => {
    const localVideoElement = document.getElementById('local-video');
    localVideoElement.srcObject = stream;
    return stream;
}).then(stream => {
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = (event) => {
        if(event.data && event.data.size > 0) {
            recordedChunks.push(event.data);
        }
    };
    mediaRecorder.start({ mimeType: 'video/webm;codecs=vp9' }, 10);
});

const blob = new Blob(recordedChunks, { type: 'video/webm' });

const url = URL.createObjectURL(blob);
const a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.download = 'test.webm';
a.click();
window.URL.revokeObjectURL(url);

最小和删除的实施（远程录制）： 我使用的设置需要录制远程流，而不是本地流，因为IOS Safari不支持MediaRecorder API。我加入上面的内容是为了表明录制在本地工作。远程流录制的实现没有什么不同，除了我手动在视频中添加了一个0 Hz的音频曲目，因为Chrome似乎有一个bug，没有音频曲目就无法录制

const mediaStream = new MediaStream();
const audioContext = new AudioContext();

const destinationNode = audioContext.createMediaStreamDestination();

const oscillatorNode = audioContext.createOscillator();
oscillatorNode.frequency.setValueAtTime(0, audioContext.currentTime);
oscillatorNode.connect(destinationNode);

const audioTrack = destinationNode.stream.getAudioTracks()[0];
const videoTrack = remoteStream.getVideoTracks()[0]; // Defined somewhere else.

mediaStream.addTrack(videoTrack);
mediaStream.addTrack(audioTrack);

然后我执行与上面的本地流示例完全相同的操作来记录

mediaStream

变量

如前所述，在远程流挂起的第一点（可能由于网络延迟），远程记录停止，例如在下载时，经由

ffmpeg

转换为

.mp4

的

.webm

文件的持续时间仅与第一次挂起发生的时间相同

试图减轻： 我尝试过的缓解此问题的一种尝试是，我使用来自远程视频元素的视频流，而不是通过

remoteVideoElement.captureStream（）

记录在WebRTC的

ontrack

事件的回调中获得的远程流。这无法解决问题

---

任何帮助都将不胜感激。谢谢。

希望有人能为您发布一个实际的修复程序。同时，一个讨厌的、低效的、完全不推荐的解决方案：

将传入的媒体流路由到视频元素

使用

requestAnimationFrame（）

将绘图帧安排到画布。（请注意，这会从原始视频中消除任何genlock的感觉，而不是您想要做的事情。不幸的是，据我所知，我们无法知道何时会出现传入帧。）

使用CanvasCaptureMediaStream作为视频源

将来自CanvaCaptureMediaStream的视频曲目与来自新媒体流中原始媒体流的音频曲目重新组合

将此新媒体流用于MediaRecorder

我在过去的项目中做过这样的工作，我需要通过编程来操纵音频和视频。它起作用了

---

一个大的警告是Chrome中存在一个bug，即使捕获流连接到画布，如果选项卡不活动/不可见，画布也不会更新。当然，如果选项卡未处于活动状态，requestAnimationFrame最多也会受到严重限制，因此您需要另一个帧时钟源。（我用的是音频处理器，哈！）

没有音轨的Chrome录音，我从来没有遇到过任何问题。你能链接到它的bug跟踪器条目吗？至于您的主要问题，我怀疑传入视频的参数正在改变，它在MediaRecorder中遇到了一个bug/edge案例。例如，退学回来后，它的分辨率可能只有原来的一半。我用MediaRecorder和本地设备录制了这些视频，由于资源限制，这些设备的相机分辨率会下降，但我没有尝试使用远程流。理论上它没有什么不同，但我猜这就是问题所在。鉴于你对这个话题的了解，如果你不是会员，你可以考虑加入视频DIG。一些浏览器开发者在那里闲逛@布拉德：谢谢你的洞察力。我刚加入了松弛组。另一种这样的边缘情况可以是由于移动设备的自转而引起的纵横比增量。至于bug tracker条目：据我所知，在MediaStream中，您处理的是原始帧，超出了原始视频编解码器和流的范围。（即使您没有像现在这样使用captureStream。）但是，如果原始流以某种方式指示它已停止，或者时间戳不稳定，或者MediaRecorder在组合更改时出现问题，则可能会遇到错误。“我不确定。”布拉德·纽巴格：谢谢。“我会尝试一下，让你知道它是如何运行的。”JamieCorkhill我从我的一个项目中分出了一些代码。。。你可能会发现这很有帮助：那真的很有帮助，谢谢。我会进一步调查的。我感谢你的帮助。