Lumen help

Integrating Mesh Delivery with Brightcove

Introduction

Mesh Delivery for Streaming can be integrated into your website with Brightcove in just a few simple steps.

Our plugin has been specifically built to work with the Brightcove Video Cloud Platform.

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

Demo

Step 1: Add Mesh Delivery plugins

Include these sources in the 'JavaScript' input under the 'Plugins' section of your Brightcove player, as shown in the screenshot below.

Mesh Delivery HLS source handler plugin

To add HLS playback support to Brightcove:

                //cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js

Mesh delivery plugin

Include these sources in the HTML <head>:

                            //cdn.streamroot.io/brightcove-hls-dna-plugin/1/stable/brightcove-hls-dna-plugin.js?srKey=YOUR_STREAMROOT_KEY
            
        

Adding Mesh Delivery plugins to Brightcove

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

Add the following 'Name':

                streamrootDna

And 'Options':

                            {
  "streamrootKey": "YOUR_STREAMROOT_KEY",
  "dnaConfig": {}
}

Adding mesh delivery options on Brightcove

Parameter name	Mandatory	Description
dnaConfig	No	The object in which you can pass Mesh Delivery options (property, contentIdGenerator, id, etc.).
hlsjsConfig	No	The object in which you can change hls.js options. More information can be found in the "Recommended options" section below.
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.

Note: If nothing is specified in the dnaConfig object, Brightcove will delete it from the 'Options'. This will not affect how the plugin works.

After publishing the player, changes take about 10 minutes to be applied.

Step 3: Visualize Mesh Delivery

To verify that Mesh Delivery was correctly configured, please install our Mesh Delivery graphs.

Note: To use Mesh Delivery graphs, publish your player using the 'Advanced' embed code. The graphs will not load with the standard (iframe) embed code.

Optional: Show quality selector

Include these sources in the 'JavaScript' input under the 'Plugins' section of your Brightcove player.

Mesh Delivery switcher plugin

                //cdn.streamroot.io/videojs-quality-picker/1/stable/vjs-quality-picker.js

Add the following 'Name' (No 'Options' needed):

                qualityPickerPlugin

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. For optimal performance with live content, we recommend the following values:

'Name' :

                streamrootHls

'Options' :

                            {
    "hlsjsConfig": {
        "maxBufferSize": 0,
        "maxBufferLength": 30,
        "liveSyncDuration": 30,
        "liveMaxLatencyDuration": 10000
    }
}

            
        

'LiveMaxLatencyDuration' accepts Infinity as value. Brightcove UI disallows this value; therefore, 10,000 or any other value well above actual latency should be set.

'liveSyncDuration' and 'liveMaxLatencyDuration' are not needed for VOD streams.

Note: If nothing is specified in the streamrootHls JSON, Brightcove will delete it from the 'Options'. This will not affect how the plugin works.

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.

Explore CDN services