webrtc on mobile
TRANSCRIPT
WebRTC on Mobile
Buşra Deniz@busradeniz
#webrtc
About Me
Buşra Deniz busradeniz@facebook
busradeniz@twitter
busradeniz.com
Certified Scrum Master @Netaş
Mobile Software Developer @Netaş
Co-Organizer @WTM Istanbul
Co-Organizer @GDG Istanbul
Student in SWE @Bogazici University
#webrtc
Agenda01
02
03
04
What is WebRTC ?What exactly is WebRTC and what does it solve ?
WebRTC Architecture & API’sThree Main API
Servers & ProtocolsWebRTC needs servers
05
Building a WebRTC AppHow can we include webRTC to our mobile apps?
Useful Links
WebRTC
#webrtc
How can I make multimedia call within my web apps?
#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
#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
#webrtc
Wait !! Need Browser to Mobile device communication for a complete solution ???
#webrtc
WebRTC on Mobile
Native iOS & Android library
Chrome for Android
Firefox for Android
Opera for Android
#webrtc
Why WebRTC on mobile ?
Tango
Line
Skype
Android
iOS
0 200 400 600 800 1000 1200 1400 1600 Millions
Statistics based on PrioriData, Oct 2014
Social and Messaging Application Downloads
#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
#webrtc
Free & Open SourceWebRTC is an open source project.
WebRTC can be used by anyone for anything without any payment
Plugin FreeWebRTC is embedded in browsers
no plugin required
For non-VoIP developersWebRTC hides complexity of media streaming, encoding/decoding media processes. Any web/mobile developer who has no telco background can develop RTC app.
Low CostIt enables peer to peer communication and you can add multi media to your application without any need to media server
What makes WebRTC different ?
#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
History of WebRTC
#webrtc
History of WebRTC
May 2011
Nov 2011
Jan 2013
Feb 2013
May 2013
Jun 2013
Source BlogGeek.me
WebRTC AnnouncedGoogle 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
InteroperabilityInitial 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 releasedFirst Firefox release that officially supports the ability to make video calls as well as use the Data channel API
ObjC&Java BindingsObjective C and Java bindings for WebRTC announced.
#webrtc
History of WebRTC
Source BlogGeek.me
Aug 2013
Sep 2013
Oct 2013
Mar 2014
May 2014
Oct 2014
Microsoft announced ORTC supportMicrosoft officially announced plans to support ORTC (WebRTC 1.1) in a future release of IE
Chrome for AndroidChrome 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 WebRTCOpera 20 for Android has WebRTC in GA
Microsoft promises to support GUMMicrosoft indicates in its IE status page that it plans to support GetUserMedia APIs in its next version of Internet Explorer
#webrtc
2015 - Year of WebRTC ??
#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
#webrtc
Popular Verticals
Source BlogGeek.me
Healthcare
Experts Market
Education
Gaming
Job interviews
Surveillance
Financial
#webrtc
WebRTC Global Developer Statistics
Source WebRTC Global Submit London 2015
2,000+ visitors per day to the developer docs1,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
Supported Platforms
#webrtc
Supported Platforms
#webrtc
1.500.000.000+ WebRTC Endpoints
Architecture & API’s
#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
#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 ArchitectureJavaScript / ObjC / Java API
#webrtc
WebRTC API’s
MediaStreamPeerConnection
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
Servers & Protocols
#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
#webrtc
Signaling
Caller Callee
Media
Session Description Session Description
WebRTC
App
WebRTC
App
Offer AnswerOfferAnswer
#webrtc
A call scenario (offer/answer mechanism)
create offer
set offer
send offer set remote offer
create answer
send answerset remote answer
SDP
SDP
Caller Callee
#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.1t=0 0m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126c=IN IP4 0.0.0.0a=rtcp:1 IN IP4 0.0.0.0a=ice-ufrag:W2TGCZw2NZHuwlnfa=ice-pwd:xdQEccP40E+P0L5qTyzDgfmWa=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-levela=mid:audioa=rtcp-muxa=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQea=rtpmap:111 opus/48000/2m=video 0 RTP/AVP 31a=rtpmap:31 H261/90000…
#webrtc
SignalingSignaling
Peer Peer
After signaling…needs more servers :/
It’s ideal world
media
#webrtc
SignalingSignaling
Peer Peer
But the real world !!
? SignSign NAT
NAT
STUN
media
STUN
- What is my public IP address
- Media peer to peer
- Cheap
- It always works but some cases ??STUN
#webrtc
SignalingSignaling
Peer Peer
Cases STUN does not work
? SignSign 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
#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
#webrtc
TURN vs P2P
14% 86%
- According to Google I/O 2013
Relayed P2P
8% 92%
- According to Bistri report
Relayed P2P
Building WebRTC App
#webrtc
WebRTC for iOS and Android
#webrtc
WebRTC for iOS and Android
https://chromium.googlesource.com/external/webrtc/+/masterhttps://github.com/webrtc
#webrtc
Set up a callRemote Peer Peer Connection Factory Peer ConnectionApplication
Create Connection FactoryCreate Peer Connection
Create Local Media StreamCreate Local Video TrackCreate Local Audio Track
Add Stream
Commit Stream Changes
On Signalling Message (offer)
Send Offer To Remote Peer
Get Answer From Remote PeerProcess Signalling Message (answer)
Media
#webrtc
Receive CallRemote Peer Peer Connection Factory Peer ConnectionApplication
Create Connection Factory
Create Peer Connection
Create Local Media StreamCreate Local Video TrackCreate 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)
Useful Links
#webrtc
Useful Links
http://www.webrtc.org/
http://www.html5rocks.com/en/tutorials/webrtc/basics/
http://bloggeek.me/
discuss-webrtc
@webrtc
@juberti & @sw12
Thanks
See You Next Time !!!