CODEWITHSUNDEEP
angularmedia-source
Maciejek
Maciejek

Reputation: 659

SourceBuffer in MediaSource is not working in Angular

I'm developing a LiveStream in my angular application. Back-end can provide me mp4 files of video. I am trying to develop my own player to request new parts of the video and for that, I want to use MediaSource with SourceBuffer. I'm using this tutorial https://medium.com/canal-tech/how-video-streaming-works-on-the-web-an-introduction-7919739f7e1 However, After I created MediaSource and SourceBuffer I cannot call SourceBuffer.appendBuffer method.

This is the error I get:

Uncaught TypeError: Failed to execute 'appendBuffer' on 'SourceBuffer': No function was found that matched the signature provided.

const videoTag = document.getElementById("video");
const mediaSource = new MediaSource();
const url = URL.createObjectURL(mediaSource);
(<HTMLVideoElement>videoTag).src = url;
mediaSource.onsourceopen = () => {
    let videoSourceBuffer: SourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001e"');
        this.http.get('/videoStreaming/res6547', parameters).subscribe((data) => {
          console.log(videoSourceBuffer);
          videoSourceBuffer.appendBuffer(data.payload); //<== here stuff breaks
        })
      }

For me, it looks like MediaSource.addSourceBuffer doesn't create appropriate SourceBuffer object. 

SourceBuffer {mode: "segments", updating: false, buffered: TimeRanges, timestampOffset: 0, appendWindowStart: 0, …}
appendWindowEnd: Infinity
appendWindowStart: 0
buffered: TimeRanges {length: 0}
mode: "segments"
onabort: null
onerror: null
onupdate: null
onupdateend: null
onupdatestart: null
timestampOffset: 0
updating: false
__proto__: SourceBuffer

Upvotes: 1

Views: 1364

Answers (1)

Chad Michael
Chad Michael

Reputation: 266

You will get that error if the value you pass into appendBuffer is not an ArrayBuffer. Depending on what you are getting back in data.payload you could try to convert it with something like new Uint8Array(data.payload).

For example using fetch:

const response = await fetch(url);
const rawChunk = await response.arrayBuffer();
sourceBuffer.appendBuffer(rawChunk);

Upvotes: 0

Related Questions