Lumen help

Integrating Mesh Delivery with Clappr

Introduction

Step 1: Install Clappr and Mesh Delivery builds

                <!-- Clappr build -->
<script src="//cdn.jsdelivr.net/npm/clappr@0.3.1/dist/clappr.min.js"></script>

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

Step 2: Set up Clappr and Mesh Delivery

Include the following code in the HTML <body> :

                <div id="demoplayer"></div>
<script>
  var player = new Clappr.Player({
    source: "YOUR_PLAYLIST_URL", 
    parentId: "#demoplayer",
    plugins: { 
      playback: [HlsDnaPlugin]
    },
    dnaConfig: {},
    hlsjsConfig: {},
  });
</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
}