Lumen help

Integrating Mesh Delivery with Bitmovin Player

Introduction

Step 1: Install Bitmovin Player and Mesh Delivery builds

From our CDN

                <!-- Bitmovin Player build -->
<script src="//bitmovin-a.akamaihd.net/bitmovin-player/stable/7.8/bitmovinplayer.js"></script>

<!-- Mesh Delivery plugin -->
<script src="//cdn.streamroot.io/bitmovin-dna-plugin/1/stable/bitmovin-dna-plugin.js?srKey=YOUR_STREAMROOT_KEY"></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
            

Step 2: Set up Bitmovin and Mesh Delivery

In the HTML <body>

                <div id="demoplayer"></div>
<script>
  var bitmovinConfig = {
    key: 'YOUR_BITMOVIN_KEY',
    source: {
      //Only one playlist URL must be set at a time.
      hls: 'YOUR_PLAYLIST_URL',
      dash: 'YOUR_PLAYLIST_URL',
      smooth: 'YOUR_PLAYLIST_URL'
    },
    dnaConfig: {},
    live:{
      lowLatency:{
        targetLatency: 30
      }
    },
    // To set latency for Bitmovin v7
    streamroot: {
      v7LiveDelay: 20
    }
  };
  window.addEventListener("load", function() {
    player = new bitmovin.player.Player(
      document.getElementById("bitmovin-player"),
      bitmovinConfig
    );
    player
      .load({
        //Only one playlist URL must be set at a time.
        hls: "YOUR_PLAYLIST_URL"
        //dash: 'YOUR_PLAYLIST_URL',
        //smooth: 'YOUR_PLAYLIST_URL'
      })
      .then(function() {
        player.play();
      });
  });
</script>

            

With npm

                import { Player } from 'bitmovin-player';
import { bitmovinDnaExtend } from '@streamroot/bitmovin-dna-plugin';

// Extend player class with DNA
var DNABitmovinPlayer = bitmovinDnaExtend(Player, 'YOUR_STREAMROOT_KEY');

var bitmovinConfig = {
  key: 'YOUR_BITMOVIN_KEY',
  dnaConfig: {},
  live:{
    lowLatency:{
        targetLatency: 30
    }
  },
  // To set latency for Bitmovin v7
  streamroot: {
    v7LiveDelay: 20
  }
};

// Instantiate player
var player = new DNABitmovinPlayer(videoElement, bitmovinConfig);

// Load stream
player.load({
  //Only one playlist URL must be set at a time.
  hls: "YOUR_PLAYLIST_URL"
  //dash: 'YOUR_PLAYLIST_URL',
  //smooth: 'YOUR_PLAYLIST_URL'
});

            

Activating Mesh Delivery on Safari

                var conf = {
  key: "YOUR-BITMOVIN-KEY",
  source: {
    //Only one playlist URL must be set at a time.
    hls: 'YOUR_PLAYLIST_URL',
    dash: 'YOUR_PLAYLIST_URL',
    smooth: 'YOUR_PLAYLIST_URL'
  },
  playback: {
    preferredTech: [
       {player: 'html5', streaming: 'hls'}
   ]
 }
};

            

Parameters

Step 3: Visualize Mesh Delivery

Vizualization graph for Mesh Delivery