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

Introducing the NY Ruby community to WebRTC.

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!