WIXLIB

Integrating Mobile Applications - Contrasting theBrowser with Native OS AppsCary FitzGeraldcaryfitz@employees.org

Workshop Leaders Peter Dunkley– Acision Adam van den Hoven– Frozen Mountain

Integrating Mobile ApplicationsContrasting the Browser with Native OS Apps

Browser vs. Native?

Browser vs. Native The Web is more than Browsers– AJAX & REST transcends browsers– JSON is the standard data exchange format Real Time communication is more than Chat The challenge and opportunity is to find uniqueways to leverage WebRTC6

Native Apps Compiled, Packaged appTrue Native or HybridDeployed separate from useNot just Phones and Tablets––––Augmented / Virtual RealityEmbedded SystemsDesktop AppsServers7

BrowsersPROS Leverage existing expertise Develop once, use everywhere(in theory) Simple API Simple deploymentCONS Design Complexity Limited API iOS not supported Windows Phone notsupported IE not supported8

Native ApsProsCons Background operation Many languages to support Optimized UI and I18N Little consistency Preapproved access to More complex deploymentresources Mostly DIY* Easy access to device features9

When to use a Browser Secondary Feature of Larger App Very Simple App Minimally Viable Product10

Primary Interaction is Real Time Communication while in the background Offline notifications Switch Camera (front/back)11

Headless Peers Recording peer Embedded Systems12

Secure Communications Guarantee the behaviour of peers13

Augmented Reality Great opportunity for unique interactions Expert assistance overlay Live Games14

Non-camera and multiple sources Telemedicine Education15

Managing multiple platforms Just bite the bulletTranslationHybridCross-compile with Xamarin16

Demo17

Integrating Mobile Applications – Contrasting theBrowser with Native OS AppsPeter DunkleyAcision

Acision at-a-glanceHeritage & historyGlobal presence & reach20 year history35 offices across 6continents270 customers globally850 employees2 trillion messages/ year100 support teamInnovationOperational Excellence1st to launch commercialSMSCCloud & virtualizedservicesMulti-Channel messaging WebRTCData and insightsCarrier grade security24/7 Support

THE STATE OF WEBRTC ON MOBILE TODAY

WebRTC in browsers on mobile devicesAndroidiOS Supported in Google Chrome,Mozilla Firefox, and EricssonBowser* for Android Mobile browser support trailsdesktop browser support WebRTC in WebViewssupported in Android Lollypop Supported in Ericsson Bowser*for iOS* Ericsson Bowser is not yet (andmight never be) a platform forconsumers to use

WebRTC in browsers on mobile devicesBlackberry 10Windows Mobile Natively supported within theOS No support today– Google Chrome rendering enginein built into BB10

WebRTC in browsers on mobile devices Support for WebRTC in mobile browsers isinconsistent across the various platforms Even on Android it lags behind what is available indesktop browsers Other features needed by many apps (for example,mobile push notifications) still require native appsFor the rest of this presentation I will only consider Android and iOS

WebRTC libraries for mobile devicesGoogle Media Engine (GME)OpenWebRTC (from Ericsson) Liberal open-source license Used within Google Chrome andparts used within Mozilla Firefox G.711 and Opus audio VP8 video DataChannel support Widely used today Liberal open-source license(BSD) Used within Ericsson Bowser G.711 and Opus audio H.264* and VP8 video No DataChannel support (yet) Not widely used today* Does not confer a license to use H.264

WebRTC libraries for mobile devices The GME is the best known and widest used librarytoday– The only option if you want to use DataChannels rightnow OpenWebRTC is worth watching– The fact that it contains an H.264 implementationdoesn’t mean developers can just use itFor the rest of this presentation I will only consider the GME

WHAT CAN I DO WITH WEBRTC IN AMOBILE BROWSER TODAY?

Android Click-2-call style apps can be used in Google Chromeon Android– You can’t receive sessions when the browser is closed– You can’t write WebRTC apps that require mobile pushnotifications Some hybrid apps (combination of native code andWebViews using WebRTC) are possible on AndroidLollypop

iOS Nothing today

THE GOOGLE MEDIA ENGINE

WebRTC ArchitectureYour webapp #3Your webapp #2Your webapp #1.The webWebRTC APIRTCWebWebRTC C API (PeerConnection)Session management / Abstract signalling (Session)Voice EngineVideo EngineTransportG.711/OPUS CodecH.264/VP8 CodecSRTPNetEQ for VoiceVideo Jitter BufferMultiplexingEcho Canceller /Noise ReductionImage enhancementsP2PSTUN TURN ICEAudio Capture/RenderVideo CaptureNetwork I/OBased on the diagram from http://www.webrtc.org/reference/architectureYour browser

WebRTC C API The C API documentation at http://www.webrtc.org/is very basic– There is a close mapping between the functions defined inthe W3C WebRTC draft (for JavaScript) and the C API– You can infer the C API behaviour by interpreting the W3Cdraft Getting the WebRTC C API working on a nativemobile device is not easy

The media engine isn’t enough Even once you’ve gotten the media engine workingyou need more to establish your sessions– Discovering peers and exchanging media capabilities andconnection details needs to happen before the media sessioncan be established You need to consider user management andprovisioning tooThere are many developer toolkits and SDK available to help youhere (each with slightly different benefits) – take advantage of them

Consider using OAuth2 if you can15Request Identity6Access TokenAuthentication Code4IdentityOAuth2Provider72Authentication Code83IdentityWeb Service

Consider using OAuth2 if you canWebService5: Shared secretUAYou don’t have tocreate or manageaccounts on theSignalling ServerCommunication linknot requiredSignallingServer

CROSS PLATFORM CODE EXAMPLEBased on the Acision Forge SDK

Android ExampleAcisionSdkConfiguration config new AcisionSdkConfiguration("MYAPIKEY ", "user", isionSdk acisionSdk new AcisionSdk(config, new AcisionSdkCallbacks() {@Overridepublic void onConnected(AcisionSdk acisionSdk) {session acisionSdk.getWebrtc().connectTo(" 441632960000",new WebrtcSessionCallbacks() {@Overridepublic void onConnected() emoteView(remoteVideoView);}}, new WebrtcOptions());}});

iOS ExampleACSAcisionSDKConfiguration *config [ACSAcisionSDKConfiguration rname:@"user" password:@"password"];self.acisionSDK [ACSAcisionSDK acisionSDKWithConfig:config delegate:self];- (void)onConnected:(ACSAcisionSDK *)acisionSDK {ACSAcisionSDKWebRTCOptions* options [[ACSAcisionSDKWebRTCOptions alloc] init];self.currentSession [self.acisionSDK.webrtc connectTo: @" 441632960000”,delegate:self options:options];}-(void)onConnected {self.currentSession.localView self.localView;self.currentSession.remoteView self.remoteView;}

JavaScript Examplevar lib new AcisionSDK("MYAPIKEY", {onConnected: function() {var session lib.webrtc.connect(" 441632960000");session.remoteVideoElement eAudioElement document.getElementById("audRemote");}}, {username: "user",password: "password"});

IOS DEEP DIVEBased on the Acision Forge SDK

Noughts and Crosses

PROS Leverage existing expertise Develop once, use everywhere (in theory) Simple API Simple deployment CONS Design Complexity Limited API iOS not supported Windows Phone not supported IE not supported 8. . Cross-compile with Xamarin 16. Demo 17. Integrating Mobile Applications -Contrasting the Browser with .