Lumen help
Introduction
Mesh Delivery for Streaming can be integrated into your website with the video player of your choice in just a few simple steps. In this quick start guide, we will cover how to set up Mesh Delivery for Streaming with three popular video players - Hls.js, Dash.js, and Shaka Player. 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?
Step 1: Install the video player and Mesh Delivery builds
You will first need to install the builds for the video player and the appropriate Mesh Delivery build. This can be done in two ways.
From our CDN
Include these sources in the HTML <head>:
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. |
Using npm
Install runtime and dev dependencies:
In your application, import/require the package you want to use, like this example:
Install runtime and dev dependencies:
In your application, import/require the package you want to use, like this example:
Install runtime and dev dependencies:
In your application, import/require the package you want to use, like this example:
Step 2: Set up the video player and Mesh Delivery
In the HTML <body> or with npm
Parameter name |
Mandatory |
Description |
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. |
YOUR_PLAYLIST_URL |
Yes |
Your HLS playlist. |
Parameter name |
Mandatory |
Description |
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. |
YOUR_PLAYLIST_URL |
Yes |
Your DASH playlist. |
Parameter name |
Mandatory |
Description |
No |
The object in which you can pass Mesh Delivery options (property, contentIdGenerator, id, etc.). |
|
playerConfig |
No |
The object in which you can change Shaka Player options. More information can be found in the integration guide for Shaka player. |
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. |
YOUR_PLAYLIST_URL |
Yes |
Your DASH playlist. |
Step 3: Visualize Mesh Delivery
To verify that Mesh Delivery was correctly configured, please install our Mesh Delivery graphs.
Recommended 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:
For optimal performance with VOD content, we recommend the following values:
Mesh Delivery Termination
If you are going to discard or not use the MediaEngine instance anymore, make sure to properly terminate the Mesh Delivery wrapper manually, by calling the destroy() method of the DashJsDnaWrapper class.
Other Recommendations
For optimal performance with live content, we recommend setting the following values in the player options:
Mesh Delivery currently has compatibility issues when BOLA is activated on live streams; VOD is not affected. We highly recommend deactivating BOLA for live streaming including DVR streams.
For versions 2.6.0 and later, by default dash.js dynamically switches between throughput-based rules and BOLA. Use the following to disable BOLA and use throughput strategy instead (see dash.js documentation).
Shaka Player provides a variety of configuration parameters that can be set in the playerConfig object for fine-tuning. You can learn more in Shaka’s API Documentation.
For optimal performance, we recommend setting the following values:
For live streams, "defaultPresentationDelay" should be set as shown above or directly in your manifest in "suggestedPresentationDelay".
Since v3.0, the "defaultPresentationDelay" config now affects both DASH and HLS content.
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