Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to WebRTC

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.

Cbb9cafe03e785d80a9aa973c5e43c44?s=128

Thanos Polychronakis

June 26, 2018
Tweet

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?