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.
Not into tutorials? |
This plugin has been specially built to work with the Mpx Platform. It currently supports HLS and MPEG-DASH Live and VoD streams.
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": {}
}
| 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. |
| dnaConfig | No |
The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.). |
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.