Search code examples
chromecast

Initial chromecast setup

excited to finally have some time to try developing on my chromecast but alas... can't even seem to get started.

I filled in the whitelist request, got the email confirming friday ( just in time for the weekend!), then I started looking at the samples and based on some I found wanted to get the hello world working.

  1. Configured the chrome cast to send the serial to google through the Mac chromecast app
  2. whitelisted the urls in the developer menu
  3. verified that the receiver code is actually on the same URL that the registration stated ( copy pasted from the confirmation email and it works).

What happens is I open my sender HTML from my server or my localhost and I can't seem to get the chromecast to show up ( yes I am on the same network).

I added logs to the code to verify if the event message was being received and it is NOT being received so I'm guessing it is something with the extension not being able to validate the app ID.

is there a log for the extension I can look into?

here is the sender code:

    <!DOCTYPE html>
<html data-cast-api-enabled="true">
<head>
<title>Hello sender!</title>
</head>
<body>
    <div class="receiver-div">
                <h3>Choose A Receiver</h3>
                <ul class="receiver-list">
                    <li>Looking for receivers...</li>
                </ul>
            </div>
    <button class="kill" disabled>Kill the Connection</button>
</body>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<script>
        var cast_api,
            cv_activity,
            receiverList,
            $killSwitch = $('.kill');
            console.log("initializing script");

        window.addEventListener('message', function(event) {
            console.log('Message received of type'+event.data.event);
            if (event.source === window && event.data &&
                    event.data.source === 'CastApi' &&
                    event.data.event === 'Hello') {
                initializeApi();
            }
        });

        initializeApi = function() {
                console.log('Initialize API called');
            if (!cast_api) {
                console.log("no cast api yet")
                cast_api = new cast.Api();
                cast_api.addReceiverListener('myidstring here', onReceiverList);
            }
        };

        onReceiverList = function(list) {
            console.log('on receiverlist called');
            if (list.length > 0) {
                receiverList = list;
                $('.receiver-list').empty();
                receiverList.forEach(function(receiver) {
                    $listItem = $('<li><a href="#" data-id="' + receiver.id + '">' + receiver.name + '</a></li>');
                    $listItem.on('click', receiverClicked);
                    $('.receiver-list').append($listItem);
                });
            }
        };

        receiverClicked = function(e) {
            e.preventDefault();

            var $target = $(e.target),
                receiver = _.find(receiverList, function(receiver) {
                    return receiver.id === $target.data('id');
                });

            doLaunch(receiver);
        };

        doLaunch = function(receiver) {
            if (!cv_activity) {
                var request = new cast.LaunchRequest('still my id string here', receiver);

                $killSwitch.prop('disabled', false);

                cast_api.launch(request, onLaunch);
            }
        };

        onLaunch = function(activity) {
            if (activity.status === 'running') {
                cv_activity = activity;

                cast_api.sendMessage(cv_activity.activityId, 'charz', {type: 'HelloWorld'});
            }
        };

        $killSwitch.on('click', function() {
            cast_api.stopActivity(cv_activity.activityId, function(){
                cv_activity = null;

                $killSwitch.prop('disabled', true);
            });
        });
    </script>
</html>

the only thing that gets logged is the "initializing script" line.

thank you in advance,

CR.

EDIT: I will mark Ali's answer as the answer as he put me on the path to fix it: the fact that debug meant whitelist had been done, had me look into the configuration on my side:

  1. file:// URLs do NOT work
  2. when I set up on own web server locally, with localhost/sender.html it works immediately.
  3. the whitelist MUST BE EXACT and not include the protocol ( apparently). I had whitelisted my url as : http://myserver/mypath/sender.html, and it did not work, finally adding the myserver/mypath/sender.html made it work flawlessly.

Maybe the doc could be updated to reflect this??

Solution

  • Try accessing http://<chromecast-ip>:9222 to see if your device is whitelisted correctly. You should see a page with a simple link in there that would open chrome debugger for your receiver.