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

WebRTC: Real-time Communication for Everyone! - Web Unleashed 2014

WebRTC: Real-time Communication for Everyone! - Web Unleashed 2014

WebRTC is a powerful open-source project that seamlessly enables real-time communication (RTC), baked right into modern web browsers. This means that web developers can now incorporate video, voice and data sharing using peer-to-peer connectivity via JavaScript APIs, with no plugins or additional installs required.

In this session, Lisa Larson-Kelley introduces the fundamentals of WebRTC, explaining its elements and capabilities in easy-to-understand terms, and demonstrates a simple ‘hello world’ application using the WebRTC API and open source libraries. With over 10 years of experience building real-time communication apps using Flash Media Server, Lisa brings her perspective and enthusiasm for RTC to this rapidly emerging open source technology that is poised to revolutionize how we communicate on the web.

Presented at Web Unleashed 2014 in Toronto.

Lisa Larson-Kelley

September 17, 2014
Tweet

More Decks by Lisa Larson-Kelley

Other Decks in Technology

Transcript

  1. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Real-time Communication –

    for Everyone!
    Web Unleashed Toronto 2014
    Sept 17, 2014
    !
    Lisa Larson-Kelley
    LearnFromLisa.com
    @lisamarienyc

    View full-size slide

  2. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    What is WebRTC?
    WebRTC

    View full-size slide

  3. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Communication.

    View full-size slide

  4. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014

    View full-size slide

  5. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014 Photo: @trevorcummings

    View full-size slide

  6. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014 Photo: @taylorherring

    View full-size slide

  7. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014 Photo: @NASA

    View full-size slide

  8. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Enter, WebRTC.
    WebRTC

    View full-size slide

  9. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    It’s going to be 

    “in”
    all the things.

    View full-size slide

  10. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    What is WebRTC?

    View full-size slide

  11. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Amazon Kindle Mayday Button

    View full-size slide

  12. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Google ChromeCast
    Google ChromeCast

    View full-size slide

  13. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Cystic Fibrosis e-Health & Telemonitoring Program

    View full-size slide

  14. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    appear.in/lisa

    View full-size slide

  15. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    chromeexperiments.com/detail/face-substitution/

    View full-size slide

  16. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    WebRTC, all the parts

    View full-size slide

  17. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    The full WebRTC environment
    Web Servers
    PSTN
    Gateway
    Jingle Client
    Tablet
    Mobile Phone
    Phone
    PSTN
    Laptop PC
    SIP Client
    Other Servers
    WebRTC

    View full-size slide

  18. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    MediaStream
    RTCDataChannel
    RTCPeerConnection
    WebRTC

    View full-size slide

  19. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Get connected using WebRTC
    signaling
    server
    !
    HTTP, Websockets, or ??
    webpage
    [HTML / JS]
    1) Initialize

    View full-size slide

  20. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Get connected using WebRTC
    webpage
    [HTML / JS]
    webpage
    [HTML / JS]
    signaling
    server
    !
    HTTP, Websockets, or ??
    1) Initialize
    2) Exchange 

    client info

    View full-size slide

  21. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    webpage
    [HTML / JS]
    webpage
    [HTML / JS]
    Get connected using WebRTC
    signaling
    server
    !
    HTTP, Websockets, or ??
    1) Initialize
    2) Exchange
    client info
    3) Communicate!

    View full-size slide

  22. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Signaling options
    + +

    View full-size slide

  23. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Get connected using WebRTC
    webpage
    [HTML / JS]
    webpage
    [HTML / JS]
    Trying to…

    View full-size slide

  24. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    1) Initialize and introduce
    (signaling)
    2) Exchange client info
    3) NAT traversal via STUN / TURN
    servers
    4) Communicate!

    View full-size slide

  25. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Why do we need servers
    with WebRTC?
    I was promised
    peer-to-peer!

    View full-size slide

  26. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    STUN
    Introducing STUN, TURN and ICE
    ICE
    TURN

    View full-size slide

  27. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Establishing Peer Connections: An Overview
    192.168.0.3 225.35.6.2.188
    192.168.0.3 = 225.35.6.2.188
    192.168.0.4 = 225.35.6.2.189
    192.168.0.5 = 225.35.6.2.190
    192.168.0.6 = 225.35.6.2.191
    Respond to 192.168.0.3

    View full-size slide

  28. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    How STUN servers work
    “Hey, what’s my external
    IP address?”
    “My IP address is 41.19.4.1.255”
    STUN
    Your external IP Address is
    225.35.6.2.188
    “My IP address is
    225.35.6.2.188
    Peer-to-Peer

    View full-size slide

  29. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    How STUN servers work (sometimes…)
    Peer-to-Peer

    View full-size slide

  30. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    How TURN works
    TURN
    Jane’s data Jane’s data
    John’s data
    John’s data

    View full-size slide

  31. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Interactive Connectivity Establishment (ICE)
    STUN
    TURN
    ICE

    View full-size slide

  32. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Interactive Connectivity Establishment (ICE)
    STUN
    TURN
    ICE
    STUN
    SUCCESS!

    View full-size slide

  33. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Al…most… there….
    MYTHs
    BUSTED!
    @lisamarienyc | LearnFromLisa.com

    View full-size slide

  34. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Opaque
    (unless you’re a telecom engineer)
    BUSTED!

    View full-size slide

  35. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Not well documented
    BUSTED!

    View full-size slide

  36. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Doesn’t work in IE or Safari, 

    so why bother?
    (No video on the iPad, revisited)
    (sorta)
    BUSTED!

    View full-size slide

  37. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Browser support today…
    DESKTOP
    MOBILE
    IsWebRTCReadyYet.com

    View full-size slide

  38. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    What about this competing

    ORTC thing?
    BUSTED!

    View full-size slide

  39. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    The SDP debate…
    http://www.w3.org/community/ortc/

    View full-size slide

  40. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    is 

    object-oriented.

    View full-size slide

  41. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    @lisamarienyc | LearnFromLisa.com

    View full-size slide

  42. "It's kind of fun 

    to do the impossible."
    - Walt Disney
    @lisamarienyc | LearnFromLisa.com
    WebRTC

    View full-size slide

  43. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    How to get started

    View full-size slide

  44. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    What do you need?
    ✓ Core programming skills

    HTML, CSS and
    JavaScript
    ✓ Your preferred HTML editor
    ✓ Webcam and microphone
    ✓ Latest build of 

    Chrome or 

    Firefox

    View full-size slide

  45. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Use services / libraries
    STUN
    TURN

    View full-size slide

  46. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    §Instant free video conferencing
    ๏ apprtc.appspot.com
    ๏ AddLive.com
    ๏ Vline.com
    ๏ Vsee.com (free and premium)
    ๏ Appear.in
    ๏ (and more every day!)
    Some ready-to-use services

    View full-size slide

  47. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    §WebRTC services and platforms
    ๏ Tokbox.com Open Tok platform
    ๏ Vidyo.com
    ๏ rtc.io
    ๏ Xirsys.com hosted server 

    infrastructure
    Some ready-to-use services

    View full-size slide

  48. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    The DIY approach
    STUN TURN

    View full-size slide

  49. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Prebuilt frameworks – Telephony
    ‣Phono - Open source
    JavaScript phone API
    ‣sipML5 - Open source
    JavaScript SIP client
    ‣FreeSWITCH - Scalable
    open source cross-platform
    service

    View full-size slide

  50. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    ‣PeerJS
    ‣SimpleWebRTC
    ‣easyRTC
    ‣webRTC.io
    ‣RTC.io (node toolbox)
    Prebuilt frameworks – Web

    View full-size slide

  51. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    SimpleWebRTC is simple.

    View full-size slide

  52. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    SimpleWebRTC is simple.

    View full-size slide

  53. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    § Simplest possible API demos
    § HTML5Rocks tutorials
    § Video chat: apprtc.appspot.com 

    (with source code)
    § webrtc-experiment.com - Muaz Khan
    § http://webrtcbook.com - Alan Johnston and Daniel Burnett
    § And more!
    Resources
    http://bit.ly/lisa-rtc

    View full-size slide

  54. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Potential of WebRTC
    6.2 billion
    by 2018
    Financial Services
    Healthcare Insurance

    View full-size slide

  55. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Speaking Exchange

    Created by FCB BRASIL
    Powered by WebRTC

    View full-size slide

  56. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Communication

    View full-size slide

  57. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    Communication Connection
    = Photo: @Popicinio

    View full-size slide

  58. @lisamarienyc | LearnFromLisa.com
    Web Unleashed 2014
    @lisamarienyc | LearnFromLisa.com
    bit.ly/learnwebrtc
    Thank you.
    Welcome to the new frontier of real-time
    communication on the web!

    View full-size slide