This tutorial provides a step-by-step guide to using CDN Mesh Delivery with dash.js, the reference MPEG-DASH player developed and maintained by DASH-IF.
We have built an optimized wrapper for Dash.js from v2.6.0.
In order to have a fully working integration with Dash.js v3.0.0, you must use our wrapper starting from v1.2.x (available since DNA 2.17)
Not into tutorials? |
Step 1: Install Dash.js and Streamroot build
From our CDN
Include these sources in the HTML <head>:
<!-- Dash.js build -->
<script src="//cdn.dashjs.org/v2.9.2/dash.all.min.js"></script>
<!-- Streamroot wrapper -->
<script src="//cdn.streamroot.io/dashjs-dna-wrapper/1/stable/dashjs-dna-wrapper.js"></script>Using npm
Install runtime and dev dependencies:
npm install @streamroot/dashjs-dna-wrapperIn your application, import/require the package you want to use, similar to this example:
import DashDnaWrapper from '@streamroot/dashjs-dna-wrapper';
Step 2: Set up Dash.js and Streamroot
In the HTML <body> or with npm
<video id="demoplayer"></video>
<script>
var player = dashjs.MediaPlayer().create();
var dnaConfig = {};
var wrapper = new DashjsDnaWrapper(player, 'YOUR_STREAMROOT_KEY', dnaConfig);
var videoElement = document.getElementById("demoplayer");
player.getDebug().setLogToBrowserConsole(false);
player.initialize(videoElement, 'YOUR_PLAYLIST_URL', true);
</script>
| Parameter name | Mandatory | Description |
|---|---|---|
| dnaConfig | No |
The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.). |
| YOUR_STREAMROOT_KEY | Yes | The unique Streamroot key that we have assigned to you; make sure it is identical to the one provided in the Account section of your dashboard. |
| YOUR_PLAYLIST_URL | Yes | Your DASH playlist. |
Step 3: Visualize Streamroot
| In order to verify if Streamroot was correctly configured, please install our Mesh Delivery Graphs. |
Recommended dash.js options
To get the best performance with live content, we recommend setting the following value in the player options:
// 30s latency
player.setLiveDelay(30);
// Or 15 fragments, in the case fragment duration is 2s
player.setLiveDelayFragmentCount(15);player.updateSettings({
"streaming": {
// 30s latency
"liveDelay": 30s,
// Or 15 fragments, in the case fragment duration is 2s
"liveDelayFragmentCount": 15,
}
}
The CDN Mesh Delivery module currently has compatibility issues when BOLA is activated on live streams. However, VoD is fine. We highly recommend you to deactivate BOLA for live streaming (including DVR streams).
For versions 2.6.0 and later, by default dash.js dynamically switches between throughput based rules and BOLA. Use this to disable BOLA (see dash.js documentation).
mediaPlayer.setABRStrategy("abrThroughput")player.updateSettings({
"streaming": {
"abr": {
"ABRStrategy": "abrThroughput",
}
}
}If you are going to discard or not use the MediaEngine instance anymore, please make sure to clean the CDN Mesh Delivery wrapper manually, using : DashJsDnaWrapper.destroy().
For example:
// Reset the player before discarding it
player.reset();
// Destroy the wrapper
wrapper.destroy();
// It is not recommended to use your player after this.