Question

我正在用我的角度应用程序开发LiveStream。后端可以向我提供视频的mp4文件。我正在尝试开发自己的播放器以请求视频的新部分，为此，我想将MediaSource与SourceBuffer一起使用。我正在使用本教程https://medium.com/canal-tech/how-video-streaming-works-on-the-web-an-introduction-7919739f7e1 但是，在创建MediaSource和SourceBuffer之后，我无法调用SourceBuffer.appendBuffer方法。

这是我得到的错误：

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

对我来说，MediaSource.addSourceBuffer似乎没有创建适当的SourceBuffer对象。

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

Answer 1

如果您传递给appendBuffer的值不是ArrayBuffer，则会收到该错误。根据您在data.payload中返回的内容，可以尝试使用类似new Uint8Array(data.payload)的格式进行转换。

例如使用提取：

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

MediaSource中的SourceBuffer在Angular中不起作用

1 个答案: