Lumen help

Integrating Mesh Delivery with Akamai Adaptive Media Player

Introduction

Step 1: Install AMP and Mesh Delivery builds

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

Step 3: Visualize Mesh Delivery

Vizualization graph for Mesh Delivery

Recommended Hls.js options

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

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

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

// Destroy the wrapper
wrapper.destroy();

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