Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WHATRTC?
Phil Nash
@philnash
http://philna.sh
philnash@twilio.com
CLOUD
COMMUNICATIONS
(+48) 73 248 31 45
TECH CHECK
Today
•  Communication
•  Introduction to WebRTC
•  Implementing WebRTC
•  Applications of WebRTC
COMMUNICATION
CONTEXT
POWERED BY
WEBRTC
WHAT IS
WEBRTC?
WEB REAL TIME
COMMUNICATION
REALLY REAL
TIME
PEER TO PEER
SUPPORT
MOBILE
SUPPORT
APIs
•  getUserMedia
•  RTCPeerConnection
•  RTCDataChannel
WHAT DOES
WEBRTC DO?
Get Video
AWESOME
RIGHT?
HOW DOES IT
WORK?
Meet Alice and Bob
PRESENCE
You need a server
Alice logs on
Bob logs on
Alice knows Bob is there
NAT TRAVERSAL
ICE ICE BABY
ICE ICE Baby
•  ICE — Interactive Connectivity Establishment
•  NAT — Network Address Translation
•  STUN — Session Traver...
Hidden behind NAT
Alice gets ICE candidates
Bob gets ICE candidates
SIGNALLING
Alice sends candidates to Bob
Bob sends candidates to Alice
USER MEDIA
getUserMedia
Media offer/answer
Connection!
TURN Connection!
Summary
•  Presence
•  NAT Traversal
•  User Media
•  Signalling
OTHER WEBRTC
IDEAS
Waggledance
Distribute bandwidth amongst video viewers
•  Example: http://waggle.monkeypatch.me/
•  Code: https://github.c...
Webtorrent
Streaming torrent client for node and the browser
•  Code: http://webtorrent.io/
•  npm:
https://www.npmjs.org/...
Gaming
•  sLive gaming against friends
•  CubeSlam: https://www.cubeslam.com/
Remember those texts?
Call
MayDay results
Launched September 2013, by April 2014
•  44 advisors sang happy birthday
•  648 advisors had been serenade...
Resources
•  http://bit.ly/stunturn
•  https://github.com/philnash/video-chat
•  https://github.com/philnash/whatrtc
NASH20
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...
ONWARD!
Thanks!
@philnash
http://philna.sh
philnash@twilio.com
4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash
4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash
4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash
4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash
4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash
4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash
4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash
4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash
4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash
4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash
Upcoming SlideShare
Loading in …5
×

4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash

121 views

Published on

Speaker: Phil Nash

Language: English

Traditionally browsers 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, 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.

4Developers: http://4developers.org.pl/pl/

Published in: Software
  • Be the first to comment

  • Be the first to like this

4Developers 2015:WhatRTC? Everything you need to know to connect browsers to the world - Phil Nash

  1. 1. WHATRTC?
  2. 2. Phil Nash @philnash http://philna.sh philnash@twilio.com
  3. 3. CLOUD COMMUNICATIONS
  4. 4. (+48) 73 248 31 45
  5. 5. TECH CHECK
  6. 6. Today •  Communication •  Introduction to WebRTC •  Implementing WebRTC •  Applications of WebRTC
  7. 7. COMMUNICATION
  8. 8. CONTEXT
  9. 9. POWERED BY WEBRTC
  10. 10. WHAT IS WEBRTC?
  11. 11. WEB REAL TIME COMMUNICATION
  12. 12. REALLY REAL TIME
  13. 13. PEER TO PEER
  14. 14. SUPPORT
  15. 15. MOBILE SUPPORT
  16. 16. APIs •  getUserMedia •  RTCPeerConnection •  RTCDataChannel
  17. 17. WHAT DOES WEBRTC DO?
  18. 18. Get Video
  19. 19. AWESOME RIGHT?
  20. 20. HOW DOES IT WORK?
  21. 21. Meet Alice and Bob
  22. 22. PRESENCE
  23. 23. You need a server
  24. 24. Alice logs on
  25. 25. Bob logs on
  26. 26. Alice knows Bob is there
  27. 27. NAT TRAVERSAL
  28. 28. ICE ICE BABY
  29. 29. ICE ICE Baby •  ICE — Interactive Connectivity Establishment •  NAT — Network Address Translation •  STUN — Session Traversal Utilities for NAT •  TURN — Traversal Using Relays around NAT
  30. 30. Hidden behind NAT
  31. 31. Alice gets ICE candidates
  32. 32. Bob gets ICE candidates
  33. 33. SIGNALLING
  34. 34. Alice sends candidates to Bob
  35. 35. Bob sends candidates to Alice
  36. 36. USER MEDIA
  37. 37. getUserMedia
  38. 38. Media offer/answer
  39. 39. Connection!
  40. 40. TURN Connection!
  41. 41. Summary •  Presence •  NAT Traversal •  User Media •  Signalling
  42. 42. OTHER WEBRTC IDEAS
  43. 43. 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
  44. 44. Webtorrent Streaming torrent client for node and the browser •  Code: http://webtorrent.io/ •  npm: https://www.npmjs.org/package/webtorrent
  45. 45. Gaming •  sLive gaming against friends •  CubeSlam: https://www.cubeslam.com/
  46. 46. Remember those texts? Call
  47. 47. 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
  48. 48. Resources •  http://bit.ly/stunturn •  https://github.com/philnash/video-chat •  https://github.com/philnash/whatrtc
  49. 49. NASH20
  50. 50. 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
  51. 51. ONWARD!
  52. 52. Thanks! @philnash http://philna.sh philnash@twilio.com

×