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

WhatRTC? Everything you need to know to connect browsers to the world. (4Developers 2015)

WhatRTC? Everything you need to know to connect browsers to the world. (4Developers 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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

April 20, 2015
Tweet

Transcript

  1. WHATRTC?

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

  3. CLOUD COMMUNICATIONS

  4. (+48) 73 248 31 45

  5. TECH CHECK

  6. Today •  Communication •  Introduction to WebRTC •  Implementing WebRTC

    •  Applications of WebRTC
  7. COMMUNICATION

  8. CONTEXT

  9. None
  10. None
  11. POWERED BY WEBRTC

  12. WHAT IS WEBRTC?

  13. WEB REAL TIME COMMUNICATION

  14. REALLY REAL TIME

  15. PEER TO PEER

  16. SUPPORT

  17. None
  18. None
  19. MOBILE SUPPORT

  20. None
  21. APIs •  getUserMedia •  RTCPeerConnection •  RTCDataChannel

  22. WHAT DOES WEBRTC DO?

  23. Get Video

  24. AWESOME RIGHT?

  25. HOW DOES IT WORK?

  26. Meet Alice and Bob

  27. PRESENCE

  28. You need a server

  29. Alice logs on

  30. Bob logs on

  31. Alice knows Bob is there

  32. NAT TRAVERSAL

  33. None
  34. ICE ICE BABY

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

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

  37. None
  38. Alice gets ICE candidates

  39. Bob gets ICE candidates

  40. SIGNALLING

  41. Alice sends candidates to Bob

  42. Bob sends candidates to Alice

  43. USER MEDIA

  44. getUserMedia

  45. Media offer/answer

  46. Connection!

  47. TURN Connection!

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

     Signalling
  49. OTHER WEBRTC IDEAS

  50. 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
  51. Webtorrent Streaming torrent client for node and the browser •

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

  53. None
  54. None
  55. Remember those texts? Call

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

  58. None
  59. NASH20

  60. 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) 73 248 31 45
  61. ONWARD!

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