Google Cast Web Receiver — Introduction

Styled Media Receiver

A Web Receiver application is an HTML5/JavaScript application that runs on the Web Receiver device, such as a Chromecast. The Web 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 the content on the Web Receiver device.
• Handles custom messages from the sender application that are application-specific.

Sample receiver application

Web Receiver SDK

The Web Receiver SDK also comes with a built-in media player, which provides a seamless and easy playback experience. It also allows you to customize the player UI and provides your Web Receiver with the ability to intercept and override messages and methods to execute your custom business logic.

You can implement your Web Receiver application in the following ways:

• Use the Styled Media Receiver: This is a pre-built Web Receiver application that provides a media player UI for audio and video content. It provides a default UI for the Web Receiver application, but you can customize several elements in the UI with a CSS file.
• Develop a Custom Receiver: This is a custom built HTML5 app that you must host to handle the display of your app content on the TV. You may need to create a Custom Receiver if your app wants to display content other than audio/video media or if the Styled Media Receiver does not support the media types your app requires.

If you choose not to implement a Web Receiver, your application can use the Default Media Receiver.

Registration

To use the SMR for your application select the Styled Media Receiver option when you add a new application in the Google Cast SDK Developer Console.

To register your Cast application:

1. Sign in to the Google Cast SDK Developer Console.
2. From either the Overview page or Applications page, click Add New Application.
3. Select the type of Web Receiver app you will use, here it is Styled Media Receiver

Select this if your app streams video or audio content using one of the supported media types and you’d like to provide a user interface on the TV that uses either the default media player UI or a set of custom styles on top of the default media player UI.

The custom styles you may provide allow you to define the look for various elements of the player UI (such as the splash screen and progress bar) simply by providing a CSS file — you do not need to build a receiver app.

4. Fill in the details for your Web Receiver app:

Name field, this is the application name as it appears when the Web Receiver is loading or in the idle state if you are using the Styled Media Receiver.

Skin URL field, provide an HTTPS URL that points to your CSS file located on your own website. To use the default styles, leave the field empty. You can always edit this later if you want to provide or update your custom styles.

Guest mode allows your Web Receiver to support casting from senders not connected to the same WiFi network as the receiver.

To allow your app to discover Google Cast for audio devices, check the Supports casting to audio-only devices option

Click Done to return to the Applications page.

Note: You can edit these details later

Styled Media Receiver

The Styled Media Receiver (SMR) allows your sender application to play media on a Cast device without creating your own custom receiver application. You can customize the SMR color scheme and branding by providing your own CSS file during registration.

The Styled Media Receiver uses the following CSS classes:

• .background: The background for the receiver.
• .logo: The logo is 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 is 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 is shown when the media is playing.

.background {
  background: center no-repeat url(background.png);
}

.logo {
  background-image: url(logo.png);
}

.progressBar {
  background-color: rgb(238, 255, 65);
}

.splash {
  background-image: url(splash.png);
}

.watermark {
  background-image: url(watermark.png);
  background-size: 57px 57px;
}

Publish your application

Publishing your application makes your application available to all Cast devices worldwide. It also creates a listing for your application on Google properties such as the chromecast.com/apps listing site, where users can discover and download your app.

To publish your application:

1. In the Google Cast SDK Developer Console, from either the Overview page or Applications page, for the application you want to publish, click Publish.

If your application information is complete, a preview screen appears with the application information you entered in Edit application information. If not, a message appears citing the information you need to provide.

2. You can click Edit to go back and update any information.
3. If you’re ready to publish your application, click Publish.