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

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

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

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

February 06, 2015
Tweet

Transcript

  1. WHATRTC?

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

  3. CLOUD COMMUNICATIONS

  4. (+48) 79 944 92 68

  5. TECH CHECK

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

    •  Applications of WebRTC
  7. COMMUNICATION

  8. CONTEXT

  9. None
  10. MOBILE WITH A HUMAN TOUCH

  11. None
  12. None
  13. POWERED BY WEBRTC

  14. WHAT IS WEBRTC?

  15. WEB REAL TIME COMMUNICATION

  16. None
  17. REALLY REAL TIME

  18. PEER TO PEER

  19. HOLD UP!

  20. WEBRTC?

  21. AT A MOBILE EVENT?

  22. SUPPORT

  23. None
  24. None
  25. MOBILE SUPPORT

  26. None
  27. APIs •  MediaStream •  RTCPeerConnection •  RTCDataChannel

  28. WHAT DOES WEBRTC DO?

  29. Get Video

  30. AWESOME RIGHT?

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

  50. Connection!

  51. TURN Connection!

  52. OTHER WEBRTC IDEAS

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

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

  56. None
  57. None
  58. Remember those texts? Call

  59. 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
  60. MOBILE WITH A HUMAN TOUCH

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

    Image credits •  Alone on the Bench — Geraint Rowland
  62. 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 92 68
  63. ONWARD!

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