Skip to content

Commit

Permalink
Adding minDrift and catchUpPlaybackRate as configurable parameters
Browse files Browse the repository at this point in the history
  • Loading branch information
Adrián Caballero committed Nov 19, 2018
1 parent c1c574f commit b29a258
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 25 deletions.
1 change: 1 addition & 0 deletions AUTHORS.md
View file
Expand Up @@ -46,3 +46,4 @@
* @matt-hammond-bbc [Matt Hammond, BBC R&D]
* @siropeich [Siro Blanco, Epic Labs]
* @epiclabsDASH [Jesus Oliva, Epic Labs]
* @adripanico [Adrian Caballero, Epic Labs]
111 changes: 86 additions & 25 deletions samples/low-latency/index.html
View file
Expand Up @@ -10,7 +10,7 @@
<!--<script src="../../dist/dash.all.min.js"></script>-->

<script class="code">
var player, minDrift, maxDrift, targetLatency;
var player, targetLatency, minDrift, catchupPlaybackRate;

function init() {
var video,
Expand All @@ -20,6 +20,7 @@
player = dashjs.MediaPlayer().create();
player.initialize(video, url, true);
player.setLowLatencyEnabled(true);

applyParameters();

return player;
Expand All @@ -28,52 +29,108 @@
function applyParameters() {
targetLatency = parseFloat(document.getElementById("target-latency").value, 10);
player.setLiveDelay(targetLatency);

minDrift = parseFloat(document.getElementById("min-drift").value, 10);
player.setLowLatencyMinDrift(minDrift);

catchupPlaybackRate = parseFloat(document.getElementById("catchup-playback-rate").value, 10);
player.setCatchUpPlaybackRate(catchupPlaybackRate);
}
</script>

<style>
video {
width: 640px;
height: 360px;
}

.d-flex {
.video-wrapper {
display: flex;
flex-flow: row wrap;
margin-top: 1em;
}

.d-flex > div:nth-child(2) {
.video-wrapper > div:nth-child(2) {
margin-left: 25px;
}

video {
width: 640px;
height: 360px;
}

ul {
margin: 0;
}

input {
width: 2em;
width: 3em;
border: 1px solid gray;
padding: 0 4px 0 8px;
}

.help-container {
display: flex;
flex-flow: row wrap;
margin-top: 1em;
align-content: center;
background: white;
border: solid 1px #ddd;
padding: 0.5em;
}

.help-container > div {
width: 33.3%;
padding: 1em;
box-sizing: border-box;
}

.help-container h3 {
margin-top: 0;
}
</style>
</head>
<body>
<div>
<video controls="true">
</video>

<div class="d-flex">
<div class="video-wrapper">
<video controls="true"></video>
<div>
<p>Target Latency (secs): <input id="target-latency" value="3"></p>
<button onclick="applyParameters()">Apply</button>
<div>
<form action="javascript:applyParameters()">
<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>
<button type="submit">Apply</button>
</fieldset>
</form>
</div>
<br>
<fieldset>
<legend>Current values</legend>
<ul>
<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>Buffer: <b><span id="buffer-tag"></span></b></li>
</ul>
</fieldset>
</div>
<div>
<ul>
<li>Current latency: <span id="latency-tag"></span></li>
<li>Buffer: <span id="buffer-tag"></span></li>
<li>Playback rate: <span id="playbackrate-tag"></span></li>
</ul>
</div>

<p style="font-family:Arial,sans-serif; font-weight: bold; font-size: 1.1em">Concepts definition</p>
<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>
</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>
</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>
</div>
</div>
</div>
Expand All @@ -86,12 +143,16 @@
var dashMetrics = player.getDashMetrics();

var currentLatency = parseFloat(player.getCurrentLiveLatency(), 10);
var currentBuffer = dashMetrics.getCurrentBufferLevel(metrics);
document.getElementById("latency-tag").innerHTML = currentLatency + " secs";

var currentMinDrift = parseFloat(player.getLowLatencyMinDrift(), 10);
document.getElementById("mindrift-tag").innerHTML = currentMinDrift + " secs";

var currentPlaybackRate = player.getPlaybackRate();
document.getElementById("playbackrate-tag").innerHTML = Math.round(currentPlaybackRate * 100) / 100;

document.getElementById("latency-tag").innerHTML = currentLatency + " secs";
var currentBuffer = dashMetrics.getCurrentBufferLevel(metrics);
document.getElementById("buffer-tag").innerHTML = currentBuffer + " secs";
document.getElementById("playbackrate-tag").innerHTML = currentPlaybackRate;
}, 200);
});
</script>
Expand Down

0 comments on commit b29a258

Please sign in to comment.