Menu

Lumen help

Integrating Mesh Delivery with Shaka Player v1

Introduction

Mesh Delivery for Streaming can be integrated into your website with Shaka Player v1 using a PlayerInteractor module.

 

We have built an optimized wrapper for Shaka Player from v1.5.+.

 

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: Install Shaka Player and Mesh Delivery builds

From our CDN

Include these sources in the HTML <head>:

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

<!-- Mesh Delivery builds -->
<script src="https://cdn.streamroot.io/xhr-proxy/1/beta/xhr-proxy.js"></script>
<script src="https://cdn.streamroot.io/shakaplayer1-interactor/1/beta/shakaplayer1-interactor.js"></script>

Step 2: Set up Shaka Player and Mesh Delivery

In the HTML <body>

                <video id="demoplayer"></video>
<script>
  var videoElement = document.getElementById("demoplayer");
  var player = new shaka.player.Player(videoElement);

  // Link interactor to the player
  // It must ALWAYS be called before the `load` method of the player
  StreamrootShakaPlayer1Interactor.create()
    .streamrootKey("<YOUR_STREAMROOT_KEY>")
    .streamrootConfig({})
    .linkPlayer(player);
  
  var contentUrl = "<YOUR_PLAYLIST_URL>";
  var playerConfig = { streamBufferSize: 30 };
  var estimator = new shaka.util.EWMABandwidthEstimator();
  var source = new shaka.player.DashVideoSource(contentUrl, null, estimator);

  player.configure(playerConfig);
  player.load(source);
</script>

Parameter name

Mandatory

Description

streamrootConfig

No

The object in which you can pass Mesh Delivery options (property, contentIdGenerator, id, etc.).

linkPlayer(PLAYER)

No

The player instance used in the page, which needs to be linked to Mesh Delivery.

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.

Vizualization graph for Mesh Delivery

Recommended Shaka Player 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:

                var playerConfig = {
    streamBufferSize: 30
},

For live streams, we recommend setting "suggestedPresentationDelay" to 30 seconds in your manifest.

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.