WebRTC: Real-time Communication for Everyone! - Goruco 2014

WebRTC: Real-time Communication for Everyone! - Goruco 2014

Introducing the NY Ruby community to WebRTC.

0d97e9408cf6dd8d75a2a15351e31b07?s=128

Lisa Larson-Kelley

June 21, 2014
Tweet

Transcript

  1. @lisamarienyc | LearnFromLisa.com Goruco 2014 Real-time Communication 
 on the

    Web – for Everyone! Goruco 2014 June 21, 2014 ! Lisa Larson-Kelley LearnFromLisa.com lisa@learnfromlisa.com @lisamarienyc
  2. @lisamarienyc | LearnFromLisa.com Goruco 2014 Real-time Communication – for a

    few… FAIL
  3. @lisamarienyc | LearnFromLisa.com Goruco 2014 What is WebRTC? WebRTC =

    Awesome.
  4. @lisamarienyc | LearnFromLisa.com Goruco 2014 What is WebRTC? WebRTC

  5. @lisamarienyc | LearnFromLisa.com Goruco 2014 What is WebRTC?

  6. @lisamarienyc | LearnFromLisa.com Goruco 2014 Amazon Kindle Mayday Button

  7. @lisamarienyc | LearnFromLisa.com Goruco 2014 Google ChromeCast Google ChromeCast

  8. @lisamarienyc | LearnFromLisa.com Goruco 2014 appear.in/lisa

  9. @lisamarienyc | LearnFromLisa.com Goruco 2014 WebRTC is not a myth.

  10. @lisamarienyc | LearnFromLisa.com Goruco 2014 It’s going to be 


    “in” all the things.
  11. @lisamarienyc | LearnFromLisa.com Goruco 2014 BUT…

  12. @lisamarienyc | LearnFromLisa.com Goruco 2014 Doesn’t work in IE or

    Safari (No video on the iPad, revisited)
  13. @lisamarienyc | LearnFromLisa.com Goruco 2014 AND…

  14. THIS IS HAPPENING. WEBRTC

  15. @lisamarienyc | LearnFromLisa.com Goruco 2014 Browser support today… DESKTOP MOBILE

    IsWebRTCReadyYet.com
  16. @lisamarienyc | LearnFromLisa.com Goruco 2014 The SDP debate… http://www.w3.org/community/ortc/ http://webrtchacks.com/sdp-anatomy/

  17. @lisamarienyc | LearnFromLisa.com Goruco 2014 is 
 object-oriented.

  18. @lisamarienyc | LearnFromLisa.com Goruco 2014 Ok, the API is…

  19. @lisamarienyc | LearnFromLisa.com Goruco 2014 MediaStream RTCDataChannel RTCPeerConnection Ladies and

    Gentlemen, 
 The WebRTC APIs:
  20. @lisamarienyc | LearnFromLisa.com Goruco 2014 getUserMedia() MediaElement RTCPeerConnection MediaStream

  21. @lisamarienyc | LearnFromLisa.com Goruco 2014 chromeexperiments.com/detail/face- substitution/

  22. @lisamarienyc | LearnFromLisa.com Goruco 2014 RTCDataChannel Fast and efficient sharing

    of data ❖ Great for: ❖ Multiplayer games ❖ Text chat ❖ Remote applications ❖ File transfer Encrypted Congestion control built in Same API as WebSockets (basically)
  23. @lisamarienyc | LearnFromLisa.com Goruco 2014 cubeslam.com

  24. @lisamarienyc | LearnFromLisa.com Goruco 2014 RTCPeerConnection, under the hood Overall

    architecture diagram from www.WebRTC.org
  25. @lisamarienyc | LearnFromLisa.com Goruco 2014 Initiating a peer connection Set

    up signalling channel Get local media Set up peer connection Attach 
 media to connection Exchange session descriptions mediaStream API RTCPeerConnection API Overall architecture diagram from www.WebRTC.org
  26. @lisamarienyc | LearnFromLisa.com Goruco 2014 WebRTC, all the parts

  27. @lisamarienyc | LearnFromLisa.com Goruco 2014 The full WebRTC environment Web

    Servers PSTN Gateway Jingle Client Tablet Mobile Phone Phone PSTN Laptop PC SIP Client Other Servers WebRTC
  28. @lisamarienyc | LearnFromLisa.com Goruco 2014 Architecture of a WebRTC app

    webpage [HTML / JS] webpage [HTML / JS]
  29. @lisamarienyc | LearnFromLisa.com Goruco 2014 WebRTC app, with signaling webpage

    [HTML / JS] signaling server [HTTP or Websockets]
  30. @lisamarienyc | LearnFromLisa.com Goruco 2014 WebRTC app, with signaling webpage

    [HTML / JS] signaling server [HTTP or Websockets] webpage [HTML / JS]
  31. @lisamarienyc | LearnFromLisa.com Goruco 2014 WebRTC app, with signaling webpage

    [HTML / JS] signaling server [HTTP or Websockets] webpage [HTML / JS]
  32. @lisamarienyc | LearnFromLisa.com Goruco 2014 Signaling options

  33. @lisamarienyc | LearnFromLisa.com Goruco 2014 WebRTC signalling in Ruby !

    https://github.com/palavatv/palava-machine
  34. @lisamarienyc | LearnFromLisa.com Goruco 2014 Why do we need servers

    with WebRTC? I was promised peer-to-peer!
  35. @lisamarienyc | LearnFromLisa.com Goruco 2014 Introducing STUN, TURN and ICE

    ICE STUN TURN
  36. @lisamarienyc | LearnFromLisa.com Goruco 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
  37. @lisamarienyc | LearnFromLisa.com Goruco 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
  38. @lisamarienyc | LearnFromLisa.com Goruco 2014 How STUN servers work (sometimes…)

    Peer-to-Peer
  39. @lisamarienyc | LearnFromLisa.com Goruco 2014 How TURN works TURN Jane’s

    data Jane’s data John’s data John’s data
  40. @lisamarienyc | LearnFromLisa.com Goruco 2014 Interactive Connectivity Establishment (ICE) STUN

    TURN ICE
  41. @lisamarienyc | LearnFromLisa.com Goruco 2014 Interactive Connectivity Establishment (ICE) STUN

    TURN ICE STUN SUCCESS!
  42. @lisamarienyc | LearnFromLisa.com Goruco 2014 How to get started

  43. @lisamarienyc | LearnFromLisa.com Goruco 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
  44. @lisamarienyc | LearnFromLisa.com Goruco 2014 Use services STUN TURN

  45. @lisamarienyc | LearnFromLisa.com Goruco 2014 §WebRTC services and platforms -

    Tokbox.com Open Tok platform - Vidyo.com - rtc.io - Xirsys.com hosted server infrastructure § Instant free video conferencing - apprtc.appspot.com - AddLive.com - Vline.com - Vsee.com (free and premium) - Appear.in
 Some ready-to-use services
  46. @lisamarienyc | LearnFromLisa.com Goruco 2014 The DIY approach STUN TURN

  47. @lisamarienyc | LearnFromLisa.com Goruco 2014 Prebuilt frameworks ❖ PeerJS ❖

    SimpleWebRTC ❖ easyRTC ❖ webRTC.io ❖ RTC.io (node toolbox) ! ! ❖ PSTN Frameworks ❖ Phono - Open source JavaScript phone API: ❖ sipML5 - Open source JavaScript SIP client ❖ FreeSWITCH - scalable open source cross-platform telephony platform
  48. @lisamarienyc | LearnFromLisa.com Goruco 2014 SimpleWebRTC is simple.

  49. @lisamarienyc | LearnFromLisa.com Goruco 2014 SimpleWebRTC is simple.

  50. @lisamarienyc | LearnFromLisa.com Goruco 2014 Where to go from here.

  51. @lisamarienyc | LearnFromLisa.com Goruco 2014 Resources § 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! http://bit.ly/lisa-rtc
  52. @lisamarienyc | LearnFromLisa.com Goruco 2014 Potential of WebRTC 6.2 billion

    by 2018 Financial Services Healthcare Insurance
  53. @lisamarienyc | LearnFromLisa.com Goruco 2014 “What’s the biggest barrier to

    WebRTC adoption?” Source: WebRTC World Outlook 2014 Survey
  54. "It's kind of fun 
 to do the impossible." -

    Walt Disney @lisamarienyc | LearnFromLisa.com WebRTC
  55. @lisamarienyc | LearnFromLisa.com Goruco 2014 @lisamarienyc | LearnFromLisa.com bit.ly/learnwebrtc Thank

    you. Welcome to the new frontier of real-time communication on the web!