Slide 1

Slide 1 text

Intro to WebRTC Intro to WebRTC @thanpolas

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Today's Menu Today's Menu Brief Intro to WebRTC How to build a WebRTC App Service Solutions

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

WebRTC Features WebRTC Features Real Time Voice and Video communication Peer to Peer Communication State of the art Codecs (VP8) What is WebRTC

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

WebRTC, The Ugly Parts WebRTC, The Ugly Parts Cheap start, expensive end game Costly development Connectivity problems What is WebRTC

Slide 9

Slide 9 text

How WebRTC Works How WebRTC Works WebRTC APIs Handshake of a WebRTC call Services needed for WebRTC We'll see the following:

Slide 10

Slide 10 text

WebRTC APIs WebRTC APIs getUserMedia acquires audio / video RTCPeerConnection audio / video communication RTCDataChannel Data communication How WebRTC Works getStats Statistics

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

WebRTC in summary WebRTC in summary Revolutionizing Technology Vertical & Niche applications Costly development Costly infrastructure Connectivity risks your service delivery

Slide 22

Slide 22 text

Thank you Thanasis Polychronakis @thanpolas https://speakerdeck.com/thanpolas

Slide 23

Slide 23 text

Thank you Thanasis Polychronakis @thanpolas https://speakerdeck.com/thanpolas Questions? Questions?