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. 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. 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
  3. 19.

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

    signaling server ! HTTP, Websockets, or ?? webpage [HTML / JS] 1) Initialize
  4. 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
  5. 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!
  6. 23.

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

    webpage [HTML / JS] webpage [HTML / JS] Trying to…
  7. 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!
  8. 25.

    @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Why do we need

    servers with WebRTC? I was promised peer-to-peer!
  9. 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
  10. 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
  11. 30.

    @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 How TURN works TURN

    Jane’s data Jane’s data John’s data John’s data
  12. 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!
  13. 42.

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

    Walt Disney @lisamarienyc | LearnFromLisa.com WebRTC
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 54.

    @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Potential of WebRTC 6.2

    billion by 2018 Financial Services Healthcare Insurance
  20. 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!