Save 37% off PRO during our Black Friday Sale! »

WhatRTC? Everything you need to know to connect browsers to the world.

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
December 11, 2014

WhatRTC? Everything you need to know to connect browsers to the world.

Traditionally browsers talk to servers, but what if they could speak to each other? WebRTC is a small set of APIs that make peer to peer communication possible between browsers. Video, audio and data can flow from browser to browser opening up a new set of possibilities for the web.

We'll take a look at what WebRTC gives you and, importantly, what it leaves out. We'll take a look at implementing a simple chat application and speculate over more complicated use cases and examples.

--

Some links from the slides:

Blog post on getting started:
https://www.twilio.com/blog/2014/12/set-phasers-to-stunturn-getting-started-with-webrtc-using-node-js-socket-io-and-twilios-nat-traversal-service.html
https://github.com/philnash/video-chat

These slides on GitHub:
https://github.com/philnash/whatrtc

Waggledance:
http://waggle.monkeypatch.me/
https://github.com/tOkeshu/waggle.js
https://www.youtube.com/watch?v=pyIIkUV3moM

WebTorrent
http://webtorrent.io/

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

December 11, 2014
Tweet

Transcript

  1. WHATRTC?

  2. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com

  3. +442033899329

  4. WHAT IS WEBRTC?

  5. WEB REAL TIME COMMUNICATION

  6. None
  7. REALLY REAL TIME

  8. APIs •  getUserMedia •  RTCPeerConnection •  RTCDataChannel

  9. BROWSER SUPPORT

  10. None
  11. None
  12. WHAT DOES WEBRTC DO?

  13. GET VIDEO

  14. AWESOME RIGHT?

  15. HOW DOES IT WORK?

  16. Meet Alice and Bob

  17. PRESENCE

  18. You need a server

  19. Alice logs on

  20. Bob logs on

  21. Alice knows Bob is there

  22. NAT TRAVERSAL

  23. None
  24. ICE ICE Baby All right stop, collaborate and listen Ice

    is back with my brand new invention Something grabs a hold of me tightly NAT Traversal goin on daily and nightly “
  25. NAT Traversal •  NAT — Network Address Translation •  ICE

    — Interactive Connectivity Establishment •  STUN — Session Traversal Utilities for NAT •  TURN — Traversal Using Relays around NAT
  26. Hidden behind NAT

  27. None
  28. Alice gets ICE candidates

  29. Bob gets ICE candidates

  30. SIGNALLING

  31. Alice sends candidates to Bob

  32. Bob sends candidates to Alice

  33. Media offer/answer

  34. Connection!

  35. TURN Connection!

  36. WEBRTC IDEAS

  37. Waggledance Distribute bandwidth amongst video viewers •  Example: http:/ /waggle.monkeypatch.me/

    •  Code: https:/ /github.com/tOkeshu/waggle.js •  Video: https:/ /www.youtube.com/watch? v=pyIIkUV3moM
  38. Webtorrent Streaming torrent client for node and the browser •

     Code: http:/ /webtorrent.io/ •  npm: https:/ /www.npmjs.org/package/webtorrent
  39. Remember those texts? CALL

  40. Resources •  http:/ /bit.ly/stunturn •  https:/ /github.com/philnash/video-chat •  https:/ /github.com/philnash/whatrtc

  41. ONWARD!

  42. Thanks! @philnash http:/ /philna.sh philnash@twilio.com