How to Chromecast-enable a website?

Question

This article explains the benefits of a "Chromecast-enabled site":

Higher quality: Chromecast-enabled sites can serve high quality content that is best for viewing on TV. This will often means you'll get a full 1080p high definition picture; for some content you may also get 5.1 surround sound (if supported by your TV or receiver). When Casting a tab, you are limited to a maximum of 720p (if supported by your computer).

Battery life and computer load: Chromecast-enabled sites play directly on Chromecast devices and put no load on your computer. Casting a tab requires a lot of your computer's power, which is why it's not supported on all computers.

Plays independently: When you play from a Chromecast-enabled site, you can shut down your computer or close the lid. With tab projection, you need to keep your computer on throughout the cast.

However, it doesn't explain how to enable Chromecasting on a website.

What do I have to do to enable Chromecasting on my website?

Is it just videos that I can cast, or could I serve, for example, a realtime news feed without the need for a computer to power it?

You may check this [support page](https://support.google.com/chromecast/answer/3228332?hl=en). It stated how to cast content from Chrome. First, you need to set up casting from Chrome. Then cast content from Chromecast-enabled site. You can cast the majority of web content. Sites using plug-ins like Silverlight, Quicktime & VLC aren’t supported and may result in a lack of picture or sound. — abielita, Jul 13 '17 at 16:17
@abielita I'm a web developer. I'm asking how I can make my own website Chrome-castable, not how to use Chromecast. — mpen, Jul 13 '17 at 23:12
Did you figure out how to do it ? If yes, can you please share ! Thank you ! — Shrinath, Jan 27 '18 at 19:25
Is this even possible. It looks like nobody have an answer to casting a webpage. Media like audio and video is fine, but no webpages hmm. — Lasker, Nov 09 '18 at 10:55

score 17 · Accepted Answer · edited Feb 24 '19 at 17:27

Below is what worked for me.

1. Add a Chromecast button to your page

<button is='google-cast-button'></button>

Google's Chromecast Javascript client will automatically give this button its magic powers. It seems it must be a <button> tag, <div> or <span> won't do.

2. Define the Chromecast onload handler

The code below is a minimal implementation, it just plays a single mp3 upon casting. The complete documentation is available at https://developers.google.com/cast/docs.

window.__onGCastApiAvailable = function(isAvailable){
    if(! isAvailable){
        return false;
    }

    var castContext = cast.framework.CastContext.getInstance();

    castContext.setOptions({
        autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
        receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
    });

    var stateChanged = cast.framework.CastContextEventType.CAST_STATE_CHANGED;
    castContext.addEventListener(stateChanged, function(event){
        var castSession = castContext.getCurrentSession();
        var media = new chrome.cast.media.MediaInfo('https://www.example.com/my-song.mp3', 'audio/mp3');
        var request = new chrome.cast.media.LoadRequest(media);

        castSession && castSession
            .loadMedia(request)
            .then(function(){
                console.log('Success');
            })
            .catch(function(error){
                console.log('Error: ' + error);
            });
    });
};

3. Include Google's Chromecast Javascript client library

Upon loading, this Javascript client will call your handler defined in step #2.

<script src='https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1'></script>

Note: the chrome.cast and cast.framework API does not come from this client library, but from Google Chrome itself... the framework is built into the Google Chrome browser.

Note: this example shows how to render a "default media receiver" to your Chromecast device. If you want to further customize the experience seen on the device you're Chromecasting to, you'll need to register with Google, pay $5, and do a bunch more work.

Some info on "default media receiver" at https://developers.google.com/cast/docs/developers - it is not clear what you get. Is there a working site out there that demonstrates what "default media receiver" looks like in browser? — Skip R, Aug 13 '20 at 06:48
The *default media receiver* refers to the experience on the device being **casted to**. Simply cast something to your favorite TV or other device to see what that looks like. It's possible that experience will change over time as Google updates it (e.g. videos just look like videos, but casting an mp3 might display a simple music note icon or even some advanced rhythm-matched synthesized visuals.) The *default* receive is whatever Google wants it to be, but as a developer you also have control over customizing this experience at the receiving device end. — Aaron Cicali, Aug 13 '20 at 19:57

How to Chromecast-enable a website?

1 Answers1

Linked