Intro to WebRTC

In this talk Thanasis will give us an introduction to what WebRTC can offer today, how you can use it to your benefit and browser support. We will then dive into how one can build a WebRTC application. What short of infrastructure is needed and how you can cut corners by utilizing readily available services out there.

Transcript

1. Intro to WebRTC Intro to WebRTC @thanpolas
2. Who is Thanasis Who is Thanasis Professional Professional Community Community Open Source Open Source Today CTO at Alacrity Startup CTO pos... Many of them on WebRTC startups Over 40 NPM packages Contributor to major Node.js packages Avid OSS author Local Node.js Meetup organizer (Greece) founder organizer skgtech.io DEVit Conference Software Engineer, CTO, founder Recently moved to London from Greece
3. Today's Menu Today's Menu Brief Intro to WebRTC How to build a WebRTC App Service Solutions
4. What is WebRTC? What is WebRTC? Provides browsers with Real Time Communication Free & Open Source Supported by all modern browsers* Feb 2014, first cross-browser connection
5. WebRTC Features WebRTC Features Real Time Voice and Video communication Peer to Peer Communication State of the art Codecs (VP8) What is WebRTC
6. WebRTC Adoption WebRTC Adoption Thousands of verticals in health, legal, services Sobered after 1st wave of startups Safari support opens up new opportunities What is WebRTC
7. WebRTC, The Good Parts WebRTC, The Good Parts Made Real Time Communication ubiquitous Provides free & open-source APIs Lowered the bar to entry What is WebRTC
8. WebRTC, The Ugly Parts WebRTC, The Ugly Parts Cheap start, expensive end game Costly development Connectivity problems What is WebRTC
9. How WebRTC Works How WebRTC Works WebRTC APIs Handshake of a WebRTC call Services needed for WebRTC We'll see the following:
10. WebRTC APIs WebRTC APIs getUserMedia acquires audio / video RTCPeerConnection audio / video communication RTCDataChannel Data communication How WebRTC Works getStats Statistics
11. Handshake of a WebRTC call Handshake of a WebRTC call How WebRTC works Peer 1 Peer 2 STUN Server Signal Server Notes * Simplified version, TURN missing * SDP: * ICE: Interactive Connectivity Establishment Session Description Protocol
12. Handshake of a WebRTC call Handshake of a WebRTC call How WebRTC works Peer 1 Peer 2 STUN Server Signal Server 1. Peer 1 asks their IP from STUN Notes * Simplified version, TURN missing * SDP: * ICE: Interactive Connectivity Establishment Session Description Protocol
13. Handshake of a WebRTC call Handshake of a WebRTC call How WebRTC works Peer 1 Peer 2 STUN Server Signal Server 1. Peer 1 asks their IP from STUN 2. Peer 1 offers SDP to Signal --> Peer 2 Notes * Simplified version, TURN missing * SDP: * ICE: Interactive Connectivity Establishment Session Description Protocol
14. Handshake of a WebRTC call Handshake of a WebRTC call How WebRTC works Peer 1 Peer 2 STUN Server Signal Server 1. Peer 1 asks their IP from STUN 2. Peer 1 offers SDP to Signal --> Peer 2 3. Peer 2 asks their IP from STUN Notes * Simplified version, TURN missing * SDP: * ICE: Interactive Connectivity Establishment Session Description Protocol
15. Handshake of a WebRTC call Handshake of a WebRTC call How WebRTC works Peer 1 Peer 2 STUN Server Signal Server 1. Peer 1 asks their IP from STUN 2. Peer 1 offers SDP to Signal --> Peer 2 3. Peer 2 asks their IP from STUN 4. Peer 2 responds with their SDP via Signal Notes * Simplified version, TURN missing * SDP: * ICE: Interactive Connectivity Establishment Session Description Protocol
16. Handshake of a WebRTC call Handshake of a WebRTC call How WebRTC works Peer 1 Peer 2 STUN Server Signal Server 1. Peer 1 asks their IP from STUN 2. Peer 1 offers SDP to Signal --> Peer 2 3. Peer 2 asks their IP from STUN 4. Peer 2 responds with their SDP via Signal 5. Peer 1 & 2 send ICE Candidates via Signal Notes * Simplified version, TURN missing * SDP: * ICE: Interactive Connectivity Establishment Session Description Protocol
17. Handshake of a WebRTC call Handshake of a WebRTC call How WebRTC works Peer 1 Peer 2 STUN Server Signal Server 1. Peer 1 asks their IP from STUN 2. Peer 1 offers SDP to Signal --> Peer 2 3. Peer 2 asks their IP from STUN 4. Peer 2 responds with their SDP via Signal 5. Peer 1 & 2 send ICE Candidates via Signal 6. Winning Candidate establishes connection Notes * Simplified version, TURN missing * SDP: * ICE: Interactive Connectivity Establishment Session Description Protocol
18. Services Needed for WebRTC Services Needed for WebRTC Signal Server: Your implementation to enable communication between peers. STUN Server: Session Traversal Utilities for NAT, low resource daemon. TURN Server: Traversal Using Relays around NAT, extreme resource server. How WebRTC Works
19. Building WebRTC Apps Building WebRTC Apps 1. Prototype using public WebRTC services 2. MVP using third-party WebRTC services 3. Grow using your infrastructure The general rule of thumb
20. Third-Party WebRTC Services Third-Party WebRTC Services TokBox One stop shop service, oldest in the market. Xirsys A la carte WebRTC services, as old as TokBox. Also: Vidyo, Twillio WebRTC The rest: https://tokbox.com/ https://xirsys.com/ https://www.callstats.io/2017/10/17/sdk-comparison/ Building WebRTC Apps
21. WebRTC in summary WebRTC in summary Revolutionizing Technology Vertical & Niche applications Costly development Costly infrastructure Connectivity risks your service delivery
22. Thank you Thanasis Polychronakis @thanpolas https://speakerdeck.com/thanpolas
23. Thank you Thanasis Polychronakis @thanpolas https://speakerdeck.com/thanpolas Questions? Questions?