Menu

Lumen help

Integrating Mesh Delivery with Akamai Adaptive Media Player

Introduction

Mesh Delivery for Streaming can be integrated into your website with Akamai Adaptive Media Player (AMP) in just a few simple steps.

 

We have built an optimized plugin for Akamai Adaptive Media Player from v4.100.7. We support both HLS and DASH engine, and recommend configurations for both in this guide, use whichever is appropriate for your use case.

 

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 Example

Step 1: Install AMP and Mesh Delivery builds

Include these sources in the HTML <head>:

                <!-- AMP build -->
<script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=x.x.x"></script>

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

            
                <!-- AMP build -->
<script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=x.x.x"></script>

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

Step 2: Set up AMP and Mesh Delivery

Include the following code in the HTML <body> :

HLS & MPEG-DASH

                <div id="amp"></div>
<script>
    // Streamroot-injected informations
    var streamrootDna = {
        streamrootKey: 'YOUR_STREAMROOT_KEY',
        dnaConfig: {}
    };

    var hlsjsConfig = {}

    var config = {
        media: {
           src: 'YOUR_PLAYLIST_URL',
           type: 'application/x-mpegURL' //HLS
           type: 'application/dash+xml' //MPEG-DASH
        }
    };

    amp = akamai.amp.AMP.create("amp", config);
</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.

 

Step 3: Visualize Mesh Delivery

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

Vizualization graph for Mesh Delivery

Recommended Hls.js options

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
}

"liveSyncDuration" and "liveMaxLatencyDuration" are not needed for VOD streams.  

Recommended Dash.js options

 

For optimal performance with live content, we recommend setting the following values 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,
  }
}

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).

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

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.

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.