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.

Thanos Polychronakis

June 26, 2018
Tweet

More Decks by Thanos Polychronakis

Other Decks in Technology

Transcript

  1. Intro to WebRTC
    Intro to WebRTC
    @thanpolas

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide