[Busra Deniz] Google WebRTC on Mobile

Presentation from GDG DevFest Ukraine 2015 - the biggest Google related event in the country. October 23-24, Lviv. Learn more at http://devfest.gdg.org.ua/

Transcript

1. WebRTC on Mobile Buşra Deniz @busradeniz
2. #webrtc About Me Buşra Deniz busradeniz@facebook busradeniz@twitter busradeniz89@gmail.com busradeniz.com Certified Scrum Master @Netaş 
 Mobile Software Developer @Netaş Co-Organizer @WTM Istanbul Co-Organizer @GDG Istanbul Student in SWE @Bogazici University
3. #webrtc Agenda 01 02 03 04 What is WebRTC ? What exactly is WebRTC and what does it solve ? WebRTC Architecture & API’s Three Main API Servers & Protocols WebRTC needs servers 05 Building a WebRTC App How can we include webRTC to our mobile apps? Useful Links
4. WebRTC
5. #webrtc How can I make multimedia call 
 within my web apps?
6. #webrtc How can I make multimedia call 
 within my web apps? Use Session Initiation Protocol (SIP) ??!… - Has to use a browser plugin for SIP stack thus there is no out of the box SIP support inside web browsers - My website will not function properly unless web users install my plugin - Have to utilize SIP equipment on server side
 - Have to deal with highly complex SIP signaling during development cycle
7. #webrtc WebRTC Plugin Free !! Abstract Signaling - WebRTC is embedded in browsers no plugin required - Security is provided by browser vendors web users do not have to trust third party plugins - Web users do not have to deal with plugin installation, web apps will function properly with the embedded WebRTC support - No sophisticated telecom expertise is necessary to be able to provide multimedia communication functionality WebRTC - No need for sophisticated telecom equipment for backend
8. #webrtc Wait !! Need Browser to Mobile device communication for a complete solution ???
9. #webrtc WebRTC on Mobile Native iOS & Android library Chrome for Android Firefox for Android Opera for Android
10. #webrtc Why WebRTC on mobile ? Tango WeChat Line Skype Facebook WhatsApp LinkedIn Twitter Facebook Android iOS 0 200 400 600 800 1000 1200 1400 1600 Millions Statistics based on PrioriData, Oct 2014 Social and Messaging Application Downloads
11. #webrtc WebRTC on > 6bn devices by 2019 0 500 1000 1500 2000 2500 3000 3500 4000 4500 Q4’12 Q1’13 Q2’13 Q3’13 Q4’13 Q1’14 Q2’14 Q3’14 Q4’14 Q1’15 Q2’15 Q3’15 Q4’15 Q1’16 Q2’16 Q3’16 Q4’16 Smart Phones Tablets PCs
12. #webrtc Free & Open Source WebRTC is an open source project.
 WebRTC can be used by anyone for anything without any payment Plugin Free WebRTC is embedded in browsers no plugin required For non-VoIP developers WebRTC hides complexity of media streaming, encoding/decoding media processes. Any web/mobile developer who has no telco background can develop RTC app. Low Cost It enables peer to peer communication and you can add multi media to your application without any need to media server What makes WebRTC different ?
13. #webrtc WebRTC means that … 
 “ WebRTC is a new front in the long war for an open and unencumbered web”
 
 Brendan Eich
 - Mozilla CTO and inventor of Javascript
14. History of WebRTC
15. #webrtc History of WebRTC May 2011 Nov 2011 Jan 2013 Feb 2013 May 2013 Jun 2013 Source BlogGeek.me WebRTC Announced Google releases WebRTC source code for the first time under a permissive BSD license Chrome 23 adds No optional flag is required. Data channel capabilities not supported Firefox 20 adds WebRTC First release of Firefox supporting WebRTC. Comes with getUserMedia support only, which gives access to the local camera Interoperability Initial interoperability between Chrome and Firefox browsers achieved. This is still early on in the process, so things still don’t work as expected, but this is an indication of things to come Firefox 22 released First Firefox release that officially supports the ability to make video calls as well as use the Data channel API ObjC&Java Bindings Objective C and Java bindings for WebRTC announced.
16. #webrtc History of WebRTC Source BlogGeek.me Aug 2013 Sep 2013 Oct 2013 Mar 2014 May 2014 Oct 2014 Microsoft announced ORTC support Microsoft officially announced plans to support ORTC (WebRTC 1.1) in a future release of IE Chrome for Android Chrome 29 for Android now fully supports WebRTC Firefox for Android Firefox for Android supports WebRTC Opera 18 Beta intros First Opera released based on Chromium, providing immediate WebRTC support Opera for Android with
 WebRTC Opera 20 for Android has WebRTC in GA Microsoft promises to support GUM Microsoft indicates in its IE status page that it plans to support GetUserMedia APIs in its next version of Internet Explorer
17. #webrtc 2015 - Year of WebRTC ??
18. #webrtc 2014 WebRTC Solutions Source BlogGeek.me
19. #webrtc 2015 WebRTC Solutions Source BlogGeek.me
20. #webrtc 2015 WebRTC News 36 Ignored real time communications ( and still ignoring it) Aquired ScreenHero, who use WebRTC for screen sharing Has integration with WebRTC vendors appear.in, Hangouts, Room etc. Rebranding of Lync to Skype for Business Announced Skype for Web Uses WebRTC as a browser access point to Skype Anounces WebRTC usage in Jan5, 2015 First U.S Carrier to Launch Commercial Support WebRTC Provides its own WebRTC API with several enhancements Introduced video calling using WebRTC PaaS Didn’t want users to “migrate” to Skype for interactions In first 3 months 150,000 calls with 2,500,000 minutes of video calls Facebook Announces in April, 2015 Messenger will use WebRTC for voice and video call Before WebRTC, Messenger uses Skype as VoIP
21. #webrtc Popular Verticals Source BlogGeek.me Healthcare Experts Market Education Gaming Job interviews Surveillance Financial
22. #webrtc WebRTC Global Developer Statistics Source WebRTC Global Submit London 2015 2,000+ visitors per day to the developer docs
 1,000+ visitors per day to the sample code 4,000+ developers subscribed to the WebRTC mailing list 300K+ views of Webrtc.org developer videos 600+ companies building on WebRTC
 40+ external contributors 3B+ total downloads of WebRTC- powered mobile apps
23. Supported Platforms
24. #webrtc Supported Platforms
25. #webrtc 1.500.000.000+ 
 WebRTC Endpoints
26. Architecture & API’s
27. #webrtc WebRTC is both an open source project and a standard specification WebRTC 1.0 webrtc.org the standart specification not yet completed handled by the IETF and W3C the open source project by Google implementation of WebRTC spesification can be used by anyone for anything
28. #webrtc WebRTC Session Management / Abstract signalling WebRTC C++ API Audio Capture/Render Voice Engine Echo Cancler/Noise Reduction NetEQ for voice Codecs (ISAC /Opus) Video Engine Image enhancements Video jitter buffer Codecs ( VP8) Video Capture Transport P2P 
 STUN + TURN + ICE Multiplexing SRTP Network I/O WebRTC Architecture JavaScript / ObjC / Java API
29. #webrtc WebRTC API’s MediaStream PeerConnection DataChannel Means audio and/or video stream Can contain multiple track Can access camera and microphone Peer to peer multi media communication Encoding&Decoding media (codecs) Sends media over the network Security Bandwidth management P2P communication of arbitrary data Low latency Unreliable or reliable Secure
30. Servers & Protocols
31. #webrtc Abstract Signaling Signaling methods and protocols are not specified by WebRTC
 - To avoid redundancy - To maximize compatibility with established technologies Signaling is the process of coordinating communication. In order to set up a call, clients need to exchange some information : - Session control messages used to open or close communication - Media metadata such as codecs, bandwidth and media types - Key data, used to establish secure connections - Network data, such as host IP address and port
32. #webrtc Signaling Caller Callee Media Session Description Session Description WebRTC App WebRTC App Offer Answer Offer Answer
33. #webrtc A call scenario (offer/answer mechanism) create offer set offer send offer set remote offer create answer send answer set remote answer SDP SDP Caller Callee
34. #webrtc SDP (Session Description Protocol) SDP Session Description Time Description Media Description Purely a format for session description, intended to use different transport protocols as SIP, RTSP, HTTP v=0
 o=- 7614219274584779017 2 IN IP4 127.0.0.1 t=0 0 m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126 c=IN IP4 0.0.0.0 a=rtcp:1 IN IP4 0.0.0.0 a=ice-ufrag:W2TGCZw2NZHuwlnf a=ice-pwd:xdQEccP40E+P0L5qTyzDgfmW a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level a=mid:audio a=rtcp-mux a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/ EMkjHHIHORiClQe a=rtpmap:111 opus/48000/2 m=video 0 RTP/AVP 31 a=rtpmap:31 H261/90000
 …
35. #webrtc Signaling Signaling Peer Peer After signaling… needs more servers :/ It’s ideal world media
36. #webrtc Signaling Signaling Peer Peer But the real world !! ? Sign Sign NAT NAT STUN media STUN - What is my public IP address - Media peer to peer - Cheap - It always works but some cases ?? STUN
37. #webrtc Signaling Signaling Peer Peer Cases STUN does not work ? Sign Sign NAT STUN STUN TURN TURN NAT media - Used to relay audio/video/data streaming between peers - Data sent through server, uses server bandwidth TURN - The call works in almost all environments with using TURN
38. #webrtc ICE Framework - WebRTC uses ICE to overcome the complexitiy of real-world networking. - Tries to find best path to connect peers in parallel Peer Peer STUN TURN Sign
39. #webrtc TURN vs P2P 14% 86% - According to Google I/O 2013 Relayed P2P 8% 92% - According to Bistri report Relayed P2P
40. Building WebRTC
 App
41. #webrtc WebRTC for iOS and Android
42. #webrtc WebRTC for iOS and Android https://chromium.googlesource.com/external/webrtc/+/master https://github.com/webrtc
43. #webrtc Set up a call Remote Peer Peer Connection Factory Peer Connection Application Create Connection Factory Create Peer Connection Create Local Media Stream Create Local Video Track Create Local Audio Track Add Stream Commit Stream Changes On Signalling Message (offer) Send Offer To Remote Peer Get Answer From Remote Peer Process Signalling Message (answer) Media
44. #webrtc Receive Call Remote Peer Peer Connection Factory Peer Connection Application Create Connection Factory Create Peer Connection Create Local Media Stream Create Local Video Track Create Local Audio Track Add Stream Commit Stream Changes On Signalling Message (answer) Send Offer To Remote Peer Media On Add Stream Receive Answer From Remote Peer Process Signalling Message (offer)
45. Useful Links
46. #webrtc Useful Links http://www.webrtc.org/ http://www.html5rocks.com/en/tutorials/webrtc/basics/ http://bloggeek.me/ discuss-webrtc @webrtc @juberti & @sw12
47. Thanks See You Next Time !!!