Introduction to ChromeCast

A talk on introduction to Chromecast and live demo.

It was delivered by Pratik Patel (Tech Lead, LetsNurture) in I/O Extended event organized by GDG Ahmedabad on 25th June, 2014.

Transcript

1. Introduction to ChromeCast By Pratik Patel, LetsNurture
2. ChromeCast Media Player from Google
3. www.letsnurture.com | www.letsnurture.co.uk
4. ChromeCast Chrome Cast is a device that allows Android and iOS mobile apps and Chrome web apps to “cast” content - like video, audio, and screen sharing (mirroring) - to Cast-ready devices like Google ChromeCast. The sender may be a phone or tablet running on Android or iOS, or it may be a laptop computer running Chrome. The receiver device is optimized for video playback with a receiver application that receives data over Internet Protocol and transmits it to the television. www.letsnurture.com | www.letsnurture.co.uk
5. • In the Cast user model, the mobile device or laptop is the sender which controls the playback, and the TV is the receiver which displays the content. All the user interaction and most of the user interface takes place on the sender device rather than on the TV. Note: Both Should be on same Wi-Fi www.letsnurture.com | www.letsnurture.co.uk
6. https://cast.google.com/chromecast/setup/ https://play.google.com/store/apps/details?id=com.googl e.android.apps.chromecast.app&hl=en www.letsnurture.com | www.letsnurture.co.uk
7. Guidelines to Setup ChromeCast 1) Pay 35$ 2) Install your ChromeCast device. 3) Run the ChromeCast app on sender device. 4) Under Privacy, check the box to "Send this ChromeCast's serial number when checking for updates". - To start development you need to register your device. By default It is not enable for Development. www.letsnurture.com | www.letsnurture.co.uk
8. Developer Guide: https://developers.google.com/cast/docs/ Google Cast SDK. Download API Library to Integrate ChromeCast in your app. Sender Application & Receiver Application:- -> Register your application. Than You will get 1 AppID for development. This AppID is use to configure Custom Receiver / Styled Media Receiver. www.letsnurture.com | www.letsnurture.co.uk
9. - Custom Receiver : Enter a URL that the Google Cast device should request when loading your receiver app. www.letsnurture.com | www.letsnurture.co.uk
10. Style Media Receiver : Provide an HTTPS URL that points to your CSS file located on your own web site or on Google Drive .background { background: center no-repeat url(background.png); } .logo { background-image: url(logo.png); } .progressBar { background-color: rgb(238, 255, 65); } .splash { background-image: url(splash.png); } .watermark { background-image: url(watermark.png); background-size: 57px 57px; } www.letsnurture.com | www.letsnurture.co.uk
11. - Fill-up All other details like Application Name/Title/Description. Than publish an application. Now you have to develop sender Application. You need to use same App ID which we have created previously in Sender Application. www.letsnurture.com | www.letsnurture.co.uk
12. Sender Application - Support Libraries : android-support-v7 appcompat android-support-v7-mediarouter google-play-services_lib MediaRouter allows applications to control the routing of media channels and streams from the current device to destination devices. www.letsnurture.com | www.letsnurture.co.uk
13. Flow Of Sender Application • Sender app starts MediaRouter device discovery: MediaRouter.addCallback • MediaRouter informs sender app of the route the user selected: MediaRouter.Callback.onRouteSelected • Sender app retrieves CastDevice instance: CastDevice.getFromBundle • Sender app creates a GoogleApiClient: GoogleApiClient.Builder • Sender app connects the GoogleApiClient: GoogleApiClient.connect • SDK confirms that GoogleApiClient is connected: GoogleApiClient.ConnectionCallbacks.onConnected • Sender app launches the receiver app: Cast.CastApi.launchApplication • SDK confirms that the receiver app is connected: ResultCallback<Cast.ApplicationConnectionResult> • Sender app creates a communication channel: Cast.CastApi.setMessageReceivedCallbacks • Sender sends a message to the receiver over the communication channel: Cast.CastApi.sendMessage www.letsnurture.com | www.letsnurture.co.uk
14. Adding the Cast Button Cast device discovery may be performed using the Android MediaRouter APIs in the Android Support Library, with compatibility back to Android 2.1. The MediaRouter ActionBar provider needs to be added to the application’s menu hierarchy defined in XML. @Override public boolean onCreateOptionsMenu(Menu menu) { MenuItem mediaRouteMenuItem = menu.findItem(R.id.media_route_menu_item); MediaRouteActionProvider mediaRouteActionProvider = (MediaRouteActionProvider) MenuItemCompat.getActionProvider(mediaRouteMenuItem); mediaRouteActionProvider.setRouteSelector(mMediaRouteSelector); return true; } mMediaRouteSelector = new MediaRouteSelector.Builder() .addControlCategory(CastMediaControlIntent.categoryForCast("YOUR_APPLICATION_ID")) .build(); www.letsnurture.com | www.letsnurture.co.uk
15. Handling device selection When the user selects a device from the Cast button device list, the application is informed of the selected device by extending MediaRouter.Callback. private class MyMediaRouterCallback extends MediaRouter.Callback { CastDevice mSelectedDevice; @Override public void onRouteSelected(MediaRouter router, RouteInfo info) { mSelectedDevice = CastDevice.getFromBundle(info.getExtras()); String routeId = info.getId(); ... } @Override public void onRouteUnselected(MediaRouter router, RouteInfo info) { teardown(); mSelectedDevice = null; } } www.letsnurture.com | www.letsnurture.co.uk
16. Launching the receiver Once the application knows which Cast device the user selected, the sender application can launch the receiver application on that device. Media channel: The Google Cast SDK supports a media channel to play media on a receiver application. mRemoteMediaPlayer = new RemoteMediaPlayer(); MediaInfo mediaInfo = new MediaInfo.Builder( "http://your.server.com/video.mp4") .setContentType("video/mp4") .setStreamType(MediaInfo.STREAM_TYPE_BUFFERED) .build(); mRemoteMediaPlayer.load(mApiClient, mediaInfo, true) ;
17. Live Demo www.letsnurture.com | www.letsnurture.co.uk