使用fs在Electron中将文件流式传输到html视频播放器

Question

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

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

• 我不确定我当前的计划是否会起作用（或者甚至有可能）。

计划

• 从文件创建可读流，该流在下载文件时更新
• 从该流生成blob网址
• 使用该Blob网址作为视频源

我认为当前失败的原因是，在读取第一个块之后会生成一个blob url，但是此后的任何块都不包含在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
})

我的主要问题是：

是否有一种方法可以在生成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);