Lumen help

Quick Start: Setting up Mesh Delivery

Introduction

Step 1: Install the video player and Mesh Delivery builds

From our CDN

                <!-- Hls.js build -->
<script src="//cdn.jsdelivr.net/npm/hls.js@0.12.2/dist/hls.min.js"></script>

<!—Mesh Delivery wrapper -->
<script src="//cdn.streamroot.io/hlsjs-dna-wrapper/1/stable/hlsjs-dna-wrapper.js?srKey=YOUR_STREAMROOT_KEY"></script>

            
                <!-- Dash.js build -->
<script src="//cdn.dashjs.org/v2.9.2/dash.all.min.js"></script>

<!-- Mesh Delivery wrapper -->
<script src="//cdn.streamroot.io/dashjs-dna-wrapper/1/stable/dashjs-dna-wrapper.js?srKey=YOUR_STREAMROOT_KEY"></script>

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

Using npm

Install runtime and dev dependencies:

                npm install @streamroot/hlsjs-dna-wrapper
            

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

                import HlsjsDnaWrapper from '@streamroot/hlsjs-dna-wrapper';
            

Install runtime and dev dependencies:

                npm install @streamroot/dashjs-dna-wrapper
            

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

                import DashDnaWrapper from '@streamroot/dashjs-dna-wrapper';
            

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 the video player and Mesh Delivery

In the HTML <body> or with npm

                <video id="demoplayer"></video>
<script>
    var hlsjsConfig = {};
    var dnaConfig = {};
    var hls = new Hls(hlsjsConfig);
    var wrapper = new HlsjsDnaWrapper(hls, 'YOUR_STREAMROOT_KEY', dnaConfig);
    var video = document.getElementById('demoplayer');
    hls.loadSource('YOUR_PLAYLIST_URL');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
    });
</script>

            
                <video id="demoplayer"></video>
<script>
    var player = dashjs.MediaPlayer().create();
    var dnaConfig = {};
    var wrapper = new DashjsDnaWrapper(player, 'YOUR_STREAMROOT_KEY', dnaConfig);
    var videoElement = document.getElementById("demoplayer");
    player.getDebug().setLogToBrowserConsole(false);
    player.initialize(videoElement, 'YOUR_PLAYLIST_URL', true);
</script>

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

            

Step 3: Visualize Mesh Delivery

Vizualization graph for Mesh Delivery

Recommended Options

                var hlsjsConfig = {
   "maxBufferSize": 0,
   "maxBufferLength": 30,
   "liveSyncDuration": 30,
   "liveMaxLatencyDuration": Infinity
}

            
                var hlsjsConfig = {
   "maxBufferSize": 0,
   "maxBufferLength": 30
}

            
                // Reset the player before discarding it
player.reset();

// Destroy the wrapper
wrapper.destroy();

// It is not recommended to use your player after this.

            
                // 30s latency
player.setLiveDelay(30);

// Or 15 fragments, in the case fragment duration is 2s
player.setLiveDelayFragmentCount(15);

            
                player.updateSettings({
  "streaming": {
    // 30s latency
    "liveDelay": 30s,

    // Or 15 fragments, in the case fragment duration is 2s
    "liveDelayFragmentCount": 15,
  }
}

            
                mediaPlayer.setABRStrategy("abrThroughput")
            
                player.updateSettings({
  "streaming": {
    "abr": {
      "ABRStrategy": "abrThroughput",
    }
  }
}

            
                var playerConfig = {
    streaming: {
        bufferingGoal: 30,
        useNativeHlsOnSafari: false,
    },
    manifest: {
        dash: {
            defaultPresentationDelay: 30,
        },
    },
}

            
                var playerConfig = {
    streaming: {
        bufferingGoal: 30,
        useNativeHlsOnSafari: false,
    },
    manifest: {
        defaultPresentationDelay: 30,
    },
}