January 19, 2015

Everything You NEED To Know About Chrome Cast and Its Development

What is Chromecast?

Google Chromecast is a device from Google that casts visual media content from mobile devices right on to the television screen. The device needs to be plugged into the HDMI port on your TV and, with your Android phones, tablets, iPhones, iPads, Macs and Windows laptops, you can enjoy your favorite entertainment media and apps on the big screen. Furthermore, while the content is being played on the TV, the user can multitask on their mobile device without interrupting the video playback. For example, a user can search for a video on their phone’s YouTube application and then watch it on their TV via a Google Cast device while they are browsing through other information on the Internet.

Chromecast is not only useful in streaming videos and photos from phone, but also very handy in playing multiplayer games with family and friends.

There are mainly three features highlighted this year for Google Chromecast:

Guest Mode: Chromecast allows guests to cast on Chromecast without connecting to Wi-Fi, thus you don’t need to share your Wi-Fi password with anyone. When the guest mode is activated, Chromecast emits special Wi-Fi beacon, and when the application is launched in phone, it detects that beacon and cast icon is shown in app.

Backdrop: Google is introducing a new feature called Backdrop that lets you customize this idle screen. You can choose what photos you want to see using categories you like (Art, Places, Lifestyle, and others) or show your own personal photos. You can also add news and weather to your backdrops for a constant feed of information.

Screen Mirroring: Chromecast will be able to mirror the screen from your phone. By going to the Chromecast app on Android, you can cast your phone or tablet’s screen straight to your TV so that you can watch anything.

Now, let’s jump into development.

The sender may be a phone or tablet running on Android or iOS, or it may be a laptop computer running Chrome. A sender application running on the sender device uses the Google Cast API for the appropriate platform to discover and communicate with the receiver application running on the receiver device.

The receiver device is optimized for video playback with a receiver application that receives data over Internet Protocol and transmits it to the television.

Before a Cast session can begin, both the sender device (e.g. Mobile phone) and the receiver device (e.g. a Chromecast plugged into a TV) must be connected to the same Wi-Fi network.

Chromecast Mechanism:

1) Chrome cast API from sender device tries to connect to Chromecast and sends app id

2) Chromecast uses app id to get URL of HTML5 application

3) Then using that URL, HTML page is rendered on screen

Let’s check out the architecture now.

Chromecast architecture is divided in two parts: Sender application (mobile, chrome browser) and receiver application (Chromecast attached device).

A sender application uses the following Cast APIs:

Android API – support from Android 2.3 (Ginger Bread)
iOS API – support from iOS version 6 and later
Chrome API for Chrome Browser

A receiver application is an HTML5/JavaScript application that runs on the receiver device, such as a Chromecast. The receiver application performs the following functions:

Provides an interface to display the app’s content on the TV.
Handles messages from the sender application to control content on the receiver device.
Handles custom messages from the sender application that are application-specific (applicable only when using a Custom Receiver).

Receiver application has three categories:

1) Default Media Receiver:

This is a pre-built receiver application hosted by Google that is designed for streaming your audio and video content. It does not require you to register with the Google Cast SDK Developer Console, but you cannot customize any of the UI in the Default Media Receiver.

2) Styled Media Receiver:

This is a pre-built receiver application that provides a media player UI for audio and video content. It provides a default UI for the receiver application, but you can customize several elements in the UI with a CSS file.

To use the Styled Media Receiver, select Styled Media Receiver when registering a new application and (optionally) provide the URL to a CSS file that defines a custom look for the receiver application’s UI.

For details about the CSS styles that allow you to customize the receiver application’s UI, see the Styled Media Receiver guide.

3) Custom Receiver:

If your app provides content such as a game or image gallery or requires support for media types other than those described in Supported Media, then you need to build a custom receiver application. A custom receiver is an HTML5 app that you host on your own servers and that must be implemented using the JavaScript Receiver API.

Now, a question arises that which receiver should I use???

Chromecast developer site gives good chart to demonstrate where to use which receiver.

That’s all you need to know before starting development for Chromecast.