Documentation

Google Cast In Cordova Mobile Apps

Scope of support

Google Cast from Radiant Media Player used in a Cordova-based mobile app is available for the following emitting platforms:

  • Android 6+
  • iOS 12+

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.

Implementation guidelines

Adding cordova-plugin-chromecast plugin to your Cordova project

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

Adding Google Cast JavaScript library to your page

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>

Google Cast for Cordova player settings

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

Player API

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

  • play
  • pause
  • timeupdate
  • castmedialoaded: media has been successfully loaded on receiving device
  • castmediaunloaded: media has been successfully unloaded on receiving device and playback may continue on the sender
  • castmediaerror: media could not be loaded on receiving device - current casting session ends
  • castapiavailable: 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

  • play
  • pause
  • stop
  • paused
  • volume
  • mute
  • seekTo
  • currentTime
  • duration
  • setSrc
  • destroy
  • castUrl: returns a String representing the currently cast URL.
  • castMediaLoaded: returns a Boolean stating if a media is loaded on the receiving application.
  • castConnected: 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.

Complete player code example

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,
      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);
    // Initialization ... and done!
    async function initRmpPlayer() {
      try {
        await rmp.init(settings);
      } catch(error) {
        console.error('Radiant Media Player failed to initialize', error);
      }
    }
    initRmpPlayer();
  }
};
app.initialize();
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

©2015-2025 Radiant Media Player. All Rights Reserved.