WhatRTC? Everything you need to know to connect browsers to the world. (Front Trends 2015)

WhatRTC? Everything you need to know to connect browsers to the world. (Front Trends 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
http://signal.twilio.com

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

May 07, 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. (+48) 79 944 93 06

  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. MOBILE SUPPORT

  25. None
  26. APIS

  27. APIs •  getUserMedia •  RTCPeerConnection •  RTCDataChannel

  28. getUserMedia

  29. HOW DOES IT WORK?

  30. Meet Alice and Bob

  31. PRESENCE

  32. You need a server

  33. Alice logs on

  34. Bob logs on

  35. Alice knows Bob is there

  36. NAT TRAVERSAL

  37. None
  38. ICE ICE BABY

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

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

  41. None
  42. Alice gets ICE candidates

  43. Bob gets ICE candidates

  44. SIGNALLING

  45. Alice sends candidates to Bob

  46. Bob sends candidates to Alice

  47. USER MEDIA

  48. getUserMedia

  49. Media offer/answer

  50. Connection!

  51. TURN Connection!

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

     Signalling
  53. OTHER WEBRTC IDEAS

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

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

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

  62. BUT WAIT...

  63. None
  64. DEMO

  65. None
  66. NASH20

  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

    •  
  69. Help me! On a scale of 0 to 10, how

    likely is it that you would recommend this talk to a friend or colleague? (+48) 79 944 93 06
  70. ONWARD!

  71. 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? (+48) 79 944 93 06