WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. It was released by Google in 2011 and it is becoming more famous day by day.
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
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 ???
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
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
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
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
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
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
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
36. #webrtc
Signaling
Signaling
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
37. #webrtc
Signaling
Signaling
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
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
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 ConnectionApplication
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 ConnectionApplication
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)