Reputation: 111
i am trying to create my own code to play live MPEG-DASH using media-source, i succeed to get the data but can't showed it in the player.
function GETData(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200){
liveIndex++;
receiveBuffer.push(xhr.response);
if(audio == false){
appendVideo();
audio = true;
}
else{
appendAudio();
audio = false;
}
}
};
xhr.open("GET", urlList[liveIndex], true);
xhr.responseType = 'arraybuffer';
xhr.send();
}
function updateVideoFunc(){
sbVideo.removeEventListener("update", updateVideoFunc);
GETData();
}
function updateAudioFunc(){
sbAudio.removeEventListener("update", updateAudioFunc);
GETData();
}
function sourceopen(e){
sourceBuffer = this.sourceBuffers;
sourceBuffer[trackName] = ms.addSourceBuffer('video/mp4;codecs=avc1.42c01e');
sbVideo =sourceBuffer[trackName];
sbVideo.addEventListener('updateend', updateVideoFunc);
sourceBuffer = this.sourceBuffers;
sourceBuffer[trackName2] = ms.addSourceBuffer('audio/mp4;codecs="mp4a.40.2');
sbAudio =sourceBuffer[trackName2];
sbAudio.addEventListener('updateend', updateAudioFunc);
GETData();
}
var fileIndex = 0;
function appendVideo()
if(sbVideo.updating == false)
{
sbVideo.appendBuffer(new Uint8Array(receiveBuffer[fileIndex]));
sbVideo.addEventListener("updateend",updateVideoFunc, false);
fileIndex++;
}
}
function appendAudio(){
if(sbAudio.updating == false && sbVideo.updating == false){
sbAudio.appendBuffer(new Uint8Array(receiveBuffer[fileIndex]));
sbAudio.addEventListener("updateend",updateAudioFunc, false);
fileIndex++;
}
}
this code worked when using source that is not live, but not with live code. what i am missing ?
Upvotes: 1
Views: 219
Reputation: 1256
The video's playhead is always at 0 per default. However, when appending data of live streams, the data ranges won't start with 0, but wherever the live stream is. So you either need to use the SourceBuffer's timestampOffset or simply seek (i.e. set the currentTime) to where the data starts.
You can also see how this is done in open source player such as Shaka or dash.js or you might use an off the shelf solution, such as the Bitmovin Player or JWPlayer.
Upvotes: 0