将文件流式传输到html视频播放器,因为它是使用fs在Electron中下载的

Question

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

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

• 我不确定我目前的计划是否有效(或者如果可行的话).

计划

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

我认为目前失败的地方是我在读取第一个块后生成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
})

我的主要问题是:

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

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);