Build a Chromecast Receiver Application
Creating an Integrated Receiver Application for Chromecast
The following content describes how to create an integrated receiver application.Prerequisites
- Read Introduction to Chromecast Integration.
- Facilitate your own hosting infrastructure for receiver applications (you must set up CORS enablement on the CDN you use for content serving).
- Register your receiver HTML with Google Cast Registration.
- For iOS, view the Build a Sender Application for iOS sample Chromecast Sender iOS App.
- For Android, view the Build a Sender Application for Android sample Chromecast Sender Android App.
- Purchase a Chromecast device.
Create an Integrated Receiver Application
Use the following steps to create an integrated receiver application.- Host the content of the project (receiver.html and images folder) on your server.
- Register your receiver HTML page in the Google Cast SDK developer console at Google Cast SDK Developer Console.
- Retrieve the receiver application ID from the Google Cast SDK developer console.
- 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.