Adjust low latency sample to include catchup playback rate threshold (#…

…3336)
Dash-Industry-Forum · Jul 15, 2020 · 857b49c · 857b49c
1 parent c67d3d3
commit 857b49c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/samples/low-latency/index.html b/samples/low-latency/index.html
@@ -10,7 +10,7 @@
     <!--<script src="../../dist/dash.all.min.js"></script>-->
 
     <script class="code">
-        var player, targetLatency, minDrift, catchupPlaybackRate;
+        var player, targetLatency, minDrift, catchupPlaybackRate, liveCatchupLatencyThreshold;
 
         function init() {
             var video,
@@ -19,7 +19,7 @@
             video = document.querySelector("video");
             player = dashjs.MediaPlayer().create();
             player.initialize(video, url, true);
-            player.updateSettings({ 'streaming': { 'lowLatencyEnabled': true }});
+            player.updateSettings({'streaming': {'lowLatencyEnabled': true}});
 
             applyParameters();
 
@@ -30,12 +30,14 @@
             targetLatency = parseFloat(document.getElementById("target-latency").value, 10);
             minDrift = parseFloat(document.getElementById("min-drift").value, 10);
             catchupPlaybackRate = parseFloat(document.getElementById("catchup-playback-rate").value, 10);
+            liveCatchupLatencyThreshold = parseFloat(document.getElementById("catchup-threshold").value, 10);
 
             player.updateSettings({
                 'streaming': {
                     'liveDelay': targetLatency,
                     'liveCatchUpMinDrift': minDrift,
-                    'liveCatchUpPlaybackRate': catchupPlaybackRate
+                    'liveCatchUpPlaybackRate': catchupPlaybackRate,
+                    "liveCatchupLatencyThreshold": liveCatchupLatencyThreshold,
                 }
             });
         }
@@ -77,7 +79,7 @@
         }
 
         .help-container > div {
-            width: 33.3%;
+            width: 25.0%;
             padding: 1em;
             box-sizing: border-box;
         }
@@ -97,8 +99,12 @@
                     <fieldset>
                         <legend>Configurable parameters</legend>
                         <p>Target Latency (secs): <input type="number" id="target-latency" value="3" min="0"></p>
-                        <p>Min. drift (secs): <input type="number" id="min-drift" value="0.05" min="0.0" max="0.5" step="0.01"></p>
-                        <p>Catch-up playback rate (%): <input type="number" id="catchup-playback-rate" value="0.5" min="0.0" max="0.5" step="0.01"></p>
+                        <p>Min. drift (secs): <input type="number" id="min-drift" value="0.05" min="0.0" max="0.5"
+                                                     step="0.01"></p>
+                        <p>Catch-up playback rate (%): <input type="number" id="catchup-playback-rate" value="0.5"
+                                                              min="0.0" max="0.5" step="0.01"></p>
+                        <p>Live catchup latency threshold (secs): <input type="number" id="catchup-threshold" value="30">
+                        </p>
                         <button type="submit">Apply</button>
                     </fieldset>
                 </form>
@@ -110,6 +116,7 @@
                     <li>Latency: <span id="latency-tag"></span></li>
                     <li>Min. drift: <span id="mindrift-tag"></span></li>
                     <li>Playback rate: <span id="playbackrate-tag"></span></li>
+                    <li>Live catchup latency threshold : <span id="catchup-threshold-tag"></span></li>
                     <li>Buffer: <b><span id="buffer-tag"></span></b></li>
                 </ul>
             </fieldset>
@@ -120,28 +127,41 @@
     <div class="help-container">
         <div id="latency-help">
             <h3>Latency</h3>
-            <p>Lowering this value will lower latency but may decrease the player's ability to build a stable buffer.</p>
-            <p><a href="http://cdn.dashjs.org/latest/jsdoc/module-MediaPlayer.html#setLiveDelay__anchor" target="_blank">setLiveDelay() doc</a></p>
+            <p>Lowering this value will lower latency but may decrease the player's ability to build a stable
+                buffer.</p>
+            <p><a href="http://cdn.dashjs.org/latest/jsdoc/module-Settings.html#~StreamingSettings__anchor"
+                  target="_blank">setLiveDelay() doc</a></p>
         </div>
 
         <div id="min-drift-help">
             <h3>Min. drift</h3>
             <p>Minimum latency deviation allowed before activating catch-up mechanism.</p>
-            <p><a href="http://cdn.dashjs.org/latest/jsdoc/module-MediaPlayer.html#setLowLatencyMinDrift__anchor" target="_blank">setLowLatencyMinDrift() doc</a></p>
+            <p><a href="http://cdn.dashjs.org/latest/jsdoc/module-Settings.html#~StreamingSettings__anchor"
+                  target="_blank">setLowLatencyMinDrift() doc</a></p>
         </div>
 
         <div id="catch-up-playback-rate-help">
             <h3>Catch-up playback rate</h3>
             <p>Maximum catch-up rate, as a percentage, for low latency live streams.</p>
-            <p><a href="http://cdn.dashjs.org/latest/jsdoc/module-MediaPlayer.html#setCatchUpPlaybackRate__anchor" target="_blank">setCatchUpPlaybackRate() doc</a></p>
+            <p><a href="http://cdn.dashjs.org/latest/jsdoc/module-Settings.html#~StreamingSettings__anchor"
+                  target="_blank">setCatchUpPlaybackRate() doc</a></p>
+        </div>
+        <div id="catch-up-playback-threshold-help">
+            <h3>Live catchup latency threshold</h3>
+            <p> Use this parameter to set the maximum threshold for which live catch up is applied. For instance, if
+                this value is set to 8 seconds, then live catchup is only applied if the current live latency is equal
+                or below 8 seconds. The reason behind this parameter is to avoid an increase of the playback rate if the
+                user seeks within the DVR window.</p>
+            <p><a href="http://cdn.dashjs.org/latest/jsdoc/module-Settings.html#~StreamingSettings__anchor"
+                  target="_blank">setCatchUpPlaybackRate() doc</a></p>
         </div>
     </div>
 </div>
 <script>
     document.addEventListener("DOMContentLoaded", function () {
         var player = init();
 
-        setInterval(function() {
+        setInterval(function () {
             var dashMetrics = player.getDashMetrics();
             var settings = player.getSettings();
 
@@ -155,6 +175,9 @@ <h3>Catch-up playback rate</h3>
 
             var currentBuffer = dashMetrics.getCurrentBufferLevel("video");
             document.getElementById("buffer-tag").innerHTML = currentBuffer + " secs";
+
+            document.getElementById("catchup-threshold-tag").innerHTML = settings.streaming.liveCatchupLatencyThreshold + " secs";
+
         }, 200);
     });
 </script>

diff --git a/src/streaming/models/MediaPlayerModel.js b/src/streaming/models/MediaPlayerModel.js
@@ -148,12 +148,13 @@ function MediaPlayerModel() {
     function getLiveCatchupLatencyThreshold() {
         try {
             const liveCatchupLatencyThreshold = settings.get().streaming.liveCatchupLatencyThreshold;
+            const liveDelay = getLiveDelay();
 
             if (liveCatchupLatencyThreshold !== null && !isNaN(liveCatchupLatencyThreshold)) {
-                return liveCatchupLatencyThreshold;
+                return Math.max(liveCatchupLatencyThreshold, liveDelay);
             }
 
-            const liveDelay = getLiveDelay();
+
             const liveCatchupMinDrift = settings.get().streaming.liveCatchUpMinDrift;
             const maximumLiveDelay = !isNaN(liveDelay) && liveDelay ? !isNaN(liveCatchupMinDrift) ? settings.get().streaming.liveCatchUpMinDrift + getLiveDelay() : getLiveDelay() : NaN;