Lumen help

Integrating Mesh Delivery with Shaka Player v1

Introduction

Step 1: Install Shaka Player and Mesh Delivery builds

From our CDN

                <!-- 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>

            

Step 3: Visualize Mesh Delivery

Vizualization graph for Mesh Delivery

Recommended Shaka Player Options

                var playerConfig = {
    streamBufferSize: 30
},