Build a Chromecast Receiver Application

Creating an Integrated Receiver Application for Chromecast

The following content describes how to create an integrated receiver application.

Prerequisites

Note: You need to host the receiver application on your own server (you cannot use Ooyala’s receiver directly). Set up Cross-Origin Resource Sharing ( CORS ) enablement on the CDN you use for content serving.

Create an Integrated Receiver Application

Use the following steps to create an integrated receiver application.
Note: If you want to use a receiver as is (that will have Ooyala branding and playerId), go to https://github.com/ooyala/chromecast-sample-receiver, and clone or download the project,.
  1. Host the content of the project (receiver.html and images folder) on your server.
  2. Register your receiver HTML page in the Google Cast SDK developer console at Google Cast SDK Developer Console.
  3. Retrieve the receiver application ID from the Google Cast SDK developer console.
  4. Put the receiver application ID into the sender application code (see Build a Sender Application for iOS or Build a Sender Application for Android for how to add this to the sender application).

Customizing the Receiver Application for the Ooyala Chromecast Integration

The sample custom receiver is now open source. Go to https://github.com/ooyala/chromecast-sample-receiver. The receiver can be customized by set the following options at the config.json file at the root of the progress and then follow the build steps described on the README file.
Name Type Default Description
playerBrandingId string ooyala test player id This is the player Id provided in Ooyala Backlot.
Note: Customers must change the Ooyala Player Branding ID from the Sample Receiver.html to their Account’s Player Branding ID.
images object {"logo": "logo.svg"} This contains the image filename used to set the splash screen. The default value is the Ooyala logo and can be updated to reflect your brand image. If you change the value with your own filename you must add the image at the assets directory.
skin object {} Here you can customize the appearance of the player UI. For more information please visit the ooyala documentation at Customizing the Player V4 Appearance and check the inlineoption, which is used to override the default values.

Please also see an example on how to customize the skin.

Event Listening

You can customize the custom receiver UI to react to player events by listening to the events published by the Player V4 player (see Event Model for Player V4) or by modifying the CSS (see Customizing the Player V4 Appearance Using CSS). This customization can occur in the onCreate function or after the Player V4 script has been loaded.

For example, you can display a splash screen when the content finishes. The user interface that you customize in your customized receiver should abide by the design checklist that Google has in place.

The event handling is located at the following path: src/app/player.js. This module has a method named as ‘onCreateHandlers’ that contains the event listeners for all the player event used.

Handling Errors

For general Ooyala Player V4 errors, see Handling Errors for Player V4 Using JavaScript. Since the receiver uses the same player V4 used in the web version, the error handling needs to be set by listening to the error events triggered by the player API.
https://help.ooyala.com/sites/all/libraries/dita/en/video-platform/concepts/chromecast/receiver.html

Was this article helpful?