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

WhatRTC? Everything you need to know to connect browsers to the world. (UpFront Mini 2015)

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
October 06, 2015

WhatRTC? Everything you need to know to connect browsers to the world. (UpFront Mini 2015)

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.

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

October 06, 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. CLOUD COMMUNICATIONS

  4. 0161 850 5217

  5. TECH CHECK

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

    •  What to do with WebRTC?
  7. COMMUNICATION

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

  14. WHAT IS WEBRTC?

  15. WEB REAL TIME COMMUNICATION

  16. REALLY REAL TIME

  17. PEER TO PEER

  18. VIDEO, AUDIO AND DATA

  19. SUPPORT

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

  26. None
  27. APIS

  28. APIs •  getUserMedia •  RTCPeerConnection •  RTCDataChannel

  29. getUserMedia

  30. HOW DOES IT WORK?

  31. Meet Alice and Bob

  32. PRESENCE

  33. You need a server

  34. Alice logs on

  35. Bob logs on

  36. Alice knows Bob is there

  37. NAT TRAVERSAL

  38. None
  39. ICE ICE BABY

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

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

  42. None
  43. Alice gets ICE candidates

  44. Bob gets ICE candidates

  45. SIGNALLING

  46. Alice sends candidates to Bob

  47. Bob sends candidates to Alice

  48. USER MEDIA

  49. getUserMedia

  50. Media offer/answer

  51. Connection!

  52. TURN Connection!

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

     Signalling
  54. WEBRTC IDEAS

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

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

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

  63. WHAT ABOUT SOME CODE?

  64. None
  65. DEMO

  66. 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
  67. Resources •  http:/ /bit.ly/stunturn •  https:/ /github.com/philnash/video-chat •  https:/ /github.com/philnash/whatrtc

    •  http:/ /speakerdeck.com/philnash
  68. Help me! On a scale of 0 to 10, how

    likely is it that you would recommend this talk to a friend or colleague? 0161 850 5217
  69. ONWARD!

  70. 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? 0161 850 5217