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: https://github.com/fab1o/chromecast-angularjs-starterkit

Google used to have a sample on its github located at: github.com/googlecast/CastMediaPlayerStreamingDRM

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:

CastReceiverManager
CastMessageBus
MediaManager
HTML5 video element


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

HelloWorld
│
│index.html
│
├───css
│       app.css
│
├───scripts
│   │   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
│        
└───views
        home.html
        player.html
        splash.html

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: https://github.com/fab1o/chromecast-angularjs-starterkit

Advertisements

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s