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

WhatRTC? Everything you need to know about modern web communications.

WhatRTC? Everything you need to know about modern web communications.

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

March 19, 2015
Tweet

Transcript

  1. None
  2. None
  3. WHATRTC?

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

  5. CLOUD COMMUNICATIONS

  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. Media offer/answer

  44. Connection!

  45. TURN Connection!

  46. OTHER WEBRTC IDEAS

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

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

  50. None
  51. None
  52. Twilio Client

  53. 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
  54. COMMUNICATIONS CONTEXT CLOUD

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

  56. ONWARD!

  57. None
  58. The modern communications conference http:/ /signal.twilio.com Get 20% off with

    code NASH20
  59. Thanks! @philnash http:/ /philna.sh philnash@twilio.com