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

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 instatiates 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.

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: HTMLVideoElement
}

abstract class CastReceiver {
  abstract constructor(options: CastReceiverConstructorOptions)

  /**
   * https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.CastReceiverContext#start
   */
  abstract public start(): void
  /**
   * https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.PlayerManager
   * @return {PlayerManager}
   */
  abstract public getContext(): CastReceiverContext
  /**
   * https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.CastReceiverContext
   * @return {PlayerManager}
   */
  abstract public getPlayerManager(): PlayerManager
}