Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Developing for Chromecast
Cast Companion Library & Custom Receiver Application
Kurt Mbanje
@ckurtm / peirr.com
What is Chromecast?
How does it work?
• Sender application
Two components
Applications running on a mobile device or laptop
• Receiver application
(HTML, JavaSc...
• Sender application
Two components
Applications running on a mobile device or laptop
• Receiver application
(HTML, JavaSc...
Receiver application
• Custom Media Receiver
3 Types of receivers
Requires application id , DRM Content, Data centric apps
• Styled Media Recei...
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_re...
<script>
//[3] handle the payload from the sender
function process(json){
console.log('received: ' + json.url);
document.g...
Publishing Receiver
Application
• Development
• Publish to any server & add endpoint to cast
console
• Debug http://RECEIVER-IP-ADDRESS:9222
• Production
...
• Development
• Publish to any server & add endpoint to cast
console
• Debug http://RECEIVER-IP-ADDRESS:9222
• Production
...
• Development
• Publish to any server & add endpoint to cast
console
• Debug http://RECEIVER-IP-ADDRESS:9222
• Production
...
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...
Cast Companion Library
Cast Companion Library
https://github.com/googlecast/CastCompanionLibrary-android
Example: LocalCast
https://github.com/ckurtm/LocalCast
Initialize
CastConfiguration options =new CastConfiguration.Builder("84B70D9D")
.enableAutoReconnect()
.enableDebug()
.bui...
Cast Button
<item
android:id="@+id/action_cast"
android:title="@string/action_cast"
app:actionProviderClass="android.suppo...
Send data to Receiver Application
JSONObject obj = new JSONObject();
String url = "http://"+ info.ip + ":" + info.port + "...
Questions
Developing for Chromecast on Android
Developing for Chromecast on Android
Developing for Chromecast on Android
Developing for Chromecast on Android
Developing for Chromecast on Android
Developing for Chromecast on Android
Upcoming SlideShare
Loading in …5
×

Developing for Chromecast on Android

558 views

Published on

We look at how you can create an app that is Cast enabled making use of the Cast Companion LIbrary

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Developing for Chromecast on Android

  1. 1. Developing for Chromecast Cast Companion Library & Custom Receiver Application
  2. 2. Kurt Mbanje @ckurtm / peirr.com
  3. 3. What is Chromecast?
  4. 4. How does it work?
  5. 5. • Sender application Two components Applications running on a mobile device or laptop • Receiver application (HTML, JavaScript , CSS) app running on a Chromecast or other cast compatible device.
  6. 6. • Sender application Two components Applications running on a mobile device or laptop • Receiver application (HTML, JavaScript , CSS) app running on a Chromecast or other cast compatible device.
  7. 7. Receiver application
  8. 8. • Custom Media Receiver 3 Types of receivers 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 CastMediaControlIntent.DEFAULT_MEDIA_RECEIVER_APPLICATION_ID in your sender if using CCL
  9. 9. Custom Receiver
  10. 10. www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js Receiver API
  11. 11. 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>
  12. 12. <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>
  13. 13. Publishing Receiver Application
  14. 14. • Development • Publish to any server & add endpoint to cast console • Debug http://RECEIVER-IP-ADDRESS:9222 • Production Server has to be secure (https://<yourserver>) • Google Cast SDK Developer Console https://cast.google.com/publish/ Publishing
  15. 15. • Development • Publish to any server & add endpoint to cast console • Debug http://RECEIVER-IP-ADDRESS:9222 • Production Server has to be secure (https://<yourserver>) • Google Cast SDK Developer Console https://cast.google.com/publish/ Publishing
  16. 16. • Development • Publish to any server & add endpoint to cast console • Debug http://RECEIVER-IP-ADDRESS:9222 • Production Server has to be secure (https://<yourserver>) • Google Cast SDK Developer Console https://cast.google.com/publish/ Publishing
  17. 17. Sender Application
  18. 18. Android development options
  19. 19. compile "com.android.support:mediarouter-v7:23.3.0" compile 'com.google.android.gms:play-services-cast:8.4.0'
  20. 20. 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'
  21. 21. Cast Companion Library
  22. 22. Cast Companion Library https://github.com/googlecast/CastCompanionLibrary-android
  23. 23. Example: LocalCast https://github.com/ckurtm/LocalCast
  24. 24. Initialize CastConfiguration options =new CastConfiguration.Builder("84B70D9D") .enableAutoReconnect() .enableDebug() .build(); DataCastManager.initialize(this,options);
  25. 25. Cast Button <item android:id="@+id/action_cast" android:title="@string/action_cast" app:actionProviderClass="android.support.v7.app.MediaRouteActionProvider" app:showAsAction="always"/> @Override public boolean onCreateOptionsMenu(Menu menu){ super.onCreateOptionsMenu(menu); getMenuInflater().inflate(R.menu.menu,menu); DataCastManager.getInstance().addMediaRouterButton(menu,R.id.action_cast); return true; }
  26. 26. 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(); }
  27. 27. Questions

×