Building Styled Media Receiver Application for Chromecast

Posted By : Sapna Sharma | 25-Jun-2015

A receiver application is an HTML5/JavaScript application that runs on the cast device, such as a Chromecast.

These are the functions of receiver application :

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.

Styled Media Receiver

The Styled Media Receiver (SMR) is a pre-built receiver application that provides a media player UI for audio and video content. It allows your sender application to play media on a Cast device without creating your own custom receiver application.It provides a default UI for the receiver application, but you can customize several elements in the UI and can style the interface with your own colors and branding assets using a CSS file.

CSS

The SMR uses the following five CSS classes:

background: The background for the receiver.
logo: The logo shown when the receiver is launching. This class is also used when the receiver is in the idle state and no splash class is declared.
progressBar: The progress bar for media playback.
splash: The screen shown when the receiver is in an idle state. If this class is not declared, the receiver will default to logo or the app name.
watermark: A watermark shown when the media is playing.

Here is an example.css file that uses the above classes:

.background {
  background: url(background.png);
}
.logo {
  background-image: url(logo.png);
}
.progressBar {
  background-color: rgb(155, 255, 100);
}
.splash {
  background-image: url(splash.png);
}
.watermark {
  background-image: url(watermark.png);
  background-size: 57px 57px;
}

Registration

You must register your Styled Media Receiver in order to receive an application ID that's used with API calls from the sender application.Registering your application allows you to test it against your registered Cast device before you publish the application. Publishing the application makes it available to all Cast devices.

To register your Cast application:

1.Sign in to the Google Cast SDK Developer Console.

2.Click Add New Application.

3.Select Styled Media Receiver type of receiver app.

4.Fill in the details for your receiver app :

a) In the Name field, enter your app name

b) In the Skin URL field, specify the https URL for the style sheet.You can use your own server to host the CSS file or you can use Google Drive to host the file for you. Once you provide the URL to your CSS file, you can click Preview to see how your styles will look on the receiver.

Host webpages with Drive

To host a webpage with Drive:

Open Drive at drive.google.com and select a file.
Click the Share button at the top of the page.
Click Advanced in the bottom right corner of the sharing box.
Click Change....
Choose On - Public on the web and click Save.
Before closing the sharing box, copy the document ID from the URL in the field below "Link to share". The document ID is a string of uppercase and lowercase letters and numbers between slashes in the URL.
Share the URL that looks like "www.googledrive.com/host/[doc id] where [doc id] is replaced by the document ID you copied in step 6.

c) Check or leave unchecked the Supports Google Cast Guest mode checkbox.

d) Check or leave unchecked the Supports casting to audio-only devices checkbox.

e) In the Sender Details section, provide the following for each platform your app supports:

Android : the fully-qualified name of your application package.
IOS : the iTunes ID and bundle ID required by Apple.
Chrome : the website URL for your application.

f) In the Listing Details section, choose whether to list your application on Google properties such as chromecast.com/apps.

g) From the Category drop-down menu, select the category which best describes your application.

h) To describe the countries in which your app is available, select either the All countries or Only in selected countries radio button; if specifying countries, check the boxes for those countries in the list that appears.

i) In the Title field, provide a descriptive title for your application.

j) In the Description field, enter a description for your application.

k) In the Graphics section, click the plus sign to upload the icon image for your application.

l) Click Save.Then you will get Application ID.

Publish your application

Publishing your application makes your application available to all Cast devices worldwide. If you're ready to publish your application, click Publish

THANKS