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:

Articles:

WebRTC

By jprem

WebRTC

  • 369