MediaSource appendBuffer не воспроизводит куски - PullRequest
0 голосов
/ 01 мая 2020

Я разделил видео WebM на фрагменты с помощью blob.slice (). При извлечении их из системы хранения я хочу транслировать фрагменты один за другим в HTML5 видео. Я использовал MediaSource appendBuffer для достижения этой цели. Чанки не воспроизводятся, хотя видимых ошибок нет.

Я сохранил чанки как буфер массива в очереди.

async play() {
  const mediaSource = new MediaSource();
  const video = this.videoc.nativeElement;
 video.controls=true;


  const mimeCodec = "video/webm; codecs=avc1.42E01E, mp4a.40.2";


  const media = await Promise.all(this.queue.map(file => {   //this.queue is an queue of arraybuffer of chunks

  return new Promise(resolve => {
      let media = document.createElement("video");
      let blobURL = URL.createObjectURL(new Blob([file]));
      media.onloadedmetadata = async e => {
        resolve({
          mediaDuration: media.duration,
          mediaBuffer: file
        })
      }
      media.src = blobURL;
    })
  }));

  console.log(media);

  mediaSource.addEventListener("sourceopen", async ()=>{

    if (MediaSource.isTypeSupported(mimeCodec)) {
      const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

      for (let chunk of media) {
        await new Promise(resolve => {
          sourceBuffer.appendBuffer(chunk["mediaBuffer"]);
          sourceBuffer.addEventListener('updateend', ()=> {

            sourceBuffer.onupdateend = null;
            sourceBuffer["timestampOffset"] += chunk["mediaDuration"];
            console.log(mediaSource.duration);
            resolve()
          })
        })

      }

      mediaSource.endOfStream();

    }  
    else {
      console.warn(mimeCodec + " not supported");
    }
  });

  video.src = URL.createObjectURL(mediaSource);
}
...