Integrating Bitmovin Player with Streamroot

Learn how to integrate Streamroot's webRTC-based peer-to-peer delivery technology for Live and VoD use cases with the Bitmovin Player Web SDK.

Suggest Edits

Requirements

A Streamroot account to obtain a STREAMROOT_KEY for your Streamroot DNA configuration
A Bitmovin Account to obtain a BITMOVIN_PLAYER_KEY
Bitmovin Web SDK v8.1 or higher

Installation

CDN hosted version

Include these sources in the HTML <head>. Make sure to replace YOUR_STREAMROOT_KEY in the Streamroot Plugin Source URL with our own STREAMROOT_KEY.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bitmovin Player build -->
    <script src="//cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
    <!-- Streamroot plugin -->
    <script src="//cdn.streamroot.io/bitmovin-dna-plugin/1/stable/bitmovin-dna-plugin.js#streamrootKey=YOUR_STREAMROOT_KEY"></script>
</head>
<body>
  <!-- any code -->
</body>
</html>

NPM

<!-- Bitmovin Player build -->
npm install bitmovin-player -S

<!-- Streamroot plugin -->
npm install @streamroot/bitmovin-dna-plugin

Configuration

CDH hosted version

For a list of Streamroot dnaConfig parameters please check out their documentation.

<div id="my-player"></div>
<script>
  var bitmovinConfig = {
    key: 'BITMOVIN_PLAYER_KEY',
    dnaConfig: {},
    live: {
      lowLatency:{
        targetLatency: 30
      }
    }
  };
  window.addEventListener("load", function() {
    player = new bitmovin.player.Player(
      document.getElementById("bitmovin-player"),
      bitmovinConfig
    );
    player
      .load({
        //Streamroot DNA requirement: 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>

NPM bundle

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

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

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

Enabling Streamroot on Safari / macOS

On Safari/macOS, the stream will be played through the Safari Native Player by default. In order for Streamroot DNA to be activated on Safari, you will need to configure the player to use Bitmovin HLS HTML5 playback by default, if supported. To do so, add a preferredTech in the Bitmovin configuration object.

var playerConfig = {
  key: "YOUR-BITMOVIN-KEY",
  playback: {
    preferredTech: [
       {player: 'html5', streaming: 'hls'}
   ]
 }
};

Hint: This applies to Safari on macOS only. In Safari on iOS, only Safari's native player is allowed to be used due to restrictions from Apple.

Full example

A full example is available on Streamroot's Github Repository. An actual demo showcasing the Streamroot plugin and the Bitmovin Player is available here.

Updated about 1 year ago