WebRTC communication and wearable devices

Many,manythanksto:

WistiaMcGrawHillEducation

ProctorCam

WebRTCand

WearableDevices

ProctorCam

AboutMe@giorgionatili

• TechnicalLeaderandAgileCoach• Front-endDeveloper(testfirst!)• MobileDeveloper(HybridwithCordova,iOS,Android)• TechnologyEnthusiast• [email protected]

What'sNext• IntelIOTRoadShow/Feb24/https://iotroadshow.intel.com/en/home• NoSQLNight#2/Mar05/http://www.meetup.com/bostonsoftware• MobileTea#4/Mar19/http://www.meetup.com/mobiletea• TelerikNext/May3/http://www.teleriknext.com

Agenda• Technologiesoverview• TizenWearablevsAndroidWear• GettingstartedwithTizenWearable• WebRTCandhybriddevelopment• Howtomakeithappening(Cross-Walk)

APowerfulMix

TechnolgoiesOverview

• TizenWearable• Android• Cordova• Cross-Walk• PhoneRTC

Tizen• OperatingsystembasedupontheLinuxkernel• Itrunsonmobilephones(SamsungZ),wearabledevices(GearS2)andvehicles(IA32andARM)• CompletelyOpenSource• MailysuportedbySamsung,Intel,OrangeSA,etc.

Android• OperatingsystembasedupontheLinuxkernel• Oneofthemostwidetargetoperatingsystem(mobile,wearable,car,tv,etc.)• AcompletelyOpenSourceplatform• Highlycustomizable(e.g.Cyanogen)

ApacheCordova• Hybridmobiledevelopmentframework• Startedfromthedevelopmentcommunity• ExtendsthedeviceWebViewcapabilities• Baseduponapluginandcallbacksarchitecture• OpenSource

Cross-Walk• Runtimetodeploywebbasedapplications• Supportmultiplearchitectures• ProvideamoreconsistentWebView(Android>4.xandTizencommonandIVIonly)• OpenSource• EnableChromiumfeaturesonmobiledevices

PhoneRTC• CrossplatformWebRTCimplementation(Android/iOS/Web)• HighlyintegratedwithApacheCordova• OpenSource• Welldocumentedhttps://github.com/alongubkin/phonertc/wiki

TizenVSAndroidWear

• Connectivity:bothoperatingsystemssupporttheBluetooth4.0• Programminglanguages:JavavsHTML5• SDKs:bothprovideasolidSDKbuttheTizenoneoffersmoretools• Appmodes:Tizensupportsstandaloneapps(integratedandlinkedaresupportedbyboth)

TizenWearableSDK

SDKOverview• Devicemanager• EclipseBasedIDE• SDB(SmartDevelopmentBridge)• Emulator• CLI(CommandLineInterface)Tool• Wearableframework• HTML/JavaScript/CSSwebframework(TAU)

WearableFramework

• Contextmanagersupport• SamsungAccessoryProtocolstacksupport• Interoperabilitysupportviahostmanager(Phoneside)andwearablemanagerservice

WebFramework• ProvidesacompleteimplementationoftheWebAPIoptimizedforwearabledevices• W3CWidgetspecificationssupport• DeviceAPIstoaccesstoadevice’splatformcapabilitiessupport• CameraAPIsupport• WebUIframework• Clockwidgetsupport

ApplicationModels• Linked(Master-Follower)• Integrated• Standalone

SmartDevelopmentBridge

It’satooltomanagetodevices/emulatorsthatforinstanceallowyoutocopyfiles,installapps,etc.,betweenthesupportedcommandsthemorenoticeableare

$sdbkill-server-killtheserverifitisrunning$sdbstart-server-ensurethatthereisaserverrunning$sdbpull<remote>[<local>]-copyfile/dirfromdevice$sdbpush<local><remote>-copyfile/dirtodevice

DevelopmentSetup

YouneedyourAndroidSDKupandrunning,youwillusealottheADB

• DownloadtheTizenWearableSDKManagerandlaunchit• Addtoyourpaththetizen-wearable-sdk/tools/ide/binandtizen-wearable-sdk/tools/folders• LaunchtheIDEandcreateasampleproject• Openthedevicemanager,createanewvirtualmachineanddebugtheapp

QuickDemo

ConnectingtoDevice

InordertoconnectawidgetandadeviceyouhavefirstofalltodownloadthissourcecodefromtheSamsungwebsite(Applications_for_Emulator.zip)thenfollowthissteps

• ConnectthetargetdevicetotheUSB• Installthefollowingapps(exactorder)

QuickDemo(fingercrossed!)

Cordova

CommandLine(cli)It'sannpmmodulethatactsasawrapperaroundthedifferentsupportedplatforms,themostimportantcommandsare:

$cordova<PATH>[ID[NAME]]-createanewproject$cordovaplatform[add|remove|update][platform]-add/remove/updateaplatform$cordovaplugin[add|remove|update][plugin]-add/remove/updateaplugin$cordovaprepare[platform]-movetheasssetstoaplatformprojects$cordovabuild[platform]-buildaspecificplatform$cordovarun[platform]-runtheprojectinatargetplatform$cordovaserve-runtheprojectinalocalwebserver

CordovaandEclipse• OnceyouaddtheAndroidplatformandbuildtheprojectyoucanimportinEclipse• SinceCordova3.3somethinggoeswrongreferencingtotheembeddedCordovaLibproject• Referencethesourcecode(discouraged)orbuildCordova(stronglysuggested)

CompileCordovaAndroid

• Clonetheandroid-cordovarepository• Switchtothe3.5tag(istheonlyonecanrunalsowitholderversionsofAndroid)• Movetotheframeworkfolder• UpdatetheprojectconfigurationfilestothedesiredSDKandcreatetheJAR

EnablingWebRTCIt'senoughtoinstalltheplugininyourproject,youcaninstallitfromalocalfolderorusingthegitrepo(andoptionallyatag)

$cordovapluginaddhttps://github.com/alongubkin/phonertc.git

CreateaWebRTCProject

• CreateaCordovaprojectandaddtheAndroidplatform• DownloadthesourcecodeofthePhoneRTCdemo(availableonGitHub)• Copytheclientfilesintothewwwfolder• Installtheserverfilesonanode.jsenvironment• Changeinsignaling.jstheconnectionaddress(ipordomain)

QuickDemo

Recap

Step1InstalltheTizenWearableSDKanddefineavritualdevice

Step2ConfigureaSAPserveronyourdeviceinordertotestthe

connectivity

Step3ImporttheHelloAccessoryProviderprojectinEclipseandbuildit(just

tobesureyourconfigurationisOK)

Step4ImportyourWebRTCCordovaprojectinEclipse(don'tbuildit,itwill

fail)

Step5BuildandlinkCordovatoyourproject(don'tforgettomatchyour

targetAPI)

Step6BuildtheCordovaprojecttoverifyeverythingiscorrectlyconfigured

Step7StarttheintegrationoftheHelloAccessoryProviderprojectwiththe

Cordovaone

Step8BuildaTizenWearablewidgetandconnectittoyourCordovaapp

What'sNextFollowthisrepohttps://github.com/GiorgioNatili/tizen-werbrtc

Resources

UsefulLinks• http://denvycom.com/blog/step-by-step-guide-to-build-your-first-samsung-gear2-app-tizen• http://developer.samsung.com/galaxy#accessory• https://crosswalk-project.org/documentation/tizen_ivi_extensions.html• https://wiki.tizen.org/wiki/Tizen_IVI_SDK#Installing_Tizen_IVI_SDK• https://developer.tizen.org/dev-guide/2.3.0• http://denvycom.com/blog/how-to-install-wgt-files-gear2• http://java.dzone.com/articles/cordova-hello-world-android

@giorgionatili#mobiletea#javascript#swift#wearable#agile#android#tdd

Thanks!

Thanks!Grazie!Graçias!Danke!Merci!��!

artanimatedGIF

Cross-Walk

Why

GettingStarted

CordovaIntegration

TroubleShooting