Menu

Lumen help

Integrating Mesh Delivery with Cloud Video Platform (Mpx Player)

Introduction

Mesh Delivery for Streaming can be integrated into your website with Mpx Platform, the video management system offered by Comcast Technology Solutions, in just a few simple steps.

 

We have built optimized plugins for the mpx player PDK 5. Streamroot plugin can be added directly from Comcast's Mpx console

 

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: Add Mesh Delivery as a custom script file

In the Mpx console, go to the Players > Advanced Settings.


Copy and paste the Mesh Delivery plugin URL in the "Custom script files" input.

                https://cdn.streamroot.io/mpx-hls-dna-plugin/1/stable/mpx-hls-dna-plugin.js?srKey=YOUR_STREAMROOT_KEY
            
                https://cdn.streamroot.io/mpx-dash-dna-plugin/1/stable/mpx-dash-dna-plugin.js?srKey=YOUR_STREAMROOT_KEY

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: Add Mesh Delivery options as a custom script

Declare Mesh Delivery options in a streamrootDna JSON and copy/paste it in the "Custom script" input, and click on 'Save' as shown in figure below.

                var streamrootDna = {
  "streamrootKey": "YOUR_STREAMROOT_KEY",
  "dnaConfig": {}
}

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.
Adding mesh delivery options on the Mpx console

Step 3: Visualize Mesh Delivery stats in your console

To display basic DNA stats in your browser console, copy/paste the following snippet in the "Custom script" input of your player:

                !function(){function n(){if(Streamroot.instances.length){var n=Streamroot.instances[0].stats,t=n.allContents.dnaDownload?n.allContents.dnaDownload/(n.allContents.dnaDownload+n.allContents.cdnDownload)*100:0,a={upload:o(n.allContents.dnaUpload),dna:o(n.allContents.dnaDownload),cdn:o(n.allContents.cdnDownload),efficiency:`${t}%`,peers:n.realtime.dnaSources};console.table(a)}else console.warn("Streamrooot not initialized")}function o(n,o=10){if(0===n)return"0B";var t=o+1||1,a=Math.floor(Math.log(n)/Math.log(1e3));return parseFloat((n/1e3**a).toFixed(t))+["B","KB","MB","GB","TB","PB","EB","ZB","YB"][a]}setInterval(()=>{n()},1e4),n()}();

You should have the following table, which is updated every 10 seconds:

Mesh Delivery stats on browser console

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.

 

You can change the Hls.js options by passing a hlsjsConfig JSON in the "Custom script" input.


To get the best performance with live content, we recommend setting the following values:

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

Otherwise, liveSyncDuration is not needed for VOD streams.  

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.