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.

0d97e9408cf6dd8d75a2a15351e31b07?s=128

Lisa Larson-Kelley

September 17, 2014
Tweet

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
  2. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 What is WebRTC? WebRTC

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

  4. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014

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

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

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

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

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

    
 “in” all the things.
  10. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 What is WebRTC?

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

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

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

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

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

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

  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
  18. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 MediaStream RTCDataChannel RTCPeerConnection WebRTC

  19. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Get connected using WebRTC

    signaling server ! HTTP, Websockets, or ?? webpage [HTML / JS] 1) Initialize
  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
  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!
  22. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Signaling options + +

  23. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Get connected using WebRTC

    webpage [HTML / JS] webpage [HTML / JS] Trying to…
  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!
  25. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Why do we need

    servers with WebRTC? I was promised peer-to-peer!
  26. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 STUN Introducing STUN, TURN

    and ICE ICE TURN
  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
  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
  29. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 How STUN servers work

    (sometimes…) Peer-to-Peer
  30. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 How TURN works TURN

    Jane’s data Jane’s data John’s data John’s data
  31. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Interactive Connectivity Establishment (ICE)

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

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

    @lisamarienyc | LearnFromLisa.com
  34. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Opaque (unless you’re a

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

  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!
  37. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Browser support today… DESKTOP

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


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

  40. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 is 
 object-oriented.

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

  42. "It's kind of fun 
 to do the impossible." -

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

  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
  45. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Use services / libraries

    STUN TURN
  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
  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
  48. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 The DIY approach STUN

    TURN
  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
  50. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 ‣PeerJS ‣SimpleWebRTC ‣easyRTC ‣webRTC.io

    ‣RTC.io (node toolbox) Prebuilt frameworks – Web
  51. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 SimpleWebRTC is simple.

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

  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
  54. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Potential of WebRTC 6.2

    billion by 2018 Financial Services Healthcare Insurance
  55. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Speaking Exchange
 Created by

    FCB BRASIL Powered by WebRTC
  56. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Communication

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

    @Popicinio
  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!