Chrome: To Play A Video That Is Being Downloaded Via Fetch/xhr

What I'm trying to achieve is to make Chrome load a video file as data (via the Fetch API, XHR, whatever) and to play it using

Solution 1:

After hours of experimenting, found a half-working solution:

const video = document.getElementById('audio');

const mediaSource = newMediaSource();

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

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

  const sourceBuffer = mediaSource.addSourceBuffer('audio/webm; codecs="opus"');

  const response = awaitfetch(audioSRC);

  const body = response.bodyconst reader = body.getReader()

  let streamNotDone = true;

  while (streamNotDone) {

    const {value, done} = await reader.read();
    
    if (done) {streamNotDone = false; break;}
    
    awaitnewPromise((resolve, reject) => {
      sourceBuffer.appendBuffer(value)

      sourceBuffer.onupdateend = (() => {
        resolve(true);
      })
    }) 

  }
});

It works with https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

Also, I tested this only with webm/opus format but I believe it should work with other formats as well as long as you specify it.