Google Cast from Radiant Media Player used in a Cordova-based mobile app is available for the following emitting platforms:
Our implementation is based on a Cordova plugin: cordova-plugin-chromecast. While this implementation of Google Cast is not as comprenhensive as our default Google Cast implementation for Google Chrome on desktop and mobile, it should cover most, if not all, requirements for a top-notch Google Cast experience from a Cordova-based mobile application for Android or iOS.
The following features are currently not supported by our custom Cast Application Framework (CAF) receiver app:
Our production custom CAF receiver app should cover most generic case-scenario. However you should consider developing your own custom CAF receiver app in the following cases:
In order to assist Radiant Media Player customers with this task, we have published our custom CAF receiver app on GitHub.
First make sure to review our working with Cordova guide to familiarize yourself with using Radiant Media Player in a Cordova-based mobile app.
Adding the required cordova-plugin-chromecast plugin can be done through the command line:
cordova plugin add https://github.com/jellyfin/cordova-plugin-chromecast.git
Given the specific context of a Cordova mobile app, Radiant Media Player will not automatically load the required Google Cast JavaScript library when initialized. We need to add that file just before the JavaScript player file.
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script> <script src="rmp/dist/rmp.min.js"></script>
googleCastCordova: Boolean
Enables Google Cast support in a Cordova-based mobile application. Note that googleCast setting must also be set to true. Default: false.
googleCastCordovaDebug: Boolean
Enables debug mode for Google Cast support in a Cordova-based mobile application. This allows for the use of Google Cast for Cordova in Chrome for desktop or Chrome for Android for easier debugging. Default: false.
Other settings available for Google Cast support in Google Chrome for desktop and mobile can also be used, including: googleCastReceiverAppId,
googleCastAdTagUrl, googleCastVmapAdsRequest
When casting is engaged two players exist at the same time: the remote player which lives in the receiver application and the local player which lives in the sender application. When a media is successfully cast from the sender application to the receiver application the local player is paused and its UI controls the remote player. The player API can be used to control the remote player when casting is engaged.
Supported player API events include
playpausetimeupdatecastmedialoaded: media has been successfully loaded on receiving device
castmediaunloaded: media has been successfully unloaded on receiving device and playback may continue on the sendercastmediaerror: media could not be loaded on receiving device - current casting session endscastapiavailable: the Google Cast API has been successfully loaded and is now available. The global Google Cast related variables can now be accessed including
window.chrome.cast and
window.cast.framework
Supported player API methods include
playpausestopgetPausedgetVolumesetVolumegetMutesetMuteseekTogetCurrentTimegetDurationgetLiveCurrentTimegetLiveDurationsetSrcdestroygetCastUrl: returns a String representing the currently cast URL.
getCastMediaLoaded: returns a Boolean stating if a media is loaded on the receiving application.getCastConnected: returns a Boolean stating if the remote player is currently connected to the sender application. Note that in some instances (like when a media ends on the receiving application) the remote player
can be connected to the sender application but with no media loaded within it.www/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta http-equiv="Content-Security-Policy" content="default-src * blob: http: https: file: data: android-webview-video-poster: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval';">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello RMP and Google Cast for Cordova</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>RMP with Google Cast in Cordova</h1>
<p>Some content before our player ...</p>
<div id="rmp"></div>
<br><br>
<p>... some content after our player</p>
</div>
</div>
</div>
<script src="cordova.js"></script>
<-- First we include Google Cast JavaScript library -->
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
<-- Then we include Radiant Media Player JavaScript library -->
<script src="rmp/dist/rmp.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
www/js/index.js
const app = {
// Application Constructor
initialize: function () {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
onDeviceReady: function () {
this.setUpPlayer('rmp');
},
// set up player onDeviceReady
setUpPlayer: function (id) {
const src = {
hls: 'https://your-hls-url.m3u8'
};
const settings = {
licenseKey: 'your-license-key',
src: src,
width: 640,
height: 360,
// we tell the player where to look for the self-hosted player files
pathToRmpFiles: 'rmp/',
// we enable Google Cast for Cordova support
googleCast: true,
googleCastCordova: true,
contentMetadata: {
poster: [
'https://your-poster-url.jpg'
]
}
};
const rmp = new RadiantMP(id);
rmp.init(settings);
}
};
app.initialize();
©2015-2024 Radiant Media Player. All Rights Reserved.