How to Chromecast-enable a website?

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?

Solution

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/overview.

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.