Lumen help

Integrating Mesh Delivery with Shaka Player

Introduction

Mesh Delivery for Streaming can be integrated into your website with Shaka Player.

We have built an optimized wrapper for Shaka Player from v2.3.+.

Support for SegmentBase manifests can be done on demand.

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

Step 1: Install Shaka Player and Mesh Delivery builds

You will first need to install the builds for Shaka Player and the appropriate Mesh Delivery build. This can be done in two ways.

From our CDN

Include these sources in the HTML <head>:

                            <!-- Shaka Player build -->
<script src="//cdnjs.cloudflare.com/ajax/libs/shaka-player/2.4.6/shaka-player.compiled.js"></script>

<!-- Mesh Delivery plugin -->
<script src="//cdn.streamroot.io/shakaplayer-dna-wrapper/1/stable/shakaplayer-dna-wrapper.js"></script>

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.

Install runtime and dev dependencies:

                npm install @streamroot/shakaplayer-dna-wrapper

In your application, import/require the package you want to use, like this example:

                import ShakaPlayerDnaWrapper from '@streamroot/shakaplayer-dna-wrapper';

Step 2: Set up Shaka Player and Mesh Delivery

In the HTML <body> or with npm

                            <video id="demoplayer"></video>
<script>
    var videoElement = document.getElementById('demoplayer');
    var shakaplayer = new shaka.Player(videoElement);
    var playerConfig = {};
    var dnaConfig = {};
    var wrapper = new ShakaPlayerDnaWrapper(shakaplayer, "YOUR_STREAMROOT_KEY", dnaConfig);
    shakaplayer.configure(playerConfig);
    shakaplayer.load("YOUR_PLAYLIST_URL");
</script>

            
        

Parameter name	Mandatory	Description
dnaConfig	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 under "recommended options" 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 playlist.

Step 3: Visualize Mesh Delivery

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

Recommended Options

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