This tutorial explains step by step how to use Streamroot DNA™ 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 DNA 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.