The document discusses WebRTC, a technology that enables real-time communication via web browsers. It provides three demos including a p2p connection demo and video call demo. It explains key WebRTC APIs like MediaStream, RTCPeerConnection, and RTCDataChannel. It also discusses signaling protocols, STUN/TURN servers, and the overall WebRTC architecture. The document aims to explain how WebRTC works and whether it is ready for use.

1. Demo 1: p2p connection
Demo 2: video call
Demo 3: WebRTC for React Native
https://rewebrtc.herokuapp.com/draw

2. W e b R T C i n A c t i o n
T h o Q L u o n g
g i t h u b . c o m / t h o q b k

3. What is WebRTC
● WebRTC is a new way to do realtime communication on the web without
using any plugin
● WebRTC is a free, open project that enables web browsers with Real-Time
Communications (RTC) capabilities via simple Javascript APIs.
● WebRTC API is available in Chrome 24+, Aurora (FF nightly build) and Opera
12+.

4. Three main Javascript APIs *
● MediaStream (aka getUserMedia)
● RTCPeerConnection
● RTCDataChannel
(*) https://io13webrtc.appspot.com/#14

5. MediaStream
● Represents a stream of audio and/or video
● Can contain multiple “tracks”
● Obtain a MediaStream with navigator.getUserMedia()

6. RTCPeerConnection
● Audio and video communication between peers
● RTCPeerConnection does alot:
○ Signal processing
○ Codec handing
○ Peer to peer communication
○ Security
○ Bandwidth management
○ ...

7. RTCDataChannel
● Bidirectional communication of arbitrary data between peers
● Same API as WebSockets
● Ultra-low latency
● Uses RTCPeerConnection to send data
● Send as reliable or unreliable data

8. Demo 2: video call
https://rewebrtc.herokuapp.com/
Demo 3: WebRTC for React Native

9. https://github.com/thoqbk/rewebrtc-server

10. How it works?
● Signaling protocols are a way to
coordinate and control the
communication between peers
● Session control messages
(communication initialization &
co.)
● Network configuration (e.g.
computer's IP address and port)

11. STUN and TURN
Ideal world Real world

12. STUN
● STUN (Session Traversal
Utilities for NAT) is a
standardized set of methods
and a network protocol to allow
an end host to discover its
public IP address if it is located
behind a NAT
● STUN servers have a single
task: to enable a peer behind a
NAT to find out its public
address and port

13. TURN
● Provide a cloud fallback if
peer-to-peer communication
fails
● Data is sent through server,
uses server bandwidth
● Ensures the call works in
almost all environments

14. Is WebRTC ready yet?

15. Demo 3:
WebRTC for React Native

16. https://github.com/thoqbk/rewebrtc

17. resources
https://www.webrtc.org
http://slides.com/giorgionatili/webrtc/fullscreen#/3/3
https://speakerdeck.com/paulsutherland/webrtc-presentation
http://michelle.github.io/webrtc-can-be-easy/#/41
http://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-
connections-ice-stun-and-turn.html
https://www.html5rocks.com/en/

18. WebRTC architecture