无法使用带有 socket.io 的媒体源从媒体记录器跳转到流

当首先加载视频观察客户端然后加载网络摄像头客户端时，以下代码可以正常工作，但是，如果顺序交换或以任何方式中断流，例如通过刷新任一客户端，则流将失败并且媒体源会将其就绪状态更改为关闭。

我的假设是，在开始时接收的视频需要初始化标头才能启动，并且由于流是在中流读取的，因此它永远不会获得所述初始化标头。我不确定如何将这样的标头添加到 webm 文件中。

我尝试更改源缓冲区上的序列模式，但没有执行任何操作。我尝试重新启动录像机并且可行，但我的最终计划是拥有多个观察客户端，并且每次重新连接时重新启动录像机并不是最佳选择。

相机客户端

main();
function main() {
    if (hasGetUserMedia()) {
        const constraints = {
            video: {
                facingMode: 'environment',
                frameRate: {
                    ideal: 10,
                    max: 15
                }
            },
            audio: true
        };

        navigator.mediaDevices.getUserMedia(constraints).
        then(stream => {
            setupRecorder(stream);
        });
    }
}

function setupRecorder(stream) {
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: 'video/webm; codecs="opus, vp9"'
    });

    mediaRecorder.ondataavailable = e => {
        var blob = e.data;
        socket.emit('video', blob);
    }

    mediaRecorder.start(500);
}

服务器只广播收到的任何内容

观察客户

var sourceBuffer;
var queue = [];
var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', sourceOpen, false);
main();

socket.on('stream', data => {
    if (mediaSource.readyState == "open") {
        if (sourceBuffer.updating || queue.length > 0) {
            queue.push(data.video);
        } else {
            sourceBuffer.appendBuffer(data.video);
        }
    }
});

function main() {
    videoElement = document.querySelector('#video');
    videoElement.src = URL.createObjectURL(mediaSource);
}

function sourceOpen(e) {
    console.log('open');
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="opus, vp9"');
    sourceBuffer.addEventListener('updateend', () => {
        console.log(sourceBuffer.updating, mediaSource.readyState);

        if (queue.length > 0 && !sourceBuffer.updating) {
            sourceBuffer.appendBuffer(queue.shift());
        }
    });
}

因此，实际上，代码的工作方式不正确，因此套接字发送的服务器没有任何问题。它与 MediaRecorder 或 MediaSource 有关。

我的假设是，在开始时接收的视频需要初始化标头才能启动，并且由于流是在中流读取的，因此它永远不会获得所述初始化标头。

Correct!

要解决这个问题，您需要了解一些 WebM 格式。 WebM 只是 Matroska (MKV) 的一个子集。Matroska https://www.matroska.org/technical/diagram/index.html是用于在 EBML 中存储媒体的模式规范。EBML http://matroska-org.github.io/libebml/specs.html是一种可以具有任意块的二进制文件格式。将其视为二进制 XML。

这意味着您可以使用类似的工具EBML 查看器 https://code.google.com/archive/p/ebml-viewer/downloads检查 WebM 文件，并参考 Matroska 规范来了解发生了什么。例如：

这是对预先录制的 WebM 文件的检查。它将在浏览器中正常运行。您会注意到有些元素是嵌套的。

每个 WebM 文件中都有两个顶级元素。EBML，它定义了这个二进制文件，并且Segment其中包含之后的所有内容。

Within Segment有几个因素对您来说很重要。其中之一是Tracks。您会注意到该文件有两个轨道，一个用于 Opus 中的音频，一个用于 VP9 中的视频。另一个重要的块是Info，其中包含有关时间刻度的信息和有关复用器的一些元数据。

在所有这些元数据之后，您会发现Cluster, Cluster, Cluster, etc. 这些是您可以剪切 WebM 流的地方，假设每个Cluster从关键帧开始。

换句话说，您的代码应该执行以下操作：

• 保存第一个之前的所有数据Cluster作为“初始化数据”。
• 分裂于Cluster在那之后。

播放时：

• 使用之前保存的“初始化数据”作为加载的第一个数据。
• 开始加载Cluster之后，从流中您想要的任何位置开始。

现在，谁集群需要关键帧这一点很重要。据我所知，没有办法配置 MediaRecorder 来执行此操作，并且浏览器对此特别挑剔。至少，您必须在服务器端重新混合......您甚至可能需要重新编码。也可以看看：将 FFMPEG 编码为 MPEG-DASH – 或使用关键帧簇的 WebM – 用于 MediaSource API https://stackoverflow.com/questions/24152810/encoding-ffmpeg-to-mpeg-dash-or-webm-with-keyframe-clusters-for-mediasource/45172617#45172617

通过 socket.io 使用媒体源

我应该指出，您甚至不需要 MediaSource。你绝对不需要Socket.IO。它可以像通过普通 HTTP 流输出此数据一样简单。这可以直接加载到<video>元素。 （如果您想要额外的控制，请务必使用 MediaSource，但这不是必需的。）