Lumen help

Integrating Mesh Delivery with Dash.js

Introduction

Step 1: Install Dash.js and Mesh Delivery builds

From our CDN

                <!-- Dash.js build -->
<script src="//cdn.dashjs.org/v2.9.2/dash.all.min.js"></script>

<!-- Mesh Delivery wrapper -->
<script src="//cdn.streamroot.io/dashjs-dna-wrapper/1/stable/dashjs-dna-wrapper.js?srKey=YOUR_STREAMROOT_KEY"></script>

            

To get the highest flexibility of deployment, we recommend setting the StreamrootKey in the Query Parameter "srKey".

 

Parameter name

Mandatory

Description

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.

Using npm

Install runtime and dev dependencies:

                npm install @streamroot/dashjs-dna-wrapper
            

In your application, import/require the package you want to use, like this example:

                import DashDnaWrapper from '@streamroot/dashjs-dna-wrapper';
            

Step 2: Set up Dash.js and Mesh Delivery

In the HTML <body> or with npm

Step 3: Visualize Mesh Delivery

Vizualization graph for Mesh Delivery

Recommended 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,
  }
}

            
                mediaPlayer.setABRStrategy("abrThroughput")
            
                player.updateSettings({
  "streaming": {
    "abr": {
      "ABRStrategy": "abrThroughput",
    }
  }
}