Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adjust low latency sample to include catchup playback rate threshold #3336

Merged
merged 1 commit into from Jul 15, 2020
Merged

Adjust low latency sample to include catchup playback rate threshold #3336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
45 changes: 34 additions & 11 deletions samples/low-latency/index.html
View file
Open in desktop
Expand Up @@ -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,
Expand All @@ -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();

Expand All @@ -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,
}
});
}
Expand Down Expand Up @@ -77,7 +79,7 @@
}

.help-container > div {
width: 33.3%;
width: 25.0%;
padding: 1em;
box-sizing: border-box;
}
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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();

Expand All @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions src/streaming/models/MediaPlayerModel.js
View file
Open in desktop
Expand Up @@ -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;

Expand Down