Support for using Radiant Media Player in an Electron app is currently in BETA - feedback is welcome
Building desktop apps for Windows, macOS and Linux can be an essential part of your OTT strategy. Those apps can also be published on the Windows Store or Mac App Store and this can significantly extend the reach of those apps. With the release of Radiant Media Player 4.10.1 we have made it easy to use our player in an Electron-based desktop app.
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 very 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.
Here are the requirements for using Radiant Media Player with Electron to build desktop apps:
The list of supported OS for Electron 2+ can be found here and includes Windows 7+, macOS 10.9+ and Ubuntu 12.04+.
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:
| Feature | Support |
|---|---|
| HLS | |
| AES HLS | |
| DASH | (1) |
| MP4/WebM Progressive download | |
| HTML5 video ads | (2) |
| VOD, Live & DVR streaming | |
| 360 video | |
| Autoplay (with audio) support | (3) |
| Responsive UI & player API | |
| Widevine DRM (DASH or HLS) | (4) |
| ClearKey DRM (DASH or HLS) | (4) |
| Google Cast | (5) |
| Offline playback | (6) |
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 (DFP, AdSense for Video, AdX) 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.
Support for DRM in Electron-based apps has not been tested yet and is outside our current scope of support.
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 bitrates 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:
adTagUrl setting must point to this local resource. VAST metrics will not be ping since the device is offline.Unsupported features:
Offline player starts are saved locally and push to our logging servers when an Internet connection becomes available.
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.
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:
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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <title>Hello RMP and Electron</title> </head> <body> <h1>Hello RMP and Electron</h1> <!-- All of the Node.js APIs are available in this renderer process. --> We are using Node.js <script>document.write(process.versions.node)</script>, Chromium <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. <p>Here comes our player container</p> <div id="rmpPlayer"></div> <script> // You can also require other files to run in this process require('./renderer.js'); // Here we load Radiant Media Player locally from our rmp/ folder require('./rmp/js/rmp.min.js'); // Our player settings var bitrates = { // Here we load an online HLS resource // We could also load it locally from media/ folder hls: 'https://1703298472.rsc.cdn77.org/vod/smil:bbb.smil/playlist.m3u8' }; var settings = { licenseKey: 'a2VpdWR5dHNobEAxNDg4ODkxNTQy', bitrates: bitrates, width: 640, height: 360, // Referencing required self-hosted files pathToRmpFiles: './rmp/', // Loading media content locally from media/ folder poster: './media/poster-rmp-demo.jpg' }; 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).
See our guide for mobile apps white-listing as it works the same for Electron-based desktop apps where the