I am fetching fetch() a video from an API.
The response.body is a readableStream. So I read it into reader.
All the chunks (value) are then pushed into an array of chunks (chunks.push(value)).
The array of chunks is then transformed into an arrayBuffer (let buffer = await blob.arrayBuffer()) since blob can not be appended to sourceBuffer.
All the steps above work correctly! My only issue is to append the buffer into the sourceBuffer (sourceBuffer.appendBuffer(buffer)).
The console pops no error but the sourceBuffer is not updated. It keeps empty.
Does someone have an idea, what is going on?
Thanks a lot
<body>
<video id="test-video-api">
</video>
<script>
const fetchUrl = "https://myserver/api/video?fuid=12345";
const videoTag = document.getElementById("test-video-api");
function getVideo(){
if (window.MediaSource) {
var mediaSource = new MediaSource();
videoTag.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.log("The Media Source Extensions API is not supported.")
}
async function sourceOpen(e) {
URL.revokeObjectURL(videoTag.src);
const mimeCodec = 'video/mp4; codecs="avc1.4d400d,mp4a.40.2"; profiles="isom,iso2,avc1,mp41"';
var mediaSource = e.target;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
let chunks = [];
let response = await fetch(fetchUrl, {method: "GET", credentials: "include"});
const reader = response.body.getReader();
while (true){
const {done, value} = await reader.read();
chunks.push(value);
if(done){
let blob = new Blob(chunks);
let buffer = await blob.arrayBuffer();
sourceBuffer.appendBuffer(buffer);
break
}
}
}
}
getVideo()
</script>
</body>