Documentation

Working with Swarm Cloud (CDNBye)

Introduction

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.

Scope of support

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:

  • Chrome, FireFox, Opera, MS Edge 79+ for Desktop
  • Chrome, FireFox, Opera, Samsung Internet for Android 5+
  • Ionic/Cordova/WebView for Android 5+
  • macOS and iPadOS Safari

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.

Usage example

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.

Player code example for HLS streaming

<!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.15.3/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>

Player code example for MPEG-DASH streaming

<!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.15.3/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.

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

Radiant Media Player

Support

Company

©2015-2024 Radiant Media Player. All Rights Reserved.