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?

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.

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.

Comments

[mpen]

@abielita I'm a web developer. I'm asking how I can make my own website Chrome-castable, not how to use Chromecast.

[Skip R]

Some info on "default media receiver" at 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?

[Aaron Cicali]

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.