presentation I did at GDG Johannesburg on how to develop custom a cast enabled sound board

1. Developing Apps for Chromecast
Kurt Mbanje

2. Overview

3. • Google Cast & Cast SDK
• Cast devices
• Cast components
• Android sender application
• Cast receiver application
• Chromecast Soundboard demo

4. Google Cast & Cast SDK
• Technology to cast to compatible devices
e.g. Chromecast & Android Tv
• Supports Android, IOS 8+ Chrome 32+ &
Cast extension 14.123.1.2+

5. Cast compatible devices

7. Cast Components

9. Sample Application
Cast Sound Board

10. https://github.com/ckurtm/CastSoundBoard

12. Receiver Application

13. Registration

14. Receiver Registration

15. Receiver Registration

16. Receiver Registration

17. Receiver Lifecycle

19. Receiver Development

20. <script type="text/javascript" src=“//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"/>
window.onload = function() {
loadSounds();
cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG);
window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
console.log('starting the receiver application');
castReceiverManager.onReady = function(event) {
console.log('receiver application is ready: ' + JSON.stringify(event.data));
window.castReceiverManager.setApplicationState('Application status is ready...');
};
castReceiverManager.onSenderConnected = function(event) {
console.log('sender application connected: ' + event.data);
console.log(window.castReceiverManager.getSender(event.data).userAgent);
};
castReceiverManager.onSenderDisconnected = function(event) {
console.log('sender application disconnected: ' + event.data);
//if we dont have any connected devices then just close this app, this might not be necessary for your use case though
if (window.castReceiverManager.getSenders().length == 0) {
window.close();
}
};//register the namespace that we can handle messaging from. NOTE, THIS SHOULD be the same as the one the SENDER app uses to send
messages
window.messageBus = window.castReceiverManager.getCastMessageBus('urn:x-cast:mbanje.kurt.soundboard');
//handler for the incoming CastMessageBus message events from sender applications
window.messageBus.onMessage = function(event) {
console.log('Message [' + event.senderId + ']: ' + event.data);
var json = JSON.parse(event.data);
processMessage(json);
}
// initialize the CastReceiverManager with an application status message
window.castReceiverManager.start({statusText: 'Application is starting'});
console.log('Receiver Manager started');

21. Sender Application

22. Sender Lifecycle

23. Sender Development

24. Implementation
• Add dependency
• Add cast button
• Initialize
• Connect to cast device
• Listen for events
• Send messages
• Disconnect

25. Build.gradle
dependencies {
compile 'com.google.android.gms:play-services-cast-framework:10.0.1'
compile 'com.android.support:appcompat-v7:25.1.1'
compile 'com.android.support:mediarouter-v7:25.1.1'
}

26. <!—-menu.xml—>
<?xml version="1.0" encoding="utf-8"?>
<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/cast_menu"
app:actionProviderClass="android.support.v7.app.MediaRouteActionProvider"
app:showAsAction="always" />
</menu>
menu/main.xml

27. public class CastOptionsProvider implements OptionsProvider {
//This is the custom namespace we will use to communicate with the cast receiver application
public static final String NAMESPACE = "urn:x-cast:mbanje.kurt.soundboard";
@Override
public CastOptions getCastOptions(Context context) {
CastOptions castOptions = new CastOptions.Builder()
.setReceiverApplicationId(context.getString(R.string.app_id))
.build();
return castOptions;
}
@Override
public List<SessionProvider> getAdditionalSessionProviders(Context context) {
return null;
}
}
OptionsProvider
<!—AndroidManifest.xml—>
<meta-data
android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
android:value="mbanje.kurt.soundboard.CastOptionsProvider" />

28. <android.support.v7.app.MediaRouteButton
android:id="@+id/media_route_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
layout.xml

29. private void setUpCastIcon() {
MediaRouteButton castButton = (MediaRouteButton) findViewById(R.id.media_route_button);
CastButtonFactory.setUpMediaRouteButton(getApplicationContext(), castButton);
CastContext castContext = CastContext.getSharedInstance(this);
sessionManager = castContext.getSessionManager();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
getMenuInflater().inflate(R.menu.main, menu);
CastButtonFactory.setUpMediaRouteButton(getApplicationContext(), menu, R.id.media_route_menu_item);
return true;
}
@Override
protected void onResume() {
sessionManager.addSessionManagerListener(castSessionListener);
super.onResume();
}
@Override
protected void onPause() {
super.onPause();
sessionManager.removeSessionManagerListener(castSessionListener);
}
Activity Setup

30. final JSONObject obj = new JSONObject();
obj.put("action",isChecked?ACTION_PLAY:ACTION_STOP);
obj.put("sound",sound);
final String json = obj.toString(1);
//we only send the message if we have an active session
if(buttonView.isEnabled() && sessionManager.getCurrentCastSession() != null) {
sessionManager.getCurrentCastSession().sendMessage(CastOptionsProvider.NAMESPACE, json).setResultCallback(new
ResultCallback<Status>() {
@Override
public void onResult(@NonNull final Status status) {
if (status.isSuccess()) {
Log.d(TAG, "message sent successfully: " + json);
} else {
Log.e(TAG, "failed to send message: " + json);
}
}
});
}
Activity Send Messages

31. Google Cast SDK

32. Cast Video
RemoteMediaClient remoteMediaClient =
CastContext.getSharedInstance(this).getSessionManager().getCurrentCast
Session().getRemoteMediaClient();
MediaInfo mediaInfo = new
MediaInfo.Builder(getString(R.string.movie_link))
.setStreamType(MediaInfo.STREAM_TYPE_BUFFERED)
.setContentType("videos/mp4")
.build();
remoteMediaClient.load(mediaInfo, true, 0);

33. UI Components
• Introductory Overlay
• Expanded Controls
• Minicontroller
• Notification Screen

34. Thank You

35. https://github.com/ckurtm/CastSoundBoard
+KurtMbanje
@ckurtm
www.peirr.com