WhatRTC? Everything you need to know to connect browsers to the world. (UpFront Mini 2015)

Traditionally browsers talk to 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. Video, audio and data can flow from browser to browser opening up a new set of possibilities for the web.

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.

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. 0161 850 5217
5. TECH CHECK
6. Today •  What is WebRTC? •  How to do WebRTC? •  What to do with WebRTC?
7. COMMUNICATION
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
25. MOBILE SUPPORT
27. APIS
28. APIs •  getUserMedia •  RTCPeerConnection •  RTCDataChannel
29. getUserMedia
30. HOW DOES IT WORK?
31. Meet Alice and Bob
32. PRESENCE
33. You need a server
34. Alice logs on
35. Bob logs on
36. Alice knows Bob is there
37. NAT TRAVERSAL
39. ICE ICE BABY
40. ICE ICE Baby •  ICE — Interactive Connectivity Establishment •  NAT — Network Address Translation •  STUN — Session Traversal Utilities for NAT •  TURN — Traversal Using Relays around NAT
41. Hidden behind NAT
43. Alice gets ICE candidates
44. Bob gets ICE candidates
45. SIGNALLING
46. Alice sends candidates to Bob
47. Bob sends candidates to Alice
48. USER MEDIA
49. getUserMedia
50. Media offer/answer
51. Connection!
52. TURN Connection!
53. Summary •  Presence •  NAT Traversal •  User Media •  Signalling
54. WEBRTC IDEAS
56. 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
58. Webtorrent Streaming torrent client for node and the browser •  Code: http:/ /webtorrent.io/ •  npm: https:/ /www.npmjs.org/package/webtorrent
59. Gaming •  Live gaming against friends •  CubeSlam: https:/ /www.cubeslam.com/
62. Remember those texts? Call
63. WHAT ABOUT SOME CODE?
65. DEMO
66. 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
67. Resources •  http:/ /bit.ly/stunturn •  https:/ /github.com/philnash/video-chat •  https:/ /github.com/philnash/whatrtc •  http:/ /speakerdeck.com/philnash
68. Help me! On a scale of 0 to 10, how likely is it that you would recommend this talk to a friend or colleague? 0161 850 5217
69. ONWARD!
70. 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? 0161 850 5217