实时将 Blob 块转换为视频

如何解决实时将 Blob 块转换为视频

我有一个客户端，可以将您的摄像头流式传输到 blob，然后再通过 socket.io 发送到另一个客户端。但是我一直在努力在这个客户端中实时显示这些 blob。让我们看看代码：

<video id="video"></video>
<script src="/socket.io/socket.io.js"></script>
<script>
    const socket = io('/');
    const mediaSource = new MediaSource();
    const url = URL.createObjectURL(mediaSource);
    const video = document.getElementById("video");
    const arrayOfBlobs = [];
    video.src = url;

    socket.on('stream',blob => {
        console.log(blob);
        arrayOfBlobs.push(blob);
        appendToSourceBuffer();
    });

    let sourceBuffer = null;
    mediaSource.addEventListener("sourceopen",() => {
        sourceBuffer = mediaSource.addSourceBuffer("video/webm; codecs=\"opus,vp8\"");
        sourceBuffer.addEventListener("updateend",appendToSourceBuffer);
    });

    function appendToSourceBuffer() {
        if (
            mediaSource.readyState === "open" &&
            sourceBuffer &&
            sourceBuffer.updating === false
        ) {
            sourceBuffer.appendBuffer(arrayOfBlobs.shift());
        }
    }
</script>

基本上，我试图获取从 socket.io 接收到的 blob，并将其转换为源缓冲区，以便附加到 html 上的标记视频，但注意到发生了。所有的斑点都完美无缺，但我认为我需要在此之前做一些 tratative....

有人吗？谢谢！