Lumen help

Quick Start: Setting up Mesh Delivery

Introduction

Mesh Delivery for Streaming can be integrated into your website with the video player of your choice in just a few simple steps. In this quick start guide, we will cover how to set up Mesh Delivery for Streaming with three popular video players - Hls.js, Dash.js, and Shaka Player. The complete list of integrations we support and guides for setting them up can be found here. If you would like to integrate Mesh Delivery for streaming with a video player not on the list, write to us at cdnsupport@lumen.com and we will help you out.

Not into tutorials?

Code Examples

Demos

Step 1: Install the video player and Mesh Delivery builds

You will first need to install the builds for the video player and the appropriate Mesh Delivery build. This can be done in two ways.

From our CDN

Include these sources in the HTML <head>:

Hls.js
Dash.js
Shaka Player

                            <!-- Hls.js build -->
<script src="//cdn.jsdelivr.net/npm/hls.js@0.12.2/dist/hls.min.js"></script>

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

                            <!-- 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>

                            <!-- Shaka Player build -->
<script src="//cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.6/shaka-player.compiled.js"></script>

<!-- Mesh Delivery plugin -->
<script src="//cdn.streamroot.io/shakaplayer-dna-wrapper/1/stable/shakaplayer-dna-wrapper.js"></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

Hls.js
Dash.js
Shaka Player

Install runtime and dev dependencies:

                npm install @streamroot/hlsjs-dna-wrapper

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

                import HlsjsDnaWrapper from '@streamroot/hlsjs-dna-wrapper';

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';

Install runtime and dev dependencies:

                npm install @streamroot/shakaplayer-dna-wrapper

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

                import ShakaPlayerDnaWrapper from '@streamroot/shakaplayer-dna-wrapper';

Step 2: Set up the video player and Mesh Delivery

In the HTML <body> or with npm

Hls.js
Dash.js
Shaka Player

                            <video id="demoplayer"></video>
<script>
    var hlsjsConfig = {};
    var dnaConfig = {};
    var hls = new Hls(hlsjsConfig);
    var wrapper = new HlsjsDnaWrapper(hls, 'YOUR_STREAMROOT_KEY', dnaConfig);
    var video = document.getElementById('demoplayer');
    hls.loadSource('YOUR_PLAYLIST_URL');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
    });
</script>

            
        

Parameter name	Mandatory	Description
dnaConfig	No	The object in which you can pass Mesh Delivery options (property, contentIdGenerator, id, etc.).
hlsjsConfig	No	The object in which you can change hls.js options. More information can be found in the "Recommended options" section below.
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 HLS playlist.

                            <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 Mesh Delivery 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.

                            <video id="demoplayer"></video>
<script>
    var videoElement = document.getElementById('demoplayer');
    var shakaplayer = new shaka.Player(videoElement);
    var playerConfig = {};
    var dnaConfig = {};
    var wrapper = new ShakaPlayerDnaWrapper(shakaplayer, "YOUR_STREAMROOT_KEY", dnaConfig);
    shakaplayer.configure(playerConfig);
    shakaplayer.load("YOUR_PLAYLIST_URL");
</script>

            
        

Parameter name	Mandatory	Description
dnaConfig	No	The object in which you can pass Mesh Delivery options (property, contentIdGenerator, id, etc.).
playerConfig	No	The object in which you can change Shaka Player options. More information can be found in the integration guide for Shaka player.
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 Mesh Delivery

To verify that Mesh Delivery was correctly configured, please install our Mesh Delivery graphs.

Recommended Options

Hls.js
Dash.js
Shaka Player

hls.js has a variety of configuration parameters that can be instantiated in hlsjsConfig object for fine-tuning. You can learn more about them in their API Documentation. For optimal performance with live content, we recommend the following values:

                            var hlsjsConfig = {
   "maxBufferSize": 0,
   "maxBufferLength": 30,
   "liveSyncDuration": 30,
   "liveMaxLatencyDuration": Infinity
}

            
        

For optimal performance with VOD content, we recommend the following values:

                            var hlsjsConfig = {
   "maxBufferSize": 0,
   "maxBufferLength": 30
}

Mesh Delivery Termination

If you are going to discard or not use the MediaEngine instance anymore, make sure to properly terminate the Mesh Delivery wrapper manually, by calling the destroy() method of the DashJsDnaWrapper class.

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

// Destroy the wrapper
wrapper.destroy();

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

Other Recommendations

For optimal performance with live content, we recommend setting the following values in the player options:

Dash.js v2 method
Dash.js v3 settings path

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

            
        

Mesh Delivery currently has compatibility issues when BOLA is activated on live streams; VOD is not affected. We highly recommend deactivating 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 the following to disable BOLA and use throughput strategy instead (see dash.js documentation).

Dash.js v2 method
Dash.js v3 settings path

                mediaPlayer.setABRStrategy("abrThroughput")

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

            
        

Shaka Player provides a variety of configuration parameters that can be set in the playerConfig object for fine-tuning. You can learn more in Shaka’s API Documentation.

For optimal performance, we recommend setting the following values:

v2.5
v3

                            var playerConfig = {
    streaming: {
        bufferingGoal: 30,
        useNativeHlsOnSafari: false,
    },
    manifest: {
        dash: {
            defaultPresentationDelay: 30,
        },
    },
}

            
        

                            var playerConfig = {
    streaming: {
        bufferingGoal: 30,
        useNativeHlsOnSafari: false,
    },
    manifest: {
        defaultPresentationDelay: 30,
    },
}

            
        

For live streams, "defaultPresentationDelay" should be set as shown above or directly in your manifest in "suggestedPresentationDelay".

Since v3.0, the "defaultPresentationDelay" config now affects both DASH and HLS content.

And in just a few easy steps you should have a working integration of Mesh Delivery! We encourage you to explore our documentation to understand the various features we offer so you can make the most out of our product.

Explore CDN services