# Chromecast on Web In this section you will learn everything about how THEOplayer works with Chromecast. ## API As a developer, you might need to use the THEOplayer Chromecast API to build a custom Chromecast UI and UX, or to dispatch an event to an analytics service, or for workflow purposes. For more information, see the API reference of [`Chromecast`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v11/api-reference/web/interfaces/Chromecast), a sub-interface of [`Cast`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v11/api-reference/web/interfaces/Cast) which inherits from [`VendorCast`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v11/api-reference/web/interfaces/VendorCast). Use the API as demonstrated below: ```javascript // const player = new THEOplayer.Player(...) const chromecastState = player.cast.chromecast.state; const isCasting = player.cast.chromecast.casting; // true or false // ... // if (want to start Chromecast) player.cast.chromecast.start(); // ... // if (want to stop Chromecast) player.cast.chromecast.stop(); // ... if (chromecastState != 'unavailable') { // Chromecast is possible player.cast.chromecast.addEventListener('statechange', function (event) { switch (event.state) { case 'connecting': // show Chromecast trying-to-connect icon break; case 'available': // show Chromecast available icon break; case 'connected': // show Chromecast connected icon break; case 'unavailable': // hide Chromecast icon break; } }); } ``` ## Sender Applications vs Receiver Applications When a viewer is streaming through a Chromecast device, they are actually casting content from a sender application (e.g. an Android application) to a receiver application. A sender application informs a physical Chromecast device which receiver application it should load through an application ID. ![Casting approaches](/pr-860/assets/images/casting-approaches-45dc2983f20d11409d27d3248b57a6ef.png "Casting approaches") By specifying the application ID, you implicitly connect it with a type of receiver application. The following three types of receiver applications are common: | Type | Maintainer | Info | Benefits | Disadvantages | | --------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | Default THEOplayer Receiver Application | THEOplayer | This is the default receiver application THEOplayer SDKs will connect with. The app ID of this default THEOplayer receiver application is `8E80B9CE`. | You (i.e. the developer) do not need to do anything extra on the Chromecast receiver application side. You don't need to create a Chromecast receiver, you don't need to register it at, ... - it just works. | You are limited w\.r.t. customizing the UI and integrating custom logic. | | Custom THEOplayer Receiver Application | Developer + THEOplayer | This is a custom receiver application you can build, and where you integrate the [THEOplayer Chromecast SDK](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/getting-started/sdks/chromecast/getting-started.md). | You (i.e. the developer) can adjust the look and feel, and integrate custom logic. | You need to create a Chromecast receiver, register it, maintain it, ... | | Customer Receiver Application | Developer | This is a custom receiver application you can build, but without using the THEOplayer Chromecast SDK. | The THEOplayer Chromecast Receiver SDK is not a dependency. | You are responsible for building and maintaining the receiver application, and its connection with the various sender applications. | If you have implemented THEOplayer in your sender application, you can [enable Chromecast](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/cast/chromecast/enable-chromecast-on-the-sender.md). Furthermore, you can also [specify the application ID](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/cast/chromecast/enable-chromecast-on-the-sender.md#custom-receiver-app) in your sender application. ## Whitelisting Receiver Applications Streaming services and products often require you to whitelist domain names to allow playback. When viewers are casting content to a Chromecast receiver application, your Chromecast device will actually stream the content on a domain name. In other words: CORS and whitelisting/blacklisting policies do apply to Chromecast sessions. Ensure that you've whitelisted the domain name which hosts your Chromecast receiver application. (You can look up the domain name of your receiver application at .) If you're using the Default THEOplayer Receiver Application you may whitelist `https://d3ojqkc95d8mrd.cloudfront.net/`. ## Related articles * [Connecting from custom Sender applications](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/cast/chromecast/connecting-from-custom-sender-applications.md) * [Debugging](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/cast/chromecast/debugging.md) * [How to configure a different stream to Chromecast](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/cast/chromecast/how-to-configure-to-a-different-stream.md) * [Sending messages from/to Sender to/from Receiver](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/cast/chromecast/sending-messages-from-to-sender-to-from-receiver.md) * [Pass subtitle selection on to Chromecast](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/cast/chromecast/pass-subtitle-section-on-to-chromecast.md) * [Enable Chromecast on the Sender](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/how-to-guides/web/cast/chromecast/enable-chromecast-on-the-sender.md)