当流挂起时，远程流上的WebRTC MediaRecorder会被切断

Question

The Problem:

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

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

Minimal and Removed Implementation (Local Recording):

我可以成功记录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);

Minimal and Removed Implementation (Remote Recording):

我正在使用的设置需要记录远程流，而不是本地流，因为IOS Safari不支持MediaRecorder API。我包括上面的内容，表明录音正在本地工作。远程流录制的实现没有什么不同，除了我手动向视频添加0 Hz音频轨道，因为Chrome似乎有一个错误，它不会录制没有音轨。

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变量。

如上所述，在远程流挂起的第一点（由于网络延迟，可能），远程录制停止，因此在下载时，通过.webm转换为.mp4的ffmpeg文件的持续时间仅与第一次发生的地方。

Attempts to Mitigate:

我试图缓解这个问题的一个尝试是，而不是记录从WebRTC的ontrack事件的回调中获得的远程流，而是通过remoteVideoElement.captureStream()使用来自远程视频元素的视频流。这不能解决问题。

任何帮助将非常感激。谢谢。

Answer 1

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

1. 将传入的MediaStream路由到视频元素。
2. 使用requestAnimationFrame()将绘图框架安排​​到画布上。 （请注意，这会消除原始视频中的任何同步锁定感，并且不是您想要做的事情。不幸的是，据我所知，我们无法知道何时出现传入帧。）
3. 使用CanvasCaptureMediaStream作为视频源。
4. 重新组合CanvasCaptureMediaStream中的视频轨道以及新MediaStream中原始MediaStream的音轨。
5. 将这个新的MediaStream用于MediaRecorder。

我已经完成了以前的项目，我需要以编程方式操作音频和视频。有用！

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