Enable live playback catchup for non low latency streams (#3468)

* Enable live playback catchup for non low latency streams * Revert change in ref client sample json
Dash-Industry-Forum · Nov 27, 2020 · 87fae5b · 87fae5b
1 parent 379dbcc
commit 87fae5b
Show file tree

Hide file tree

Showing 14 changed files with 806 additions and 518 deletions.
diff --git a/docs/migration/Migration-3.0.md b/docs/migration/Migration-3.0.md
@@ -108,9 +108,9 @@ As a helper for the migration process, below table shows which property of the n
 |MediaPlayer.enableManifestDateHeaderTimeSource  | streaming.useManifestDateHeaderTimeSource   |
 |MediaPlayer.useSuggestedPresentationDelay       | streaming.useSuggestedPresentationDelay     |
 |MediaPlayer.setManifestUpdateRetryInterval      | streaming.manifestUpdateRetryInterval       |
-|MediaPlayer.setLowLatencyMinDrift      | streaming.liveCatchUpMinDrift             |
-|MediaPlayer.setLowLatencyMaxDrift      | streaming.liveCatchUpMaxDrift             |
-|MediaPlayer.setCatchUpPlaybackRate     | streaming.liveCatchUpPlaybackRate         |
+|MediaPlayer.setLowLatencyMinDrift      | streaming.liveCatchup.minDrift             |
+|MediaPlayer.setLowLatencyMaxDrift      | streaming.liveCatchup.maxDrift             |
+|MediaPlayer.setCatchUpPlaybackRate     | streaming.liveCatchup.playbackRate         |
 |MediaPlayer.enableLastBitrateCaching   | streaming.lastBitrateCachingInfo.enabled<br>streaming.lastBitrateCachingInfo.ttl       |
 |MediaPlayer.enableLastMediaSettingsCaching      | streaming.lastMediaSettingsCachingInfo.enabled<br>lastMediaSettingsCachingInfo.ttl        |
 |MediaPlayer.setMovingAverageMethod     | streaming.abr.movingAverageMethod         |

diff --git a/index.d.ts b/index.d.ts
@@ -130,9 +130,13 @@ declare namespace dashjs {
             useSuggestedPresentationDelay?: boolean;
             useAppendWindow?: boolean,
             manifestUpdateRetryInterval?: number;
-            liveCatchUpMinDrift?: number;
-            liveCatchUpMaxDrift?: number;
-            liveCatchUpPlaybackRate?: number;
+            liveCatchup: {
+                minDrift?: number;
+                maxDrift?: number;
+                playbackRate?: number;
+                latencyThreshold?: number,
+                enabled?: boolean
+            }
             lastBitrateCachingInfo?: {
                 enabled?: boolean;
                 ttl?: number;

diff --git a/samples/dash-if-reference-player/app/main.js b/samples/dash-if-reference-player/app/main.js
@@ -508,6 +508,16 @@ app.controller('DashController', function ($scope, sources, contributors, dashif
         });
     };
 
+    $scope.toggleLiveCatchupEnabled = function () {
+        $scope.player.updateSettings({
+            streaming: {
+                liveCatchup: {
+                    enabled: $scope.liveCatchupEnabled
+                }
+            }
+        });
+    };
+
     $scope.setStream = function (item) {
         $scope.selectedItem = JSON.parse(JSON.stringify(item));
     };
@@ -592,6 +602,11 @@ app.controller('DashController', function ($scope, sources, contributors, dashif
             }
         }
 
+        const initialLiveDelay = parseInt($scope.initialLiveDelay);
+        if (!isNaN(initialLiveDelay)) {
+            config.streaming.liveDelay = initialLiveDelay;
+        }
+
         const initBitrate = parseInt($scope.initialVideoBitrate);
         if (!isNaN(initBitrate)) {
             config.streaming.abr.initialBitrate = {'video': initBitrate};
@@ -952,6 +967,7 @@ app.controller('DashController', function ($scope, sources, contributors, dashif
         $scope.defaultBufferTimeAtTopQuality = currentConfig.streaming.bufferTimeAtTopQuality;
         $scope.defaultBufferTimeAtTopQualityLongForm = currentConfig.streaming.bufferTimeAtTopQualityLongForm;
         $scope.lowLatencyModeSelected = currentConfig.streaming.lowLatencyEnabled;
+        $scope.liveCatchupEnabled = currentConfig.streaming.liveCatchup.enabled;
     }
 
 

diff --git a/samples/dash-if-reference-player/dashjs_config.json b/samples/dash-if-reference-player/dashjs_config.json
@@ -24,10 +24,13 @@
         "useManifestDateHeaderTimeSource": true,
         "useSuggestedPresentationDelay": true,
         "manifestUpdateRetryInterval": 100,
-        "liveCatchUpMinDrift": 0.02,
-        "liveCatchUpMaxDrift": 0,
-        "liveCatchUpPlaybackRate": 0.5,
-        "liveCatchupLatencyThreshold": null,
+        "liveCatchup": {
+            "minDrift": 0.02,
+            "maxDrift": 0,
+            "playbackRate": 0.5,
+            "latencyThreshold": null,
+            "enabled": false
+        },
         "lastBitrateCachingInfo": { "enabled": true, "ttl": 360000},
         "lastMediaSettingsCachingInfo": { "enabled": true, "ttl": 360000},
         "cacheLoadThresholds": {"video": 50, "audio": 5},

diff --git a/samples/dash-if-reference-player/index.html b/samples/dash-if-reference-player/index.html
diff --git a/samples/live-streaming/synchronized-live-playback.html b/samples/live-streaming/synchronized-live-playback.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>Synchronized live playback with catchup mode</title>
+
+    <script src="../../dist/dash.all.debug.js"></script>
+    <!--dash.all.min.js should be used in production over dash.all.debug.js
+Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
+    <!--<script src="../../dist/dash.all.min.js"></script>-->
+
+    <script class="code">
+        function init() {
+            var player1, player2, video;
+            var MPD_2S_SEGMENTS = "https://livesim.dashif.org/livesim/testpic_2s/Manifest.mpd";
+            var settings = {
+                streaming: {
+                    liveDelay: 10, 
+                    liveCatchup: {
+                        enabled: true
+                    }
+                }
+            }
+
+            video = document.querySelector("#video1");
+            player1 = dashjs.MediaPlayer().create();
+            player1.initialize(video, MPD_2S_SEGMENTS, true);
+            player1.updateSettings(settings);
+
+            video = document.querySelector("#video2");
+            player2 = dashjs.MediaPlayer().create();
+            player2.initialize(video, MPD_2S_SEGMENTS, true);
+            player2.updateSettings(settings);
+
+
+            setInterval(function () {
+                var d = new Date();
+                var seconds = d.getSeconds();
+                document.querySelector("#sec").innerHTML = (seconds < 10 ? "0" : "") + seconds;
+                var minutes = d.getMinutes();
+                document.querySelector("#min").innerHTML = (minutes < 10 ? "0" : "") + minutes;
+                for (var i = 1; i < 3; i++) {
+                    var p = eval("player" + i);
+                    document.querySelector("#video" + i + "delay").innerHTML = Math.round((d.getTime() / 1000) - Number(p.timeAsUTC()));
+                    document.querySelector("#video" + i + "buffer").innerHTML = p.getBufferLength() + "s";
+                }
+
+
+            }, 1000);
+
+        }
+    </script>
+    <style>
+
+        table {
+            border-spacing: 10px;
+        }
+
+        video {
+            width: 320px;
+            height: 180px;
+        }
+
+        .clock {
+            border: 1px solid #333;
+            color: #000;
+            font-size: 60pt
+        }
+    </style>
+</head>
+
+<body>
+This sample illustrates how to use the catchup mechanism to synchronize media playback of two videos.
+<table>
+    <tr>
+        <td>
+            2s segment, 10s target latency<br/>
+            <video id="video1" controls="true">
+            </video>
+            <br/>
+            Seconds behind live: <span id="video1delay"></span><br/>
+            Buffer length: <span id="video1buffer"></span>
+        </td>
+        <td>
+            2s segment, 10s target latency<br/>
+            <video id="video2" controls="true">
+            </video>
+            <br/>
+            Seconds behind live: <span id="video2delay"></span><br/>
+            Buffer length: <span id="video2buffer"></span>
+        </td>
+        <td>Wall clock time
+            <div class="clock">
+                <span id="min"> </span>:<span id="sec"></span>
+            </div>
+        </td>
+    </tr>
+    </tr>
+</table>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        init();
+    });
+</script>
+<script src="../highlighter.js"></script>
+</body>
+</html>
+
diff --git a/samples/low-latency/index.html b/samples/low-latency/index.html
@@ -33,11 +33,13 @@
             liveCatchupLatencyThreshold = parseFloat(document.getElementById("catchup-threshold").value, 10);
 
             player.updateSettings({
-                'streaming': {
-                    'liveDelay': targetLatency,
-                    'liveCatchUpMinDrift': minDrift,
-                    'liveCatchUpPlaybackRate': catchupPlaybackRate,
-                    'liveCatchupLatencyThreshold': liveCatchupLatencyThreshold,
+                streaming: {
+                    liveDelay: targetLatency,
+                    liveCatchup: {
+                        minDrift: minDrift,
+                        playbackRate: catchupPlaybackRate,
+                        latencyThreshold: liveCatchupLatencyThreshold,    
+                    }
                 }
             });
         }
@@ -168,7 +170,7 @@ <h3>Live catchup latency threshold</h3>
             var currentLatency = parseFloat(player.getCurrentLiveLatency(), 10);
             document.getElementById("latency-tag").innerHTML = currentLatency + " secs";
 
-            document.getElementById("mindrift-tag").innerHTML = settings.streaming.liveCatchUpMinDrift + " secs";
+            document.getElementById("mindrift-tag").innerHTML = settings.streaming.liveCatchup.minDrift + " secs";
 
             var currentPlaybackRate = player.getPlaybackRate();
             document.getElementById("playbackrate-tag").innerHTML = Math.round(currentPlaybackRate * 100) / 100;

diff --git a/samples/low-latency/l2all_index.html b/samples/low-latency/l2all_index.html
@@ -41,11 +41,13 @@
             liveCatchupLatencyThreshold = parseFloat(document.getElementById("catchup-threshold").value, 10);
 
             player.updateSettings({
-                'streaming': {
-                    'liveDelay': targetLatency,
-                    'liveCatchUpMinDrift': minDrift,
-                    'liveCatchUpPlaybackRate': catchupPlaybackRate,
-                    'liveCatchupLatencyThreshold': liveCatchupLatencyThreshold,
+                streaming: {
+                    liveDelay: targetLatency,
+                    liveCatchup: {
+                        minDrift: minDrift,
+                        playbackRate: catchupPlaybackRate,
+                        latencyThreshold: liveCatchupLatencyThreshold,
+                    }
                 }
             });
         }
@@ -187,7 +189,7 @@ <h3>Catch-up playback rate</h3>
             var currentLatency = parseFloat(player.getCurrentLiveLatency(), 10);
             document.getElementById("latency-tag").innerHTML = currentLatency + " secs";
 
-            document.getElementById("mindrift-tag").innerHTML = settings.streaming.liveCatchUpMinDrift + " secs";
+            document.getElementById("mindrift-tag").innerHTML = settings.streaming.liveCatchup.minDrift + " secs";
 
             var currentPlaybackRate = player.getPlaybackRate();
             document.getElementById("playbackrate-tag").innerHTML = Math.round(currentPlaybackRate * 100) / 100;

diff --git a/samples/offline/dashjs_config.json b/samples/offline/dashjs_config.json
@@ -24,9 +24,13 @@
         "segmentOverlapToleranceTime": 0.2,
         "useSuggestedPresentationDelay": false,
         "manifestUpdateRetryInterval": 100,
-        "liveCatchUpMinDrift": 0.02,
-        "liveCatchUpMaxDrift": 0,
-        "liveCatchUpPlaybackRate": 0.5,
+        "liveCatchup": {
+            "minDrift": 0.02,
+            "maxDrift": 0,
+            "playbackRate": 0.5,
+            "latencyThreshold": null,
+            "enabled": false
+        },
         "lastBitrateCachingInfo": { "enabled": true, "ttl": 360000},
         "lastMediaSettingsCachingInfo": { "enabled": true, "ttl": 360000},
         "cacheLoadThresholds": {"video": 50, "audio": 5},

diff --git a/samples/samples.json b/samples/samples.json
@@ -74,6 +74,11 @@
                 "description": "Example showing the combined effects of segment duration and the setLiveDelay MediaPlayer method on the latency of live stream playback.",
                 "href": "live-streaming/live-delay-comparison-using-setLiveDelay.html"
             },
+            {
+                "title": "Synchronized live playback with the catchup mode",
+                "description": "Example showing a synchronized live playback of two videos using the live playback catchup mode.",
+                "href": "live-streaming/synchronized-live-playback.html"
+            },
             {
                 "title": "Low latency",
                 "description": "Example showing how to use dash.js to play low latency streams.",