Ionic + Google Cast

These are the slides used as support by Thomas in our last technical workshop at Reputation VIP.

1. Thomas Lelievre - Janvier 2016 Ionic + Google Cast™
2. Ionic • SDK that allows to create hybrid mobile app with web technologies • Ionic uses AngularJS and Apache Cordova • v1.2 • Github : https://github.com/driftyco/ionic • Website : http://ionicframework.com
3. Google Cast App Sender App • Supports actions, controls • IOS, Android and Chrome API • Objective-C, Swift (IOS), Java (Android) and HTML5/JavaScript (Chrome) Receiver App • No interactive elements • Only informational elements • Default Media, Styled Media or Custom Receiver • HTML5/JavaScript
4. Google Cast App Sender Receiver Receiver App / Media Content Stream Chromecast Sender App Message Bus (controls)
5. Google Cast App • Github : https://github.com/googlecast • Website : https://developers.google.com/cast
6. Connect-SDK-Cordova-Plugin • Open source framework in the form of a Cordova plugin • Set of device discovery and connectivity methods • Works across multiple television platforms and protocols (among them, Google Chromecast™) • Powered by LG™ • v1.6 • Github : https://github.com/ConnectSDK/Connect-SDK-Cordova-Plugin • Website : http://www.connectsdk.com Warnings : There are some limitations with this plugin that you would not face if you used the real Google Cast SDK !
7. Receiver App
8. Receiver App • Create a simple web project with a index.html file • Download the ConnectSDK JavaScript Bridge (https://github.com/ConnectSDK/Connect-SDK-JavaScript-Bridge) • Include the Google Cast Receiver API script and the ConnectSDK JavaScript Bridge script : • Initialize your receiver web app : <script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js" language="JavaScript" type="text/javascript"></script> <script src="connect_bridge.min.js" language="JavaScript" type="text/javascript"></script> ConnectSDK JavaScript Bridge <script language="JavaScript" type="text/javascript"> window.connectManager = new connectsdk.ConnectManager(); window.connectManager.init(); </script>
9. Receiver App • Receive message from Sender App : • Send/Broadcast message to Sender App : • In Sender App, receive message from Receiver App : • Doc : http://connectsdk.com/docs/1-6-0/tv-web-app/create-connected-web-app/ • Github : https://github.com/ConnectSDK/Connect-SDK-JavaScript-Bridge window.connectManager.on('message', function(data) { console.log('Sender: ' + data.from); console.log('Message: ' + data.message); }); ConnectSDK JavaScript Bridge window.connectManager.sendMessage(to, 'This is a test message'); window.connectManager.sendMessage(to, { 'message' : 'This is a JSON test message' }); window.connectManager.broadcastMessage('This is a test message'); window.connectManager.broadcastMessage({ 'message' : 'This is a JSON test message' }); myWebAppSession.on('message', function (message) { console.log('Received message from web app:' + JSON.stringify(message)); });
10. Receiver App • Remote Debugging Url = [IP_OF_THE_DEVICE]:9222 : • Click on “Remote Debugging (AppEngine)” and click on the “shield icon” to load risky scripts : • Then you can acceed to Chrome Devtools of the Receiver Web App : Debug Receiver App
11. Registration
12. Registration • You need to register your Receiver Applications and your Cast Receiver devices • Google Cast SDK Developper Console (https://cast.google.com/publish/) • For more informations: https://developers.google.com/cast/docs/registration Warning : When a Cast Receiver Device registration is finished, you need to restart the concerned Cast Device !
13. Ionic Sender App
14. Ionic Sender App • Create Ionic blank project : • Add Android platform : • Integrate ConnectSDK Cordova plugin : • Build android platform : • Run the Ionic Sender App on your browser / your smartphone : Warning : ConnectSDK Cordova plugin (v1.6.0) needs Android Build Tools revision 22.0.1 to be installed ! Create and prepare project
15. Ionic Sender App • ConnectSDK discovery manager allows to retrieve devices and connect to one • Start the discovery manager : • Pick a device thanks to the discovery manager : • Doc : http://connectsdk.com/docs/1-6-0/cordova/discover-connect/ • Apis : ◦ http://connectsdk.com/apis/1-6-0/cordova/discoverymanager/ ◦ http://connectsdk.com/apis/1-6-0/cordova/devicepicker/ ConnectSDK.discoveryManager.pickDevice() .success(function (device) { console.log('Device ' + device.getFriendlyName() + ' picked!') }) .error(function (err) { console.log(JSON.stringify(err)); }); .run(function ($ionicPlatform) { $ionicPlatform.ready(function () { // ... if (window.ConnectSDK && window.ConnectSDK.discoveryManager) { ConnectSDK.discoveryManager.startDiscovery(); } }); }) ConnectSDK Discovery Manager
16. Ionic Sender App • Cast media on the device thanks to the MediaPlayer capability protocol Cast image media : Cast video/audio media : var url = 'http://www.connectsdk.com/files/9613/9656/8539/test_image.jpg'; var mimeType = 'image/jpeg'; var options = { title: 'Sintel Character Design', description: 'Blender Open Movie Project' }; device.getMediaPlayer().displayImage(url, mimeType, options) .success(function (launchSession, mediaControl) { console.log('Image successfully displayed'); }) .error(function (err) { console.log(JSON.stringify(err)); }); var url = 'http://media.w3.org/2010/05/bunny/trailer.mp4'; var mimeType = 'video/mp4'; var myLaunchSession = myMediaControl = null; device.getMediaPlayer().playMedia(url, mimeType) .success(function (launchSession, mediaControl) { console.log("Video successfully launched"); myLaunchSession = launchSession.acquire(); myMediaControl = mediaControl.acquire(); }) .error(function (err) { console.log(JSON.stringify(err)); }); ConnectSDK Beam Media
17. Ionic Sender App • Control media in the current playback session : • Doc : http://connectsdk.com/docs/1-6-0/cordova/beam-media/ • Apis : ◦ http://connectsdk.com/apis/1-6-0/cordova/launchsession/ ◦ http://connectsdk.com/apis/1-6-0/cordova/mediaplayer/ ◦ http://connectsdk.com/apis/1-6-0/cordova/mediacontrol/ // Pause media myMediaControl.pause() // Play media myMediaControl.play(); // Seek to 10 seconds myMediaControl.seek(10); // Close media player myLaunchSession.close(); ConnectSDK Beam Media
18. Ionic Sender App • Launch Web App on device : var webAppId = 'CC1AD845'; // Default Media Receiver App ID var myWebAppSession = null; if (!device.hasService(ConnectSDK.Services.Chromecast)) { console.log('No Chromecast found in the surrounding area!'); return; } if (!device.isReady()) { console.log('Device not yet ready!'); device.on('ready', launchReceiverApp(device)); device.connect(); } else { launchReceiverApp(device); } function launchReceiverApp(device) { device.getWebAppLauncher().launchWebApp(webAppId) .success(function (webAppSession) { myWebAppSession = webAppSession.acquire(); console.log('Web app successfully launched!'); }) .error(function (err) { console.log(JSON.stringify(err)); }); } ConnectSDK Beam Web App
19. Ionic Sender App • Connect to Web App and send messages : • Doc : http://connectsdk.com/docs/1-6-0/cordova/beam-web-apps/ • Apis : ◦ http://connectsdk.com/apis/1-6-0/cordova/webapplauncher/ ◦ http://connectsdk.com/apis/1-6-0/cordova/webappsession/ // Open a message channel to the web app myWebAppSession.connect(); // Close the message channel myWebAppSession.disconnect(); // Send a text to the web app (must be connected first) myWebAppSession.sendText('A message'); // Send a JSON object myWebAppSession.sendJSON({message: 'A message'}); // Close the web app myWebAppSession.close(); ConnectSDK Beam Web App
20. Questions ?