WebRTC-powered streaming offers a great way to improve viewer experience, reduce content delivery cost and greenify the streaming media chain. We have integrated with Swarm Cloud (CDNBye) peer-assisted streaming solution so you can enjoy the best of Radiant Media Player and peer-assisted HLS and MPEG-DASH streaming.
Delivering video, audio, and other data on centralized networks is expensive and inefficient. Instead of building wasteful new data centers or buying expensive CDNs, it's more responsible to use what we already have. Almost everybody has spare bandwidth. SwarmCloud creates value by unlocking this under-utilized resource. SwarmCloud's P2P solution uses WebRTC to create a network between end-user devices accessing the same video. When a viewer requests video content, the system first checks to see if it is available from peers on the network. If so, it pulls the video from the peer instead of retrieving it from the video source. If it doesn't, it retrieves it directly from the video source.
In this article we will review how to use Swarm Cloud (CDNBye) WebRTC-powered streaming solution with Radiant Media Player thanks to our out of the box integration.
Swarm Cloud (CDNBye) is a Radiant Media Player technology alliance partner.
Swarm Cloud (CDNBye) support in Radiant Media Player is currently available in HLS and MPEG-DASH for on-demand, live or DVR content in the following environments:
All Radiant Media Player features can be used in conjunction with Swarm Cloud (CDNBye) technology. You can obtain further technical information about Swarm Cloud (CDNBye) inner workings here.
First you will need an account with Swarm Cloud (CDNBye) to obtain a Swarm Cloud token. If you do not already have one you can sign up here.
We will now prepare our player code. To help you out, we have made this as straight-forward as possible: you just need to add the JavaScript Swarm Cloud library, the Radiant Media Player library to your page <head> and configure Radiant Media Player and Swarm Cloud accordingly. For existing with Swarm Cloud (CDNBye) customers you can also test with Swarm Cloud (CDNBye) support in Radiant Media Player with our free 14-day trial.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover"> <title>TODO supply a title</title> <!-- Include with Swarm Cloud (CDNBye) library in your <head> --> <script src="https://cdn.jsdelivr.net/npm/swarmcloud-hls@latest/dist/p2p-engine.min.js"></script> <!-- Include Radiant Media Player HLS-optimized library in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/9.16.6/js/rmp-hlsjs.min.js"></script> </head> <body> <!-- Player container element --> <div id="rmp"></div> <p id="version"></p> <h3>download info:</h3> <p id="info"></p> <p id="peers"></p> <script> // Swarm Cloud configuration options const p2pConfig = { live: false, // set to true for live content swFile: './sw.js', token: 'your-swarm-cloud-token' }; // Streaming source - HLS in this example const src = { hls: 'https://your-hls-url.m3u8' }; // Player settings const settings = { licenseKey: 'your-radiant-media-player-license-key', src: src, width: 640, height: 360, // To enable CDNBye support for Apple devices forceHlsJSOnAppleDevices: true, autoplay: true, // for live streaming add the following configuration // hlsJSCustomConfig: { // maxBufferSize: 0, // maxBufferLength: 15, // liveSyncDurationCount: 10 //}, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); // We wait for hls.js to be ready then we start Swarm Cloud engine rmp.one('hlsinstancecreated', () => { document.querySelector('#version').innerText = `Radiant Media Player version ${rmp.getPlayerVersion()} - hls.js version: ${Hls.version} - p2p version: ${P2PEngineHls.version}`; const hlsJSInstance = rmp.getHlsJSInstance(); p2pConfig.hlsjsInstance = hlsJSInstance; const engine = new P2pEngineHls(p2pConfig); engine.on('stats', function ({ totalHTTPDownloaded = 0, totalP2PDownloaded = 0, totalP2PUploaded = 0 }) { const total = totalHTTPDownloaded + totalP2PDownloaded; document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded / total * 100)}%, saved traffic: ${totalP2PDownloaded}KB`; }); engine.on('peers', function (peers) { document.querySelector('#peers').innerText = `peers: ${peers.length}`; }); }); rmp.init(settings); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover"> <title>TODO supply a title</title> <!-- Include with Swarm Cloud (CDNBye) library in your <head> --> <script src="https://cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script> <!-- Include Radiant Media Player HLS-optimized library in your <body> or <head> --> <script src="https://cdn.radiantmediatechs.com/rmp/9.16.6/js/rmp-shaka.min.js"></script> </head> <body> <!-- Player container element --> <div id="rmp"></div> <p id="version"></p> <h3>download info:</h3> <p id="info"></p> <p id="peers"></p> <script> // Swarm Cloud configuration options const p2pConfig = { live: false, // set to true for live content swFile: './sw.js', token: 'your-swarm-cloud-token' }; // Streaming source - MPEG-DASH in this example const src = { dash: 'https://your-dash-url.mpd' }; // Player settings const settings = { licenseKey: 'your-radiant-media-player-license-key', src: src, width: 640, height: 360, autoplay: true, shakaCustomConfig: { streaming: { bufferingGoal: 30, useNativeHlsOnSafari: false }, manifest: { defaultPresentationDelay: 30 } }, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); // We wait for Shaka player to be ready then we start Swarm Cloud engine rmp.one('shakainstancecreated', () => { document.querySelector('#version').innerText = `Radiant Media Player version: ${rmp.getPlayerVersion()} - Shaka Player version: ${shaka.Player.version} - P2PEngineShaka version: ${P2PEngineShaka.version}`; const shakaPlayerInstance = rmp.getShakaPlayerInstance(); if (P2PEngineShaka.isSupported()) { const engine = new P2PEngineShaka(shakaPlayerInstance, p2pConfig); engine.on('stats', function (stats) { var total = stats.totalHTTPDownloaded + stats.totalP2PDownloaded; document.querySelector('#info').innerText = `p2p ratio: ${Math.round(stats.totalP2PDownloaded / total * 100)}% saved traffic: ${Math.round(stats.totalP2PDownloaded)}KB upload: ${Math.round(stats.totalP2PUploaded)}KB`; }); engine.on('peers', function (peers) { document.querySelector('#peers').innerText = `peers: ${peers.length}`; }); } }); rmp.init(settings); </script> </body> </html>
We have seen great results when using Swarm Cloud peer-assisted solution with Radiant Media Player including faster player start-up and reduced buffering, significant content delivery cost reduction, increased scalability and ultimately happier viewers.
©2015-2024 Radiant Media Player. All Rights Reserved.