如何将 Base64 数据流式传输到视频中

Question

我正在尝试从流中加载视频。即使整个视频尚未“下载”，我也希望能够“播放”视频。base64 数据以缓冲区块流的形式传入。

const videoTag = document.getElementById('videoTag');
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const mediaSource = new MediaSource();

videoTag.src = URL.createObjectURL(mediaSource);

await new Promise((resolve, reject) => {
    mediaSource.addEventListener('sourceopen', function (_) {
        resolve();
    });
});

const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);


for await (const chunk of ipfsNode.cat(CID)) {//Chunk is coming in as an array buffer
    sourceBuffer.appendBuffer(chunk);
}

sourceBuffer.addEventListener('updateend', async function (_) {
    mediaSource.endOfStream();
    $('#videoTag')[0].load();
});

我已经尝试使用new MediaSource()和sourceBuffer.appendBuffer(chunk);推新下载的数据块的视频，但不仅在视频没有播放过，我现在用的方法要求之前，整个视频下载可以玩。

如何将我chunk的 base64 数据放入视频中？

编辑（回应评论）：无论我是使用字符串还是二进制流，我都对如何将流导入视频感到有些困惑。

Answer 1

使用data:URL 并将其直接插入到视频 src 属性中。