Skip to main content

Chromecast

Google Chromecast is a popular streaming device that allows users to easily access and view content from a variety of sources, including streaming services, websites, and mobile apps.

“Chromecast” can refer to both a set of devices and a protocol. Google sells standalone Chromecast devices that can be plugged into a TV via HDMI. But there are also third-party devices that implement Chromecast built-in (formerly known as Google Cast), which allows streaming to that device as if it were a standalone Chromecast device.

There are a few different versions of the Chromecast. They all run a simplified ChromeOS or Android TV, and use a web interface to play media (audio or video). The web framework opens a page on the device, which has some limited capabilities. The page is meant to accept a media link, and depending on the webpage handling that link, do something with it (play, pause, etc.).

These pages are known as “receivers”, since they receive the media link. There is a default receiver that handles standalone video without any setup. However to combine our music with your video, we’ll need to use a custom receiver. This helps provide a seamless and integrated experience for your users, while staying within our legal requirements.

Additionally, on Google devices, the operating system and its Chrome-like browser are finicky. We’ve encountered scenarios with these devices using our JavaScript SDK where inactive audio elements would cause all media elements to pause. To conquer this, we developed a separate branch of our JavaScript SDK that detects a Chromecast and does not have inactive audio elements. This SDK is only used for the receiver page.

When developing a custom receiver, you host a simple webpage that handles the APIs provided by the Chromecast SDK. Ours is located at demo.feed.fm/cast/demo/index.html

If you are a Chromecast developer, you can submit your own custom receiver. Once submitted, you will receive a custom receiver ID (ours is 37FFD8F7, but you can also have non-published custom receiver IDs, and test with devices that you submit to be whitelisted with your app. Using our custom receiver ID is enough to get basic functionality working for your application.

Theory of Operation​

The Chromecast and the user’s device must both be connected to the same Wi-Fi network before the user can stream media from their device to a Chromecast-compatible TV or display.

The user can choose the Chromecast as the destination for their media once the device and Chromecast are linked. The Chromecast will then launch a webpage called a receiver, which is made to handle the APIs offered by the Chromecast SDK.

The Chromecast will host the receiver webpage locally, and it can be accessed using a receiver ID, which also makes sure that the Chromecast and the user’s device are properly paired. Once the receiver webpage is open, the user can choose the content they want to stream, and the receiver will take care of streaming that content to the Chromecast.

Process​

  1. The Chromecast receiver app is installed on a Chromecast device and registered in the Google Cast Developer Console.
  2. A sender device, such as a smartphone or tablet, requests to play a video and its related audio to the Chromecast receiver app using the Google Cast framework.
  3. The Feed.fm music server sends the message to the Chromecast receiver app, which then downloads the requested video and audio.
  4. The Chromecast receiver app plays the Feed.fm music in addition to the video and audio.
  5. To control the playback of the Feed.fm music, the Chromecast receiver app responds to control messages from the sender device, such as play, pause, and change station.
  6. The Feed.fm music is played through the TV or display to which the Chromecast device is attached.
  7. The Chromecast receiver app will adjust the volume in accordance with the transmitter device’s ability to manage the Feed.fm audio volume.

Generally speaking, the Chromecast receiver app acts as a conduit between the sender device and the Feed.fm music service, enabling the sender device to manage the streaming of music together with a video and its audio on the Chromecast device. The receiver app takes control of commands from the sender device, processes them, retrieves and plays the requested media, and modifies the volume as necessary.

Integration​

An exclusive Chromecast receiver app that we created plays Feed.fm music in tandem with a full-screen video and its accompanying audio. Messages that control audio playback, such as play, pause, and change station, can be used to control the receiver. You have the option of using the publicly available receiver app as-is, or accessing the receiver’s source code to build a personalized receiver with the features you want.

Making use of the sample receiver​

The user must initialize the receiver app ID, which is 37FFD8F7, and integrate the Google Cast framework into their website in order to use the sample receiver. Once the Chromecast has connected successfully, they can use the startPlay function and create an event handler for it. The user can then connect to the receiver and start playing music using the Feed.fm music service by pressing the given “Cast” button.

Trying out the sample receiver locally​

You can clone the feedfm/chromecast-demo repository and install any required node_modules before using the receiver demo. After that, you can launch an HTTP server and, if desired, utilize ngrok to make the receiver available online. Before restarting the device to make sure it has the most recent data, you must register the receiver app on the Google Cast Developer Console. The user can then connect to their development device and set the app ID using the Cast Tool. You can load media using the “Load media by content URL” capability.

Using our code to make your own receiver​

You can fork and alter the demo, and develop as described above to make it even more custom.