javascript - 将文件流式传输到 html 视频播放器，因为它正在使用 fs 在 Electron 中下载

Question

• 我目前正在尝试使用 HTML 视频播放器从 Electron 中的文件系统流式传输文件。

• 我想在文件下载时开始流式传输。

• 我不确定我当前的计划是否可行(或者这是否可行)。

计划

• 从文件创建一个可读流，该流会随着文件的下载而更新
• 从该流生成一个 blob url
• 使用该 blob url 作为视频源

我认为目前失败的地方是我在读取第一个 block 后生成了一个 blob url，但之后的任何 block 都不包含在 blob url 中。

这是关于我想做的事情(我知道这段代码行不通)

const file = GrowingFile.open(downloadPath) // provides a readable stream for a file

let chunks = [];
file.on('data', (chunk) => {
  chunks.push(chunk);
  const blob = new Blob(chunks);
  const url = URL.createObjectURL(blob);

  video.src = url // continuously update the video src with a new blob url
})

我的主要问题是:

有没有办法在从 blob 列表生成 url 后推送到 blob 列表并继续使用相同的 blob url？

Answer 1

你想要的可以通过MediaSource SourceBuffer来完成。我要指出的是，了解视频/音频流的编解码器很重要，否则视频将无法加载。

您必须将 blob 转换为缓冲区。

let blob = null;
let mimeCodec = 'video/webm; codecs="vorbis,vp8"';
let video = document.getElementById("video");
let mediasource = new MediaSource();
let sourceBuffer = null;
let chunks = [];
let pump = function(){
    if(chunks[0]){
        let chunk = chunks[0];
        delete chunks[0];
        sourceBuffer.appendBuffer(chunk);
        chunk = null;
    }
};
mediaSource.addEventListener('sourceopen', function(_){
    sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    sourceBuffer.addEventListener('updateend', () => {
        if(chunks[0])
            pump();
    }, false);
});
video.src = URL.createObjectURL(mediaSource);
video.play();

let reader = new FileReader();
reader.onload = function(event) {
    chunks[chunks.length] = new Uint8Array(event.target.result);
    pump();
};
reader.readAsArrayBuffer(blob);