WebRTC in 15 minutes or less
by Jake Prem
What is it?
RTC = Real Time Communication
A standard created based on Google Hangouts
Peer to Peer
Audio
Video
Data
How does it work?
The Basics
- Caller -> Offer -> Receiver
- Receiver -> Answer -> Caller
- Caller <- Candidates -> Receiver
Servers
- Signalling
- STUN
- TURN
Signalling
- Not specified by WebRTC
- Anything that can relay data
between clients - WebSockets, XMPP, Jingle,
Carrier Pigeon, SMS
ICE
- Interactive Connectivity Establishment
- Not a part of WebRTC
- Used to find connection candidates between
two peers on potentially NATed networks - Types: Host, Server Reflexive, Relay
Candidates
- Host (localhost and local network)
- Server Reflexive (STUN)
- Relay (TURN)
STUN
- Session Traversal of UDP through NAT
- Not a part of WebRTC
- NAT- Network Address Translation
- local.ip:port <-> public.ip:port
- 192.168.0.5:80 <-> 98.103.6.50:21590
- Router has public IP, directs traffic to private IP
- A peer uses STUN to find its available public.ip:port
- Packets sent to that IP/Port pair will be sent to the peer
- Symmetric NAT -> Both sender and receiver must match
TURN
- Traversal Using Relays around NAT
- If no direct connection can be established,
the TURN server can act as a proxy connection - Not a part of WebRTC
SDP
- Session Description Protocol
v=0
o=- 2024398092186117389 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE data
a=msid-semantic: WMS
m=application 53802 DTLS/SCTP 5000
c=IN IP4 192.168.106.1
b=AS:30
a=candidate:4264415733 1 udp 2122260223 192.168.106.1 53802 typ host generation 0 network-id 2
a=candidate:2148155033 1 udp 2122194687 192.168.184.1 53803 typ host generation 0 network-id 3
a=candidate:510275709 1 udp 2122129151 192.168.194.102 53804 typ host generation 0 network-id 1 network-cost 10
a=ice-ufrag:yEy0
a=ice-pwd:+4jpZ5GgVZ9zTfIBMJdqVV47
a=ice-options:trickle
a=fingerprint:sha-256 5E:3A:97:51:4F:DC:DB:17:0B:B9:7E:49:F9:53:C8:E7:A2:AC:F0:01:DD:DE:D3:FE:B4:F1:AA:CD:3E:4C:A8:BF
a=setup:active
a=mid:data
a=sctpmap:5000 webrtc-datachannel 1024
When should I use it?
AKA Why shouldn't I just use websockets?
You should just use websockets... unless:
WebRTC Pros
- Video/Audio is much easier
- Lower latency
-
UDP in the browser!
- Unreliable delivery
- Less overhead than TCP
- Websockets uses TCP
- Games
WebRTC Cons
- Manage your own connections
- Confusing to setup all of the protocols
- Implement a full messaging platform in websockets or another signalling medium before you can setup a WebRTC data channel
- Still generally requires a server/internet
- Lack examples and documentation
- Has changed fairly frequently in the past
Recommendations
- Use websockets if you can
- Use a library if you can*
- Write your WebRTC code as a library
that the rest of your application can
user
- *see resources section
Resources
- PeerJS
- Airconsole
- Write your own!
Libraries:
- HTML5 Rocks
- MDN WebRTC
Articles:
WebRTC
By jprem
WebRTC
- 369