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.1 we support Streamroot DNA 2.0.
Streamroot support in Radiant Media Player is currently available for HLS (hls.js) and DASH (Shaka player) in the following environments:
forceHlsJSOnMacOSIpadOSSafari 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.
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.
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/5.7.8/js/rmp.min.js"></script> <div id="rmpPlayer"></div> <!-- Set up player configuration options --> <script> // HLS streaming source var src = { hls: 'https://your-hls-url.m3u8' }; // Then we specify our streamrootConfig: object var streamrootConfig = { type: 'hlsjs', streamrootKey: 'your-streamroot-key', dnaConfig: { // example for passing dnaConfig setting //"fragmentsFetchedBeforeLoad": 3 } }; // Player settings var settings = { licenseKey: 'your-radiant-license-key', streamrootConfig: streamrootConfig, src: src, width: 640, height: 360, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] }, // Recommended settings for HLS streaming with Streamroot hlsJSMaxBufferSize: 0, hlsJSMaxBufferLength: 30, hlsJSLiveSyncDuration: 30, hlsJSLiveMaxLatencyDuration: Infinity, forceHlsJSOnMacOSIpadOSSafari: true }; var elementID = 'rmpPlayer'; var rmp = new RadiantMP(elementID); rmp.init(settings); </script>
<script src="https://cdn.radiantmediatechs.com/rmp/5.7.8/js/rmp.min.js"></script> <div id="rmpPlayer"></div> <script> // DASH streaming source var src = { dash: 'https://your-dash-url.mpd' }; // Then we specify our streamrootConfig: object var streamrootConfig = { type: 'shakaplayer', streamrootKey: 'your-streamroot-key', dnaConfig: { // example for passing dnaConfig setting //"fragmentsFetchedBeforeLoad": 3 } }; // Player settings var settings = { licenseKey: 'your-radiant-license-key', streamrootConfig: streamrootConfig, src: src, width: 640, height: 360, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] }, // Recommended settings for DASH streaming with Streamroot 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.