Radiant Media Player

Working with Electron

Search

Scope of support

Building desktop apps for Windows, macOS and Linux can be an essential part of your OTT strategy. Those apps can be published on the Windows Store or Mac App Store and this can significantly extend your reach. You can easely use Radiant Media Player in an Electron-based desktop app to achieve those goals.

Electron is a framework for creating native desktop applications with web technologies like JavaScript, HTML, and CSS. It runs on a local node.js server, uses Chromium browser as a basis for rendering web content and provides a complete set of API to access native desktop functionalities. Electron is an already popular and reliable framework and is used to build major desktop apps like Visual Studio Code or Skype.

In terms of concept Electron works very similarly to Cordova, the main difference is that with Cordova you can build iOS and Android mobile apps and with Electron you can build desktop apps for Windows, macOS and Linux.

Since building Electron-based desktop apps generally require the FILE protocol, this option is only available to PLATFORM Edition customers.

Supported environments

Here are the requirements for using Radiant Media Player with Electron to build desktop apps:

• Radiant Media Player 5.4.8+
• Electron 6+

The list of supported OS for Electron 6+ can be found here and includes Windows 7+, macOS 10.10+, Ubuntu 12.04+, Fedora 21+ and Debian 8+.

Supported features

All player features available for the desktop web are generally available with Radiant Media Player used in an Electron-based desktop app. Below is a non-exhaustive list of features you can expect to be available or not:

• (2) See the video ads support in Electron-based apps section
• (3) See the DRM support in Electron-based apps section
• (4) See the Google Cast support in Electron-based apps section
• (5) See the offline media playback support in Electron-based apps section

Video ads support in Electron-based apps

We do support using video ads in an Electron-based app. However, it should be noted that since the HTML5 Google IMA SDK is not officially supported in an Electron app, the preferred solution is to use our VAST parser rmp-vast. If you are using Google Ads (Google Ad Manager, AdSense for Video) or looking for a feature that is supported with the IMA SDK but not with rmp-vast, we still recommend using the IMA SDK even in an Electron app. See this section for more information on using the IMA SDK in a Electron app. The VAST parser can be selected with player setting adParser set to 'ima' or 'rmp-vast'.

DRM support in Electron-based apps

See our working with Electron and DASH with Widevine DRM guide.

Offline playback of media content in Electron-based apps

We support offline playback of media content (HLS, DASH or progressive download) within an Electron-based apps. To be displayed, offline content must be locally stored within the application (like in an assets/ or media/ folder). The player must point to this locally stored resource to start playback (through the usual src setting). The mechanism where online media content could be locally saved on the device for later offline playback is not currently covered by Radiant Media Player.

Supported features:

• Playback of HLS, DASH, progressive download on-demand content
• Player settings and API that do not require an Internet connection are generally available
• Video ads: only supported with rmp-vast (IMA SDK not available). In this case the adTag must be hosted locally within the app. The adTagUrl setting must point to this local resource. VAST metrics will not be ping since the device is offline.

Unsupported features:

• Offline DRM licenses
• Live & DVR streaming: those types of content require an Internet connection to run

Offline player starts are saved locally and push to our logging servers when an Internet connection becomes available.

Google Cast support in Electron-based apps

Since Chromium does not support the Google Cast API out of the box, we do not provide support for Google Cast in Electron-based apps. An unofficial Google Cast API wrapper exits and this may be helpful to implement Google Cast support in an Electron-based app outside of Radiant Media Player but this would fall outside our scope of support.

Walk-through using Radiant Media Player in an Electron based desktop app

We will use the electron-quick-start sample app to start with.

Once the electron-quick-start sample app is installed, we can install Radiant Media Player. While you could use our cloud player, we will use self-hosting for this walk-through to easily allow for offline playback case scenario. The structure of the electron-quick-start sample app should look like:

• media/ - optional (you need to add this folder in your Electron project), here we could store our local/offline media content like MP4, HLS video or images
• rmp/ - required if using self-hosting (you need to add this folder in your Electron project) - those are Radiant Media Player self-hosted files that can be downloaded in our back-end
• index.html

Other folders and files are likely to be present but the above are those we need to focus on for now.

Now we will modify our index.html file to add Radiant Media Player:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <!-- Required Content-Security-Policy (CSP) - this is a loose example -->
  <meta http-equiv="Content-Security-Policy" content="default-src * blob: http: https: file: data: 'unsafe-inline';">
  <!-- Optional - including bootstrap CSS for nicer rendering -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
  <title>Hello RMP and Electron</title>
</head>

<body>
  <h1>Hello RMP and Electron</h1>
  <p>We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.</p>
  <p>Here comes our player container</p>
  <div id="rmpPlayer"></div>
  <!-- Include player library -->
  <script src="./rmp/js/rmp.min.js"></script>
  <script>
    // Our player settings
    var src = {
      // Here we load an online HLS resource
      hls: 'https://your-hls-url.m3u8'
    };
    var settings = {
      licenseKey: 'your-license-key',
      src: src,
      width: 640,
      height: 360,
      // Referencing required self-hosted files
      pathToRmpFiles: './rmp/', 
      // if we need ads
      // ads: true,
      // rmp-vast is generally preferred in Electron apps to display ads
      // but if you are using Google ads servers (Google Ad Manager, AdSense for video), the IMA SDK is required 
      // see https://www.radiantmediaplayer.com/guides/working-with-electron.html#video-ads
      // adParser: 'rmp-vast',
      // adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/inline-linear.xml',
media/mp4/video.mp4
    };
    var elementID = 'rmpPlayer';
    var rmp = new RadiantMP(elementID);
    rmp.init(settings);
  </script>
</body>
</html>

Content-Security-Policy meta tag: before packaging an electron app for production you should review the security docs from Electron and notably the Content Security Policy guidelines. In the above example we have included a loose declaration for the CSP meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src * blob: http: https: file: data: 'unsafe-inline';">

The blob: part is required for Media Source Extensions streaming. The file: part is required to load local resources. The data: part is required to load some internal player resources (base64 splash poster).

For local/offline playback of media resources we shall simply referenced our content from the media/ folder

<script>
  // Our player settings
  var src = {
    // Here we load an local/offline HLS resource
    hls: './media/hls/playlist.m3u8',
    // We could also load a MP4 file (optional)
    mp4 : [
      './media/mp4/content.mp4'
    ]
  };
  var settings = {
    licenseKey: 'your-license-key',
    src: src,
    width: 640,
    height: 360,
    // Referencing required self-hosted files
    pathToRmpFiles: './rmp/', 
    // Here we load our local/offline poster
    contentMetadata: {
      poster: [
        './media/images/poster-rmp-demo.jpg'
      ]
    }
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  rmp.init(settings);
</script>

App white-listing (PLATFORM Edition)

See our guide for mobile apps white-listing as it works the same for Electron-based desktop apps.