Chromecast receiver app development with AngularJS

Despite what everyone will tell you, AngularJS just happens to be an excellent tool for developing Chromecast receiver apps because Angular is lightweight and it’s essentially a great tool for Single Page Applications, which is exactly what a custom receiver app is.

If this is your first time with Chromecast, I suggest you read more about it here before we proceed. And also here.

For this application, I have used AngularUI Router which is going to help switch between views in the Chromecast receiver app.

This tutorial assumes that you have a minimal knowledge of AngularJS and AngularUI Router.

You can download the boilerplate on my github:

Google used to have a sample on its github located at:

But they have since removed the sample.

The first challenge is in the life cycle of a receiver application:

There are 4 components that will have to be initialized immediately when the app is launched:

HTML5 video element

For this reason, I have divided and created a service for each one in the services\cast folder:

│       app.css
│   │   app.js
│   │
│   ├───constants
│   │       appConstant.js
│   │
│   ├───controllers
│   │       appController.js
│   │       homeController.js
│   │       playerController.js
│   │       splashController.js
│   │
│   ├───directives
│   │       mediaPlayer.js
│   │
│   ├───lib
│   │       angular-ui-router.min.js
│   │       angular.min.js
│   │
│   └───services
│       │
│       ├───cast
│       │       castReceiverManagerService.js
│       │       mediaManagerService.js
│       │       messageBusService.js
│       │       videoElementService.js
│       │
│       └───media
│               mediaHostFactory.js
│               mediaPlayerFactory.js
│               mediaProtocolFactory.js

The rest of the components in services will be initialized later in time. When a video is loaded.

Check out the project on my github:

7 thoughts on “Chromecast receiver app development with AngularJS

  1. Thank you for a nice article. I very much like the way that you have this structured. This is probably the best structure I have seen for any of the examples I have found. Do you have this source on Github somewhere that would allow me to experiment with the code? Thanks again

  2. Hi, will it work for widevine drm sample and how we can pass license token with corresponding header

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s