Streamroot support - Radiant Media Player

Guide sections

Introduction
Scope of support
Usage example

Introduction

At Radiant Media Player we are committed to providing support for the best and latest technologies from the online video world. Peer-to-peer assisted streaming offers a great way to improve your viewer streaming experience and to reduce media content delivery cost. As such we have partnered with Streamroot in order to make the Streamroot technology available with Radiant Media Player.

To overcome the limitations of traditional unicast delivery, Streamroot has developed a hybrid video streaming solution based on peer-to-peer protocols. Working in tandem with a server or CDN architecture, Streamroot creates a mesh network of viewers watching the same content at the same time. Viewers can obtain video segments from the source that provides them most quickly - either the server or another viewer - optimizing data exchanges and freeing up congested servers.

In this article we will review how to use Streamroot peer-to-peer accelerated streaming with Radiant Media Player. Since Radiant Media Player version 4.7.0 we support Streamroot DNA 2.0.

Scope of support

Streamroot support in Radiant Media Player is currently available for HLS (hls.js) and DASH (Shaka player) in the following environments:

Chrome for Desktop
Firefox for Desktop
Chrome for Android
WebView for Android
macOS Safari (using forceHlsJSOnMacOSSafari setting)

Streamroot technology can be used for on-demand, live or DVR media content with Radiant Media Player. Where Streamroot support is not available (MS Edge, iOS Safari) the player will gracefully fallback to "classic" media content delivery (e.g. not peer-accelerated). You can obtain further technical information about Streamroot inner workings here.

Usage example

First you will need an account with Streamroot to obtain a streamrootKey.

Then we will set up our player code. In order to make your life easier we have built Streamroot support directly within Radiant Media Player - you just need to pass a streamrootConfig player setting object. This object references your streamrootKey and other Streamroot related options.

HLS streaming (hls.js)

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/4.10.1/js/rmp.min.js" 
  integrity="sha384-DF3999CAUqM17J5fZhwY6T+MYpp+r7XA3fR05zrbjip8mPxNoImWwIPcPnuPdVVV"
  crossorigin="anonymous"></script>
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
  // First we specify bitrates to feed to the player - HLS
  var bitrates = {
    hls: 'https://www.rmp-streaming.com/media/hls/test-vectors/bbb-abr/playlist.m3u8'
  };
  // Then we specify our streamrootConfig: object
  var streamrootConfig = {
    type: 'hlsjs',
    streamrootKey: 'your-streamroot-key',
    dnaConfig: {
      // example for passing dnaConfig setting
      //"fragmentsFetchedBeforeLoad": 3
    }
  };
  // Then we set our player settings
  var settings = {
    licenseKey: 'your-radiant-license-key',
    streamrootConfig: streamrootConfig,
    bitrates: bitrates,
    width: 640,
    height: 360, 
    poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-demo.jpg',
    // Recommended settings for HLS streaming
    hlsJSMaxBufferSize: 0,
    hlsJSMaxBufferLength: 30
    // For live HLS streaming use the following setting
    //hlsJSLiveSyncDuration: 30
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

DASH streaming (Shaka player)

<script src="https://cdn.radiantmediatechs.com/rmp/4.10.1/js/rmp.min.js" 
  integrity="sha384-DF3999CAUqM17J5fZhwY6T+MYpp+r7XA3fR05zrbjip8mPxNoImWwIPcPnuPdVVV"
  crossorigin="anonymous"></script>
<div id="rmpPlayer"></div>
<script>
  // First we specify bitrates to feed to the player - DASH
  var bitrates = {
    dash: 'https://www.rmp-streaming.com/media/dash264/abr/manifest.mpd'
  };
  // Then we specify our streamrootConfig: object
  var streamrootConfig = {
    type: 'shakaplayer',
    streamrootKey: 'your-streamroot-key',
    dnaConfig: {
      // example for passing dnaConfig setting
      //"fragmentsFetchedBeforeLoad": 3
    }
  };
  // Then we set our player settings
  var settings = {
    licenseKey: 'your-radiant-license-key',
    streamrootConfig: streamrootConfig,
    bitrates: bitrates,
    width: 640,
    height: 360, 
    poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-demo.jpg',
    // Recommended settings for DASH streaming
    shakaManifestDashDefaultPresentationDelay: 30 
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

That is it! You are all set to enjoy the best of Radiant Media Player and Streamroot.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

Working with Streamroot

Player

Streaming

Styling and branding

Live and DVR

Playlist & related content

Analytics

Social media

OTT

Video ads

Outstream video ads

Mobile applications

DRM & HLSe

360 video

HEVC & 4K video

HTML5 audio

Peer-to-peer streaming

Guides

Helpers

Player extensions