Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WhatRTC? Everything you need to know to connect browsers to the world. (Øredev 2015)

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
November 04, 2015

WhatRTC? Everything you need to know to connect browsers to the world. (Øredev 2015)

Traditionally browsers and mobile applications communicate via 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 and mobile applications. Video, audio and data can flow from browser to browser, from app to app, opening up a new set of possibilities for modern communications.

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

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

WebTorrent
http://webtorrent.io/

CubeSlam
https://www.cubeslam.com/

Twilio Client
https://www.twilio.com/client

Twilio Video
https://www.twilio.com/video

Signal Conference
https://www.twilio.com/signal

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

November 04, 2015
Tweet

Transcript

  1. WHATRTC? Everything you need to know about connecting browsers to

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

  3. 076-944 73 49

  4. TECH CHECK

  5. Today •  What is WebRTC? •  How to do WebRTC?

    •  What to do with WebRTC?
  6. None
  7. None
  8. COMMUNICATION

  9. None
  10. None
  11. None
  12. None
  13. None
  14. POWERED BY WEBRTC

  15. WHAT IS WEBRTC?

  16. WEB REAL TIME COMMUNICATION

  17. REALLY REAL TIME

  18. PEER TO PEER

  19. VIDEO, AUDIO AND DATA

  20. SUPPORT

  21. None
  22. None
  23. None
  24. None
  25. None
  26. MOBILE SUPPORT

  27. None
  28. APIS

  29. APIs •  getUserMedia •  RTCPeerConnection •  RTCDataChannel

  30. getUserMedia

  31. HOW DOES IT WORK?

  32. Meet Alice and Bob

  33. PRESENCE

  34. You need a server

  35. Alice logs on

  36. Bob logs on

  37. Alice knows Bob is there

  38. NAT TRAVERSAL

  39. None
  40. ICE ICE BABY

  41. ICE ICE Baby •  ICE — Interactive Connectivity Establishment •

     NAT — Network Address Translation •  STUN — Session Traversal Utilities for NAT •  TURN — Traversal Using Relays around NAT
  42. Hidden behind NAT

  43. None
  44. Alice gets ICE candidates

  45. Bob gets ICE candidates

  46. SIGNALLING

  47. Alice sends candidates to Bob

  48. Bob sends candidates to Alice

  49. USER MEDIA

  50. getUserMedia

  51. Media offer/answer

  52. Connection!

  53. TURN Connection!

  54. Summary •  Presence •  NAT Traversal •  User Media •

     Signalling
  55. WEBRTC IDEAS

  56. None
  57. 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
  58. None
  59. Webtorrent Streaming torrent client for node and the browser •

     Code: http:/ /webtorrent.io/ •  npm: https:/ /www.npmjs.org/package/webtorrent
  60. Gaming •  Live gaming against friends •  CubeSlam: https:/ /www.cubeslam.com/

  61. None
  62. None
  63. Remember those texts? Call

  64. WHAT ABOUT SOME CODE?

  65. None
  66. DEMO

  67. MayDay results Launched September 2013, by April 2014 •  44

    advisors sang happy birthday •  648 advisors had been serenaded •  35 advisors had received marriage proposals •  3 customers asked for a bedtime story •  1 customer asked for help with a particularly difficult level of Angry Birds
  68. Resources •  http:/ /bit.ly/stunturn •  https:/ /github.com/philnash/video-chat •  https:/ /github.com/philnash/whatrtc

    •  https:/ /speakerdeck.com/philnash
  69. None
  70. Help me! On a scale of 0 to 10, how

    likely is it that you would recommend this talk to a friend or colleague? 076-944 73 49
  71. ONWARD!

  72. Thanks! @philnash http:/ /philna.sh philnash@twilio.com On a scale of 0

    to 10, how likely is it that you would recommend this talk to a friend or colleague? 076-944 73 49