Потоковый файл в видеоплеер HTML, поскольку он загружается в Electron с помощью fs

Question

• В настоящее время я пытаюсь использовать видеоплеер HTML для потоковой передачи файла из файловой системы в Electron.

• Я хочу начать потоковую передачу какфайл загружается.

• Я не уверен, сработает ли мой текущий план (или если это вообще возможно).

plan

• Создание читаемого потока из файла, который обновляется при загрузке файла
• Создание URL-адреса BLOB-объекта из этого потока
• Использование URL-адреса BLOB-объекта в качестве видеоsource

Когда я думаю, что в настоящее время это не помогает, я генерирую URL-адрес большого двоичного объекта после чтения первого фрагмента, но любые фрагменты после этого не включаются в 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 был сгенерирован из него и продолжает использовать тот же URL-адрес BLOB-объекта?

Answer 1

То, что вы хотите, может быть достигнуто через MediaSource SourceBuffer.Я укажу, что важно, чтобы вы знали кодек видео / аудио потока, иначе видео не будет загружаться.

Вам придется преобразовать большой двоичный объект в буфер.

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