CDN Orchestrator Web Integration – Streamroot Documentation

This article details how to use CDN Orchestrator multi-CDN selector on web with any CDN Orchestrator compatible player & media Engine.

Warning
CDN Orchestrator is available in Lumen Libraries starting from Master Release DNA 2.10 (which corresponds to hlsjs-dna-wrapper 1.0.44 // dashjs-dna-wrapper 1.1.14). Check this page for more info on Master Releases and on which version of CDN Orchestrator wrapper/plugin to use.

⚠️ Note
CDN Orchestrator is compatible with all the web players listed in this page. In order to integrate, it is necessary to set the compassProperty in the dnaConfig.

dnaConfig : {
	"compassProperty": "YOUR_COMPASS_PROPERTY_NAME"
}

Steps to Integrate:

After setting up your compassProperty, you can follow these steps in order to integrate with CDN Orchestrator. The following example is for JW player.

1. Install the build

Include these sources in the HTML <head>:

<!-- JW Player build -->
<script src="//ssl.p.jwpcdn.com/player/v/8.6.3/jwplayer.js"></script>

<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/jwplayer-hls-dna-plugin/1/stable/jwplayer-hls-dna-plugin.js#streamrootKey=YOUR_STREAMROOT_KEY"></script>

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.

2. Set up JW Player and CDN Orchestrator

Include the following code in the HTML <body>:

HLS (hls.js)

<div id="demoplayer"></div>
<script>
  jwplayer.key = "YOUR_JWPLAYER_LICENSE";
  jwplayer('demoplayer').setup({
    file : "YOUR_PLAYLIST_URL",  // example: "http://cloudfront.delivery.com/bigBuckBunny.smil/playlist.m3u8"
    hlsjsConfig: {},
    dnaConfig : {
    	"compassProperty": "YOUR_COMPASS_PROPERTY_NAME"
    }
  })
</script>

MPEG-DASH (Shaka Player)

<div id="demoplayer"></div>
<script>
  jwplayer.key = "YOUR_JWPLAYER_LICENSE";
  jwplayer('demoplayer').setup({
    file : "YOUR_PLAYLIST_URL",  //example: "http://cloudfront.delivery.com/bigBuckBunny/manifest.mpd"
    shakaConfig: {},
    dnaConfig : {
    	compassProperty: "YOUR_COMPASS_PROPERTY_NAME"
    }
  })
</script>

Parameter name	Mandatory	Description
dnaConfig	No	The object in which you can pass Streamroot options.
compassProperty	No	The name of the Compass property you want to use. See Step 3 of this page for more details.
YOUR_PLAYLIST_URL	Yes	Your HLS playlist (manifest) URL.

3. Visualize Streamroot.

In order to verify if Streamroot was correctly configured, please install our Compass Graphs

Optimize Player and CDN Orchestrator interaction

To improve the behavior of Orchestrator, we recommend setting timeouts on chunk and manifest requests when possible. This will trigger CDN switch if possible.

If the player's default behavior isn't enough, we recommend, when possible, setting requests timeouts values to at least twice the chunk duration.

Here are some examples for most of our supported players.

Hls.js

var hlsjsConfig = {
   "fragLoadingTimeOut": 4000,
   "manifestLoadingTimeOut": 4000,
   "levelLoadingTimeOut": 4000,
}

More on Hls.js parameters in their API Documentation.

These parameters also works with players based on Hls.js (Video.js, JW Player, Flowplayer; Clappr ...)

Shaka Player

"streaming": {
    "retryParameters": {
        "timeout": 4000, // timeout in ms, after which we abort; 0 means never
    }
}

More on Shaka Player configurations in their Documentation.

These configurations also works with players based on Shaka Player (JW Player)

Bitmovin

Bitmovin does not abort slow request. We've added an ability to add a forced timeout to chunk and/or manifest requests.

"streamroot": {
  "manifestTimeout": 4000, // In ms, 0 means no timeout
  "segmentTimeout": 4000, // In ms, 0 menas no timeout
}

Activating Streamroot on Safari

On Safari, the stream will be played through the Safari Native Player by default (see this article from Bitmovin on the subject). In order for CDN Orchestrator to be activated on Safari, you will need to configure the player to use Bitmovin HLS playback. To do so, add a preferredTech in the Bitmovin configuration object.

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'}
   ]
 }
};

Web