Skip to content

Chromecast

npm version

The RedBeeMedia Player SDKs has support for chromecast out-of-the-box using a non-branded cast-receiver, this is enabled by default.

To build a branded receiver we provide a CastRecevier library which simplifies development of google cast receivers using the Google CAF(v3) SDK and is compatible with the latest RedBeeMedia Android, iOS & JavaScript SDKs.

Available on npm: https://www.npmjs.com/package/@redbeemedia/cast-receiver

IMPORTANT It is crucial to keep the SDK up-to-date as Google updates all chromecast devices automatically so if they make breaking changes then you may be required to update the SDK on short notice.

Required min SDK version:

Custom receiver

Installation

  • npm install @redbeemedia/cast-receiver

Usage

The following is the main structure of a custom Web Receiver:

  1. A cast-media-player element to represent the media player.
  2. A script element to load the Web Receiver framework.
  3. A script that instantiates the CastReceiver class provided by us.
  4. Call start() on the CastReceiver instance.

Here is the minimum code for a Web Receiver app using the Cast Application Framework without any customization. You can copy and paste this script exactly as-is into your app to create the Web Receiver app.

HTML 

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
</body>
</html>

JavaScript 

import { CastReceiver } from '@redbeemedia/cast-receiver';

const app = new CastReceiver({
  baseUrl: "<url-provided-by-red-bee-media>"
});

window.addEventListener("DOMContentLoaded", () => app.start());

In general you can use all APIs provided by Google, see the official documentation.

To access the PlayerManager or CastReceiverContext simply call app.getPlayerManager() & app.getContext() respectively.

NOTE

We do not recommend or guarantee that custom setMessageInterceptor() calls will work, this can break the SDK if used. Is there something you need from them? Please contact us.

Push next content

The SDK uses the queue system to automatically push next content, the default behavior is to use the Exposure API to get the next episode.

To override the default behavior you need to provide a custom queue when calling .start() on the receiver instance eg.

castReceiver.start({ queue: null }); // disable queue
castReceiver.start({ queue: myCustomQueue }); // custom queue

Styling

Styling a basic Web Receiver is done by styling the <cast-media-player> element using css, see the official documentation

API

// @redbeemedia/cast-receiver

interface CastReceiverConstructorOptions {
  baseUrl: string;

  /**
   * If you don't want the default chromecast player UI you can supply your own HTMLVideoElement 
   * see: https://developers.google.com/cast/docs/web_receiver/core_features#custom_ui_data_binding
   * 
   * This is not recommended and not well tested.
   * 
   * @type {HTMLVideoElement}
   */
  mediaElement?: HTMLMediaElement;
  /**
   * Configurable playback options for the Chromecast receiver.
   * @see https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.PlaybackConfig
   */
  customPlayerConfig?: ast.framework.PlaybackConfig;

  /**
   * if true the receiver will set metadata on the media object when loaded as well as on program changes if playing a channel with EPG.
   * defaults to true
   */
  setMetadata?: boolean;

  /**
   * if true the receiver will display channels/recommendations ( for channels/other assets respectively ). 
   * By default it will show the recommendations as a slideshow after playback ends. If media browse
   * (https://developers.google.com/cast/docs/web_receiver/media-browse) is supported that will be used instead. 
   * default=true
   */
  setRelatedContent?: boolean;
}

abstract class CastReceiver {
  abstract constructor(options: CastReceiverConstructorOptions)
  /**
   * https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.CastReceiverContext#start
   * @param {CastReceiverOptions} opts (available in v0.17.0) https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.CastReceiverOptions
   */
  abstract public start(opts?: CastReceiverOptions): void
  /**
   * https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.CastReceiverContext
   * @return {CastReceiverContext}
   */
  abstract public getContext(): CastReceiverContext
  /**
   * https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.PlayerManager
   * @return {PlayerManager}
   */

  abstract public getPlayerManager(): PlayerManager

  /**
   * Returns the ProgramService if the content is playing, otherwise returns null.
   * Note! The ProgramService is a unique instance tied to the playing asset so it needs to be re-acquired if switching channels.
   * @return {ProgramService}
   */
  getProgramService(): ProgramService | null {
    return this.programService;
  }
}

getProgramService()

After the content starts playing you are able to call this method to get the ProgramService instance, this can be used to manually detect program changes eg.

const programService = getProgramService();
programService.on("program_changed", ({ currentProgram }) => {
  console.log(`StartTime: ${currentProgram.startTime}, EndTime: ${currentProgram.endTime}, Asset: `, currentProgram.asset);
});