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.
Here are the requirements for using Radiant Media Player with Electron to build desktop apps:
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+.
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 | |
MP4/WebM Progressive download | |
HTML5 video ads | (2) |
VOD, Live & DVR streaming | |
360 video | |
Autoplay (with audio) support | |
Responsive UI & player API | |
Widevine DRM | (3) |
Google Cast | (4) |
Offline playback | (5) |
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'.
See our working with Electron and DASH with Widevine DRM guide.
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:
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://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>
See our guide for mobile apps white-listing as it works the same for Electron-based desktop apps.
©2015-2021 Radiant Media Player. All rights reserved.