Introduction to WebRTC

An introduction to WebRTC, how it works, what are it's applications, challenges and a video chat demo code to demonstrate it.

Transcript

1. Introduction to By Amr Abd ElKader
2. • Frontend Developer • Learning new things • Games, Series and Anime Amr M. Abd ElKader aka Amrmak
3. Outline • What is WebRTC • How does it work • Components • WebRTC APIs • Challenges • Applications
4. What is WebRTC?
5. What is WebRTC? • Web Real Time Communication • Establishes Peer to Peer (P2P) connection between browsers • Open Project • Supported by Google, Mozilla and Opera. • Secure (HTTPS Only)
6. How does it work?
7. Signaling • NOT defined by WebRTC • Build it yourself ! • Maximize compatibility with established technologies
8. Signaling Client A Client B
9. Signaling Signaling Server Client A Client B
10. Signaling STUN STUN Who am I ? Who am I ? Signaling Server Client A Client B IP: 156.205.187.84
11. Signaling Signaling Server Client A Client B Offer Answer Offer Answer SDP (Session Description Protocol)
12. Signaling Signaling Server Client A Client B
13. Components
14. Components • Signaling Server • Offer/Answer • STUN • ICE • TURN
15. Offer/Answer • Session Description Protocol (SDP) • Includes all the information about the caller's proposed configuration for the call • Share media information ◦ What kind of media ◦ Media format ..etc
16. STUN • Session Traversal Utilities for NAT • Generate candidates • Free
17. ICE • Interactive Connectivity Establishment • Exchange information about the network • Choose between UDP and TCP
18. TURN • Traversal Using Relays around NAT • Can’t establish P2P connection • Expensive
19. WebRTC APIs
20. WebRTC APIs • getUserMedia() * • RTCPeerConnection • RTCDataChannel
21. Challenges
22. Challenges • Reliability • Experimental APIs / Support
23. Support https://www.caniuse.com/#feat=rtcpeerconnection
24. Support https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection
25. Applications
26. Applications • Video calls and conferences • Screen sharing • Web torrents • ...
27. Who Uses it? More ...
28. Questions ?
29. Let's Build a Video Chat App !
30. Resources: • WebRTC official website • WebRTC API - MDN • HTML5 Rocks • Books: ◦ Getting Started With WebRTC - Rob Manson ◦ Real-time Communication With WebRTC - O'Reilly Media • Demo Code