Chromecast custom receiver without media

4
votes

I want to show a webpage using Chromecast. Currently the page is very simple (just "Hello World!"), but I am hoping to make it more complex and possibly interactive with a second screen. However, I have found that if I don't create a media manager (new cast.receiver.MediaManager(window.mediaElement)) the session immediately expires on my sender (function sessionUpdateListener(false) is called). The page is still displayed, but I can no longer interact with it, including stopping the app.

I'm wondering if this is by design, a bug, or am I doing something wrong?

Here is the code to my custom receiver...

<html>
<head>
    <title>Hello World Chromecast App</title>
    <style type="text/css">
        *
        {
            color: white;
        }
    </style>
</head>
<body>
    <div>Hello World!</div>

    <script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
            window.castReceiverManager.start();
        }
    </script>
</body>
</html>
3
google-castchromecast

3 Answers

2
votes

The trick is that you need to call start after creating a message bus. Once you do that then the session will stay alive on the sender.

<script type="text/javascript">
    (function () {
        var mgr;
        var bus;

        window.onload = function () {
            mgr = cast.receiver.CastReceiverManager.getInstance();
            bus = mgr.getCastMessageBus('urn:x-cast:com.sample.hello');
            mgr.start();
        }
    })();
</script>
1
votes

In order to exchange messages between sender and receiver, you need to define a communication channel and protocol (namespace) to do so.

You can use MediaManager to do this for you when the protocol to use is media related (LOAD, PLAY, PAUSE...) or you can create your own. MediaManager creates a CastMessageBus under the hood.

To create your own communication channel and protocol, you need to get either a CastMessageBus or a CastChannel.

If you do not register any communication channel and protocol (namespace), then the sender is going to be unable to communicate with your application.

For a sample receiver look at TicTacToe. As you can see it creates its own CastMessageBus to exchange JSON messages:

TicTacToe.PROTOCOL = 'urn:x-cast:com.google.cast.demo.tictactoe'; this.castMessageBus_ = this.castReceiverManager_.getCastMessageBus(TicTacToe.PROTOCOL, cast.receiver.CastMessageBus.MessageType.JSON);

The protocol is just a unique string, starting with 'urn:x-cast:' that you can define and must be used by the receiver and the sender to identify the protocol.

1
votes

This is by design. You have two options:

1) Create a media manager.

window.mediaElement = document.getElementById('receiverVideoElement');
window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);

OR ...

2) Create a custom namespace for message bus.

// create a CastMessageBus to handle messages for a custom namespace
window.messageBus =
  window.castReceiverManager.getCastMessageBus(
    'urn:x-cast:com.google.cast.sample.firework');

Otherwise your receiver terminate sender session. Note that casting action still works without either of the above conditions being met but there is no way for sender to communicate further with receiver.