This tutorial explains step by step how to use CDN Mesh Delivery with Mpx Platform, the video management system offered by Comcast Technology Solutions.

We have built optimized plugins for the mpx player PDK 5.

Streamroot plugin can be added directly from Comcast's Mpx console.

Step 1: Add Streamroot plugin as a custom script file

In the Mpx console, go to the PLAYERS section >> Advanced Settings.

Copy/paste the Streamroot plugin URL in the "Custom script files" input.

HLS

https://cdn.streamroot.io/mpx-hls-dna-plugin/1/stable/mpx-hls-dna-plugin.js

MPEG-DASH

https://cdn.streamroot.io/mpx-dash-dna-plugin/1/stable/mpx-dash-dna-plugin.js

Step 2: Add Streamroot options as a custom script 

Declare Streamroot options in a streamrootDna JSON and copy/paste it in the "Custom script" input:

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

 Then click on Save.

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:

Recommended hls.js options

hls.js has a wide 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.