Slide 1

Slide 1 text

Thomas Lelievre - Janvier 2016 Ionic + Google Cast™

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Google Cast App Sender Receiver Receiver App / Media Content Stream Chromecast Sender App Message Bus (controls)

Slide 5

Slide 5 text

Google Cast App ● Github : https://github.com/googlecast ● Website : https://developers.google.com/cast

Slide 6

Slide 6 text

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 !

Slide 7

Slide 7 text

Receiver App

Slide 8

Slide 8 text

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 : ConnectSDK JavaScript Bridge window.connectManager = new connectsdk.ConnectManager(); window.connectManager.init();

Slide 9

Slide 9 text

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)); });

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Registration

Slide 12

Slide 12 text

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 !

Slide 13

Slide 13 text

Ionic Sender App

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Questions ?