Developing for Chromecast on Android

Developing for ChromecastCast Companion Library & Custom Receiver Application

Kurt Mbanje@ckurtm / peirr.com

What is Chromecast?

How does it work?

• Sender application

Two componentsApplications running on a mobile device or laptop

• Receiver application(HTML, JavaScript , CSS) app running on a Chromecast or other cast compatible device.

• Sender application

Two componentsApplications running on a mobile device or laptop

• Receiver application(HTML, JavaScript , CSS) app running on a Chromecast or other cast compatible device.

Receiver application

• Custom Media Receiver

3 Types of receivers

Requires application id , DRM Content, Data centric apps

• Styled Media ReceiverCan be styled with CSS files, requires application id

• Default Media ReceiverDoes not require application id, can use CastMediaControlIntent.DEFAULT_MEDIA_RECEIVER_APPLICATION_ID in your sender if using CCL

Custom Receiver

www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js

Receiver API

Simple Custom Receiver

<head> <title>LocalCast</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.getElementById("image").src= json.url; } //[1] get a handle to the receiver manager window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance(); castReceiverManager.onSenderDisconnected = function(event) { console.log('disconnected: ' + event.data); if (window.castReceiverManager.getSenders().length == 0) { //close the app if we have no more connected devices window.close(); } }; //[2] create a CastMessageBus to handle messages for a custom namespace window.messageBus = window.castReceiverManager.getCastMessageBus('urn:x-cast:com.peirr.localcast'); window.messageBus.onMessage = function(event) { var json = JSON.parse(event['data']); //decode the request from sender app window.sender = event.senderId; process(json); } //[4]start the listener window.castReceiverManager.start(); </script>

Publishing Receiver Application

• Development• Publish to any server & add endpoint to cast

console• Debug http://RECEIVER-IP-ADDRESS:9222

• ProductionServer has to be secure (https://<yourserver>)

• Google Cast SDK Developer Consolehttps://cast.google.com/publish/

Publishing





Publishing





Publishing

Sender Application

Android development options

compile "com.android.support:mediarouter-v7:23.3.0"compile 'com.google.android.gms:play-services-cast:8.4.0'

compile "com.android.support:mediarouter-v7: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 Libraryhttps://github.com/googlecast/CastCompanionLibrary-android

Example: LocalCasthttps://github.com/ckurtm/LocalCast

Initialize

CastConfiguration options =new CastConfiguration.Builder("84B70D9D") .enableAutoReconnect() .enableDebug() .build();DataCastManager.initialize(this,options);

Cast Button<item android:id="@+id/action_cast" android:title="@string/action_cast" app:actionProviderClass="android.support.v7.app.MediaRouteActionProvider" app:showAsAction="always"/>

@Overridepublic boolean onCreateOptionsMenu(Menu menu){ super.onCreateOptionsMenu(menu); getMenuInflater().inflate(R.menu.menu,menu); DataCastManager.getInstance().addMediaRouterButton(menu,R.id.action_cast); return true;}

Send data to Receiver Application

JSONObject obj = new JSONObject();String url = "http://"+ info.ip + ":" + info.port + "/" + item.getFile().getAbsolutePath();Log.d(TAG, "casting: " + url);try { obj.put("url",url); DataCastManager.getInstance().sendDataMessage(obj.toString(),"urn:x-cast:com.peirr.localcast");} catch (JSONException|IOException e) { e.printStackTrace();}

Questions

Mobile

Developing for Chromecast on Android