Menu

Lumen help

Integrating Mesh Delivery with Radiant Media Player

Introduction

Mesh Delivery for Streaming can be integrated into your website with Radiant Media Player. Radiant Media Player uses Hls.js media engine for HLS playback and Shaka Player media engine for DASH playback, choose the suitable code snippet below.

 

We have built optimized plugins for Radiant Media Player from v4.7.1.

 

The complete list of integrations we support and guides for setting them up can be found here. If you would like to integrate Mesh Delivery for streaming with a video player not on the list, write to us at cdnsupport@lumen.com and we will help you out.

Not into tutorials?  

Code Example

Step 1: Install Radiant Media Player and Mesh Delivery builds

Include these sources in the HTML <head>:

                <!-- Radiant Media Player build -->
<script src="//cdn.radiantmediatechs.com/rmp/5.7.8/js/rmp.min.js"></script>

Step 2: Set up Radiant Media Player and Mesh Delivery

Include the following code in the HTML <body> :

                <div id="rmpPlayer"></div>
<script>
  var src = {
    hls: 'YOUR_PLAYLIST_URL',
  };
  var streamrootConfig = {
    type: 'hlsjs',
    streamrootKey: 'YOUR_STREAMROOT_KEY',
    dnaConfig: {},
  };
  var settings = {
    licenseKey: 'YOUR_RADIANT_LICENSE_KEY',
    streamrootConfig: streamrootConfig,
    src: src,
    // Recommended settings for HLS streaming
    hlsJSMaxBufferSize: 0,
    hlsJSMaxBufferLength: 30,
    hlsJSLiveSyncDuration: 30, // Not needed for VOD streams
    forceHlsJSOnMacOSIpadOSSafari: true //To activate Mesh Delivery on Safari Mac OS. Only from player 5.4.10+.
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

            
                <div id="rmpPlayer"></div>
<script>
  var src = {
    dash: 'YOUR_PLAYLIST_URL',
  };
  var streamrootConfig = {
    type: 'shakaplayer',
    streamrootKey: 'YOUR_STREAMROOT_KEY',
    dnaConfig: {},
  };
  var settings = {
    licenseKey: 'YOUR_RADIANT_LICENSE_KEY',
    streamrootConfig: streamrootConfig,
    src: src,
    // Recommended settings for DASH streaming
    shakaManifestDashDefaultPresentationDelay: 30
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

Parameter name

Mandatory

Description

dnaConfig

No

The object in which you can pass Mesh Delivery options (property, contentIdGenerator, id, etc.).

YOUR_STREAMROOT_KEY

Yes

The unique Streamroot key that we have assigned to you; make sure it is identical to the one provided in the Account section of your dashboard.

YOUR_PLAYLIST_URL

Yes

Your playlist.
YOUR_RADIANT_LICENSE_KEY Yes
 The Radiant Media Player license key.

Step 3: Visualize Mesh Delivery

To verify that Mesh Delivery was correctly configured, please install our Mesh Delivery graphs.

Vizualization graph for Mesh Delivery

And in just a few easy steps you should have a working integration of Mesh Delivery! We encourage you to explore our documentation to understand the various features we offer so you can make the most out of our product.