websocket - MediaSource Buffer 仅适用于一个客户端

Question

所以我正在尝试构建一个直播应用程序，但遇到了一个奇怪的问题。

所以我使用 getUserMedia 来捕获用户的视频，然后将该用户标记为广播者。然后我使用 MediaRecorder 从 MediaStream 获取实际视频数据并通过 websocket 发送它。

websocket 只是将视频数据广播到所有连接的客户端，但是出于某种原因，它只能在广播公司的播放器上正确播放，但是当我尝试从不同的客户端播放相同的流时，它只会给我这个错误:

未捕获的 DOMException:无法在“SourceBuffer”上执行“appendBuffer”:此 SourceBuffer 已从父媒体源中删除。

当我查看 chrome://media-internals 时，我看到了这个错误:

00:00:00 94 错误意外元素 ID 0x8c
00:00:00 94 错误附加:流解析失败。数据大小=33926 append_window_start=0 append_window_end=inf
00:00:00 94 pipeline_error CHUNK_DEMUXER_ERROR_APPEND_FAILED

脚本和所有内容在两个客户端上当然是相同的。唯一不同的是，我认为可能是罪魁祸首是广播公司的流没有立即开始，因为广播公司首先需要将视频数据发送到 websocket 服务器，以便服务器中继回任何内容。然而，非广播客户有点跳到流的“中间”。

唯一的区别是广播通过同一个套接字下载和上传视频数据，但我看不出这对问题有何影响。

编辑:在运行测试后，两个客户端都连接到 websocket 而没有流式传输视频，然后运行流，两个客户端都工作了，这意味着问题确实源于其他客户端在中间跳入流-way，这将如何解决？

不过，我对这一切都是陌生的，所以我不确定这是否是一个很好的推理。作为引用，这是脚本:

var socket = new WebSocket('websocket');
socket.binaryType = 'arraybuffer';

var broadcastMs = new MediaSource();

var video = document.querySelector("#broadcast");
video.src = window.URL.createObjectURL(broadcastMs);

var msReady = false;
var sourceBuffer = false;
var queue = [];

broadcastMs.addEventListener('sourceopen', function(e)
{
    sourceBuffer = broadcastMs.addSourceBuffer('video/webm; codecs="opus,vp8"');

    sourceBuffer.addEventListener('update', function()
    {
        if ( queue.length > 0 && !sourceBuffer.updating )
            sourceBuffer.appendBuffer(queue.shift());
    });

    msReady = true;     
});

socket.onmessage = function(ev)
{
    setTimeout(function()
    {
        if ( msReady )
        {
            if ( sourceBuffer.updating )
                queue.push(ev.data);
            else
                sourceBuffer.appendBuffer(ev.data);
        }
    }, 50);
};

Answer 1

您不能只是针刺到 WebM 流中。您必须先发送几个部分来初始化流。

获取 EBML 查看器的副本。 https://code.google.com/archive/p/ebml-viewer/downloads (EBML 是 Matroska 所基于的标准二进制格式。WebM 是 Matroska 的一个子集。)打开一个 WebM 文件。您将看到一个 Segment 元素，它将包含一组配置流的数据。 (轨道、编解码器等)所有这些数据，直到第一个集群的开始，都必须首先发送到 MediaSource 中。之后，您可以从任何包含关键帧的片段开始。

我应该指出，您正在做的是一个已解决的问题。查看 WebRTC 以获得更有效的方法来执行此操作。您获得的控制较少...但很多东西都是免费的。