Search code examples
javascriptiossafarihttp-live-streaming

how to get programDateTime in hls on ios safari?


I want to get the programDateTime which is a timestamp in the browser to measure the delay time of HLS. I knew how to get it on the desktop version of Chrome and Safari. However, there is no way to get it with iOS Safari. Do you know any good way?

The following is how to get programDateTime using hls.js. However, this method can not be used because iOS plays hls natively.

hls.on(Hls.Events.FRAG_CHANGED, function(id, data){
    if (data.frag._url) {
        console.log('data',data)
        if (data.frag.programDateTime){
            var progaramDateTime = data.frag.programDateTime;
        } else {
            // for macOS Safari
            var rawProgaramDateTime = data.frag.tagList[2][1];
            rawProgaramDateTime = rawProgaramDateTime.slice(0, -2) + ":" + rawProgaramDateTime.slice(-2);
            var progaramDateTime = Date.parse(rawProgaramDateTime);
        }
        programDateTimeArray.push(progaramDateTime);

        console.log('programDateTimeArray',programDateTimeArray)
        if (programDateTimeArray.length == 5){
            programDateTimeArray.shift();
            chunkTime = programDateTimeArray[3] - programDateTimeArray[0];
        }
        var programDateTime = progaramDateTime - chunkTime - 2000;
        mcDelayTime = getCurrentTime() - programDateTime;
        console.log(data.frag._url, mcDelayTime+"ミリ秒遅延しています");
    }
});


Solution

  • On Safari for native HLS playback you can use this method: https://developer.apple.com/documentation/webkitjs/htmlmediaelement/1634352-getstartdate

    If there is a program date time in the HLS stream the first one will be stored as the date returned by this method.

    From there, you should be able to combine it with the video element currentTime attribute to get the current program date time. With those two values you should be able to measure your delay time in a similar fashion.