Developing for Chromecast Companion Library Custom Receiver Application

Developing for Chromecast Companion Library & Custom Receiver Application

Kurt Mbanje @ckurtm / peirr. com

What is Chromecast?

How does it work?

Two components • Sender application Applications running on a mobile device or laptop • Receiver application (HTML, Java. Script , CSS) app running on a Chromecast or other cast compatible device.

Two components • Sender application Applications running on a mobile device or laptop • Receiver application (HTML, Java. Script , CSS) app running on a Chromecast or other cast compatible device.

Receiver application

3 Types of receivers • Custom Media Receiver Requires application id , DRM Content, Data centric apps • Styled Media Receiver Can be styled with CSS files, requires application id • Default Media Receiver Does not require application id, can use Cast. Media. Control. Intent. DEFAULT_MEDIA_RECEIVER_APPLICATION_ID in your sender if using CCL

Custom Receiver

Receiver API www. gstatic. com/cast/sdk/libs/receiver/2. 0. 0/cast_receiver. js

Simple Custom Receiver <head> <title>Local. Cast</title> <script src="//www. gstatic. com/cast/sdk/libs/receiver/2. 0. 0/cast_receiver. js"></script> <link rel="stylesheet" href="receiver. css"/> </head>

<script> //[3] handle the payload from the sender function process(json){ console. log('received: ' + json. url); document. get. Element. By. Id("image"). src= json. url; } //[1] get a handle to the receiver manager window. cast. Receiver. Manager = cast. receiver. Cast. Receiver. Manager. get. Instance(); cast. Receiver. Manager. on. Sender. Disconnected = function(event) { console. log('disconnected: ' + event. data); if (window. cast. Receiver. Manager. get. Senders(). length == 0) { //close the app if we have no more connected devices window. close(); } }; //[2] create a Cast. Message. Bus to handle messages for a custom namespace window. message. Bus = window. cast. Receiver. Manager. get. Cast. Message. Bus('urn: x-cast: com. peirr. localcast'); window. message. Bus. on. Message = function(event) { var json = JSON. parse(event['data']); //decode the request from sender app window. sender = event. sender. Id; process(json); } //[4]start the listener window. cast. Receiver. Manager. start(); </script>

Publishing Receiver Application

Publishing • Google Cast SDK Developer Console https: //cast. google. com/publish/ • Development • Publish to any server & add endpoint to cast console • Debug http: //RECEIVER-IP-ADDRESS: 9222 • Production Server has to be secure (https: //<yourserver>)

Publishing • Google Cast SDK Developer Console https: //cast. google. com/publish/ • Development • Publish to any server & add endpoint to cast console • Debug http: //RECEIVER-IP-ADDRESS: 9222 • Production Server has to be secure (https: //<yourserver>)

Publishing • Google Cast SDK Developer Console https: //cast. google. com/publish/ • Development • Publish to any server & add endpoint to cast console • Debug http: //RECEIVER-IP-ADDRESS: 9222 • Production Server has to be secure (https: //<yourserver>)

Sender Application

Android development options

compile "com. android. support: mediarouter-v 7: 23. 3. 0" compile 'com. google. android. gms: play-services-cast: 8. 4. 0'

compile "com. android. support: mediarouter-v 7: 23. 3. 0" compile 'com. google. android. gms: play-services-cast: 8. 4. 0' compile 'com. google. android. libraries. cast. companionlibrary: ccl: 2. 8. 3'

Cast Companion Library

Cast Companion Library https: //github. com/googlecast/Cast. Companion. Library-android

Example: Local. Cast https: //github. com/ckurtm/Local. Cast

Initialize Cast. Configuration options =new Cast. Configuration. Builder("84 B 70 D 9 D"). enable. Auto. Reconnect(). enable. Debug(). build(); Data. Cast. Manager. initialize(this, options);

Cast Button <item android: id="@+id/action_cast" android: title="@string/action_cast" app: action. Provider. Class="android. support. v 7. app. Media. Route. Action. Provider" app: show. As. Action="always"/> @Override public boolean on. Create. Options. Menu(Menu menu){ super. on. Create. Options. Menu(menu); get. Menu. Inflater(). inflate(R. menu, menu); Data. Cast. Manager. get. Instance(). add. Media. Router. Button(menu, R. id. action_cast); return true; }

Send data to Receiver Application JSONObject obj = new JSONObject(); String url = "http: //"+ info. ip + ": " + info. port + "/" + item. get. File(). get. Absolute. Path(); Log. d(TAG, "casting: " + url); try { obj. put("url", url); Data. Cast. Manager. get. Instance(). send. Data. Message(obj. to. String(), "urn: xcast: com. peirr. localcast"); } catch (JSONException|IOException e) { e. print. Stack. Trace(); }

Questions