Configuring Chromecast Screen Sharing

The SmartTUBE iOS/Android Mobile Apps support content streaming to Chromecast devices, including TVs and other devices that are equipped with built-in Chromecast functionality. This integration utilizes Google Chromecast technology to facilitate transferring of content watching over a local network.

Before diving into the configuration process, it’s essential to understand how Chromecast technology operates internally.

How Chromecast Works

The life cycle of the Chromecast content sharing looks as follows:

1. Chromecast Connection
   The user connects a Chromecast device to their local network.
2. Device Discovery
   Once connected, the Chromecast device broadcasts its presence on the network, enabling other devices on the local network to discover it.
3. Mobile Device Connection
   The user connects a mobile device with the SmartTUBE App installed to the same local network.
4. Content Streaming Initiation
   The user launches the SmartTUBE App, selects content to watch, and clicks on the Chromecast icon located within the player interface.
5. Device Selection
   From the dropdown list that appears, the user selects the specific Chromecast device they wish to cast to.
6. Message Transmission
   The SmartTUBE App sends a message to the Chromecast device. This message includes the URL of the media stream and the ID of the OTT operator’s Custom Web Receiver.Web Receiver is an HTML5/JavaScript application that runs on a Chromecast device. It provides an interface to display the content on the TV and handles messages from the sender application (SmartTUBE iOS/Android App) to control content.

   The need for the operator’s Custom Web Receiver instead of using the default one arises from the requirement to support Widevine-encrypted streams being sent to the Chromecast device.

7. Custom Web Receiver Download
   Upon receiving the message, the Chromecast device requests to download the Custom Web Receiver from Google’s cloud service.
8. Playback Initiation
   After successfully downloading the Custom Web Receiver, the Chromecast device begins media playback using the receiver.

Implementing Chromecast Screen Sharing for SmartTUBE

The Chromecast Web Receiver is a lightweight static website, with a total size of no more than 10 kilobytes, consisting of three files:

• index.html
• css/receiver.css
• web/js/receiver.js

This website is loaded each time a user connects to the Chromecast device from a mobile device.

To successfully implement Chromecast content sharing on the SmartTUBE platform, follow these steps:

Step 1: Download the Web Receiver

Download the Web Receiver files from this link.

Step 2: Customize the Web Receiver (Optional)

You have the option to customize the appearance of the Web Receiver. To change the color of the player’s progress bar, modify the following line in the css/receiver.css file:

–progress-color: rgb(0, 255, 0);

For more styling options, refer to the Styled Media Receiver CSS documentation.

Step 3: Publish the Custom Web Receiver

We recommend deploying the Web Receiver on the front-end node(s) of your platform under the path http://[fe_host]/chromecast_receiver/. The URL for your Web Receiver should resemble the following example:

http://fe.some.tv/chromecast_receiver/index.html

Step 4: Register the Custom Web Receiver on Google Console

Follow these steps to register your Receiver:

1. Open Google Cast Developer Console and begin the registration process. You may be asked to pay a registration fee.
2. From either the Overview page or Applications page, click Add New Application.
3. Select the type of Web Receiver app as Custom Receiver.
4. Fill out and submit the required parameters:
   • Name: [Operator Name]
   • Receiver Application URL: e.g., https://web_fe.some.tv/chromecast_receiver/Note: The HTTPS protocol must be used to support encrypted streams.
   • Guest Mode: true (default)
   • Google Cast for Audio: false (default)
   • ANDROID TV APPLICATION DETAILS: Package Name: Leave blank

5. Retrieve your Application ID. This ID will be used in API calls from iOS and Android applications.
6. (Optional) Add Cast Receiver Devices for testing purposes.

Step 5: Submit the Application ID

Send the Application ID of your Custom Web Receiver to SmartLabs representatives. We will integrate it into the upcoming builds of the SmartTUBE iOS and Android Apps.

Step 6: Assign “DASH+Widevine” Streams to Chromecast Devices

Chromecast devices support MPEG-DASH streams encrypted using Widevine DRM technology. To ensure compatibility, you must group the Chromecast devices with those that already support these streams within your platform.

1. Access the SmartTUBE Admin Console and navigate to the Dictionaries > Devices > Device types.
2. Click the Add (+) button to create a new Device type.
3. Fill in the following parameters:
   1. Name: CHROMECAST
   2. External ID: CHROMECAST
   3. Contains device types: Leave this field blank.
   4. Session limit priority: Fill in this field optionally; refer to the tooltip for a description of its purpose.
   5. Redefinitions tab: Leave this blank.

4. Click the Save button to save changes.
5. Go back to the list of Device types.
6. Select the group Device type (i.e. containing other Device types) that is already set up to receive MPEG-DASH streams with Widevine encryption.To identify which device types on your platform are configured for such streams, follow these steps:
   1. Navigate to the Channels > Channels > [select a channel you know is being streamed in DASH+Widevine] > Streams tab.
   2. In the list of streams, look for the entry with an MPEG-DASH URL (usually ending in .mpd) in the Stream URL field and labeled as Widevine in the Stream Encryption field.
   3. The device type you are looking for will be specified in field Device type.

7. In the group Device type, find the Contains device types field and add the newly created CHROMECAST device type.
8. Click the Save button to finalize your configuration.

By following these steps, you will successfully configure the Chromecast Screen Sharing feature for your SmartTUBE platform.