Note
Our previous version of the wrapper can still be accessed here.

If you are already using a previous version of the wrapper, more detailed information about what has changed can be found in this Documentation.

Supported Versions

We have built an optimized wrapper for Dash.js from v2.6.0.

Step 1: Install Dash.js and Streamroot build

From our CDN

Include this sources in the HTML <head>.

<!-- Dash.js build -->
<script src="//cdn.dashjs.org/v2.6.0/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-wrapper

In your application import/require the package you want to use as in the 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 ...).
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 is correctly configurated, please install our DNA Graphs.

Recommended dash.js options

Streamroot DNA module currently has compatibility issues when BOLA is activated on live streams. 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 mediaPlayer.setABRStrategy("abrThroughput") to disable BOLA (see dash.js documentation).

If you are going to discard or not use the MediaEngine instance anymore, please make sure to clean the Streamroot DNA wrapper manually, using : DashJsDnaWrapper.destroy().

In the example above:

// Reset the player before discarding it
player.reset();

// Destroy the wrapper
wrapper.destroy();

// It is not recommended to use your player after this.

Articles in this section