Creating your own
Paul Lammertsma
CTO, Pixplicity
Google Cast App
Google Cast?
Google Cast?
Google Cast?
• Netflix, YouTube, Google Play Movies, Music & TV
• Stream on the TV
• Control from Android, iOS or Chrome
•...
You’ll need
• TV with HDMI
• WiFi with Internet connection
• USB power
• A sender device
Senders & receivers
Single-page HTML appAndroid or iOS app using Chromecast SDK
Chrome using Chromecast extension
Sending & receiving
• Communication channels
• Multiple sessions per receiver app
Flow
Launch sender
app
Discover Cast
devices
Connect to Cast
device
Launch receiver
app
Send & receive
messages
Disconnect...
Senders
• Discover Cast devices
• Provide Cast button in UI
• Start or join a session with a Cast device
Receivers
• Single page HTML apps
• Content loaded from the network
– Internet or local WiFi
• Identified by ID
– Needs to...
Receiver types
• Default media receiver
– Media playback
• Styled media receiver
– Media playback + CSS
• Custom receiver
...
The docs
https://developers.google.com/cast/
• Design checklist
Understand basic flow and avoid common pitfalls
• Develope...
The samples
https://github.com/googlecast
• Various samples for all platforms
• By Google
• Google Cast Developers community on Google+
• Google engineers at the ready!
The community
https://plus.google.com/commu...
Android sender
First a bit of preparation…
…and more preparation…
• android-support-v7-mediarouter
– Requires android-support-v7-appcompat
• Google Play Services
• O...
FlowLaunch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
Launch sender
app
Discover Cast
devices
Conne...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
• Add button for casting:
– MediaRouterActionProv...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
<menu xmlns:android="http://schemas.android.com/a...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
• Get the MediaRouter instance
• Create a MediaRo...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
mMediaRouter = MediaRouter.getInstance(getApplica...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
• Add MediaRouter.Callback in onResume()
• Remove...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
@Override
protected void onResume() {
super.onRes...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
• When a route is selected:
– Get a CastDevice fr...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
CastDevice device = CastDevice.getFromBundle(rout...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
• Launch Cast app or
join an existing session
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
Builder builder = new GoogleApiClient.Builder(mCo...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
private class ConnectionCallbacks implements
Goog...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
private void launchApp() {
PendingResult<Applicat...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
new ResultCallback<Cast.ApplicationConnectionResu...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
• Exchange data over channel
– Send messages
– Re...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
Cast.CastApi.sendMessage(mApiClient,
mHelloWorldC...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
• Handle disconnecting
– From route unselection
–...
Launch
sender
Discover Connect
Launch
receiver
Send &
receive
Disconnect
private void disconnect() {
if (mApiClient != nul...
Debugging
http://<ip-address>:9222
• Console
• DOM inspector
Gotchas!
Gotchas!
• Coping with the lifecycle asynchronously
• Unexpected disconnects
• Forgetting to start the MediaRouter scan
Useful stuff
• The docs
https://developers.google.com/cast/
• The samples
https://github.com/googlecast
• The community
ht...
Creating your own
Paul Lammertsma
CTO, Pixplicity
Google Cast App
Upcoming SlideShare
Loading in...5
×

Droidcon de 2014 google cast

683

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
683
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Droidcon de 2014 google cast

  1. 1. Creating your own Paul Lammertsma CTO, Pixplicity Google Cast App
  2. 2. Google Cast?
  3. 3. Google Cast?
  4. 4. Google Cast? • Netflix, YouTube, Google Play Movies, Music & TV • Stream on the TV • Control from Android, iOS or Chrome • Build your own apps
  5. 5. You’ll need • TV with HDMI • WiFi with Internet connection • USB power • A sender device
  6. 6. Senders & receivers Single-page HTML appAndroid or iOS app using Chromecast SDK Chrome using Chromecast extension
  7. 7. Sending & receiving • Communication channels • Multiple sessions per receiver app
  8. 8. Flow Launch sender app Discover Cast devices Connect to Cast device Launch receiver app Send & receive messages Disconnect from Cast device
  9. 9. Senders • Discover Cast devices • Provide Cast button in UI • Start or join a session with a Cast device
  10. 10. Receivers • Single page HTML apps • Content loaded from the network – Internet or local WiFi • Identified by ID – Needs to talk to Google over HTTPS • Communicates with sender over message bus
  11. 11. Receiver types • Default media receiver – Media playback • Styled media receiver – Media playback + CSS • Custom receiver – Whatever you like – Needs media player lib }€5 registration fee per developer
  12. 12. The docs https://developers.google.com/cast/ • Design checklist Understand basic flow and avoid common pitfalls • Developer guide: sender apps Choose the type of sender app and get started with relevant samples • Developer guide: receiver apps Choose the type of receiver app and get stared with relevant samples • API Reference
  13. 13. The samples https://github.com/googlecast • Various samples for all platforms • By Google
  14. 14. • Google Cast Developers community on Google+ • Google engineers at the ready! The community https://plus.google.com/communities/1157421575691035854http://tiny.cc/castcommunity
  15. 15. Android sender
  16. 16. First a bit of preparation…
  17. 17. …and more preparation… • android-support-v7-mediarouter – Requires android-support-v7-appcompat • Google Play Services • Optional: CastCompanionLibrary – Will offload a lot of work – Loads of code; could be intimidating
  18. 18. FlowLaunch sender Discover Connect Launch receiver Send & receive Disconnect Launch sender app Discover Cast devices Connect to Cast device Launch receiver app Send & receive messages Disconnect from Cast device
  19. 19. Launch sender Discover Connect Launch receiver Send & receive Disconnect • Add button for casting: – MediaRouterActionProvider – MediaRouter Button – Your own • Only show it when Cast devices are discovered
  20. 20. Launch sender Discover Connect Launch receiver Send & receive Disconnect <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/media_route_menu_item" android:title="@string/media_route_menu_title" app:showAsAction="always" app:actionProviderClass="android.support.v7.app.MediaRouteActionProvider"/> </menu>
  21. 21. Launch sender Discover Connect Launch receiver Send & receive Disconnect • Get the MediaRouter instance • Create a MediaRouteSelector for Cast apps • Create a MediaRouter.Callback instance
  22. 22. Launch sender Discover Connect Launch receiver Send & receive Disconnect mMediaRouter = MediaRouter.getInstance(getApplicationContext()); // Create a MediaRouteSelector mMediaRouteSelector = new MediaRouteSelector.Builder() .addControlCategory(CastMediaControlIntent.categoryForCast(CAST_APP_ID)) .build(); // Create a MediaRouter callback for discovery events mMediaRouterCallback = new MyMediaRouterCallback();
  23. 23. Launch sender Discover Connect Launch receiver Send & receive Disconnect • Add MediaRouter.Callback in onResume() • Remove MediaRouter.Callback in onPause()
  24. 24. Launch sender Discover Connect Launch receiver Send & receive Disconnect @Override protected void onResume() { super.onResume(); // Add the callback to start device discovery mMediaRouter.addCallback(mMediaRouteSelector, mMediaRouterCallback, MediaRouter.CALLBACK_FLAG_PERFORM_ACTIVE_SCAN); } @Override protected void onPause() { // Remove the callback to stop device discovery mMediaRouter.removeCallback(mMediaRouterCallback); super.onPause(); }
  25. 25. Launch sender Discover Connect Launch receiver Send & receive Disconnect • When a route is selected: – Get a CastDevice from the route – Connect a Google API Client
  26. 26. Launch sender Discover Connect Launch receiver Send & receive Disconnect CastDevice device = CastDevice.getFromBundle(route.getExtras()); Cast.CastOptions.Builder apiOptionsBuilder = Cast.CastOptions .builder(device, mCastListener); Builder builder = new GoogleApiClient.Builder(mContext) .addApi(Cast.API, apiOptionsBuilder.build()) .addConnectionCallbacks(mConnectionCallbacks) .addOnConnectionFailedListener(...); // Cast API requires a reference to this later on mGoogleApiClient = builder.build(); // Do the magic mGoogleApiClient.connect();
  27. 27. Launch sender Discover Connect Launch receiver Send & receive Disconnect • Launch Cast app or join an existing session
  28. 28. Launch sender Discover Connect Launch receiver Send & receive Disconnect Builder builder = new GoogleApiClient.Builder(mContext) .addApi(Cast.API, apiOptionsBuilder.build()) .addConnectionCallbacks(mConnectionCallbacks) .addOnConnectionFailedListener(...); ConnectionCallbacks
  29. 29. Launch sender Discover Connect Launch receiver Send & receive Disconnect private class ConnectionCallbacks implements GoogleApiClient.ConnectionCallbacks { @Override public void onConnected(Bundle connectionHint) { launchApp(); } @Override public void onConnectionSuspended(int cause) { // TODO Wait for next onConnected() and re-create the message channel } }
  30. 30. Launch sender Discover Connect Launch receiver Send & receive Disconnect private void launchApp() { PendingResult<ApplicationConnectionResult> result; // Launch the receiver app result = Cast.CastApi.launchApplication(mGoogleApiClient, CAST_APP_ID, false); // For joining an existing session //result = Cast.CastApi.joinApplication(mGoogleApiClient, CAST_APP_ID, mSessionId); result.setResultCallback(mResultCallback); }
  31. 31. Launch sender Discover Connect Launch receiver Send & receive Disconnect new ResultCallback<Cast.ApplicationConnectionResult>() { @Override public void onResult(ApplicationConnectionResult result) { if (result.getStatus().isSuccess()) { mHelloWorldChannel = new HelloWorldChannel(); Cast.CastApi.setMessageReceivedCallbacks( mApiClient, mHelloWorldChannel.getNamespace(), mHelloWorldChannel); } else { /* TODO disconnect */ } } }
  32. 32. Launch sender Discover Connect Launch receiver Send & receive Disconnect • Exchange data over channel – Send messages – Receive messages
  33. 33. Launch sender Discover Connect Launch receiver Send & receive Disconnect Cast.CastApi.sendMessage(mApiClient, mHelloWorldChannel.getNamespace(), message) .setResultCallback(new ResultCallback<Status>() { @Override public void onResult(Status result) { if (!result.isSuccess()) { Log.e(TAG, "Sending message failed"); } } });
  34. 34. Launch sender Discover Connect Launch receiver Send & receive Disconnect • Handle disconnecting – From route unselection – From connection failure – When receiver app is stopped – onDestroy()
  35. 35. Launch sender Discover Connect Launch receiver Send & receive Disconnect private void disconnect() { if (mApiClient != null && mApiClient.isConnected()) { Cast.CastApi.stopApplication(mApiClient, mSessionId); Cast.CastApi.removeMessageReceivedCallbacks( mApiClient, mHelloWorldChannel.getNamespace()); mApiClient.disconnect(); mHelloWorldChannel = null; } mApiClient = null; }
  36. 36. Debugging http://<ip-address>:9222 • Console • DOM inspector
  37. 37. Gotchas!
  38. 38. Gotchas! • Coping with the lifecycle asynchronously • Unexpected disconnects • Forgetting to start the MediaRouter scan
  39. 39. Useful stuff • The docs https://developers.google.com/cast/ • The samples https://github.com/googlecast • The community http://tiny.cc/castcommunity
  40. 40. Creating your own Paul Lammertsma CTO, Pixplicity Google Cast App
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×