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 5+
• iOS 10+

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.

Supported features

• In-player casting from an Android or iOS app
• Remote controlling
• Adaptive bitrate with HLS, DASH or progressive download
• Video ads (VAST and VMAP support)
• DASH DRM (Widevine) & SAMPLE AES/AES-128 HLS
• Live and on-demand video support
• Audio-only support
• Playlist
• Related content
• Player API

The following features are currently not supported by our custom Cast Application Framework (CAF) receiver app:

• HLS with H.264/MP3 or fmp4 HLS (will fail to load)
• HLS with audio-only content (will fail to load)
• Casting of CEA* captions (will load but CEA captions will be unavailable)

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:

• you need to support DRM: the DRM example below has been tested for DASH with Widevine DRM
• you need to apply your own styling to the CAF player
• you need to implement some other kind of custom behaviour required by your project

In order to assist Radiant Media Player customers with this task, we have published our custom CAF receiver app on GitHub.

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
• getPaused
• getVolume
• setVolume
• getMute
• setMute
• seekTo
• getCurrentTime
• getDuration
• getLiveCurrentTime
• getLiveDuration
• setSrc
• destroy
• getCastUrl: 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.

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: 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();