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

Signal Conference
http://signal.twilio.com

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. (+48) 79 944 93 06
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
24. MOBILE SUPPORT
26. APIS
27. APIs •  getUserMedia •  RTCPeerConnection •  RTCDataChannel
28. getUserMedia
29. HOW DOES IT WORK?
30. Meet Alice and Bob
31. PRESENCE
32. You need a server
33. Alice logs on
34. Bob logs on
35. Alice knows Bob is there
36. NAT TRAVERSAL
38. ICE ICE BABY
39. ICE ICE Baby •  ICE — Interactive Connectivity Establishment •  NAT — Network Address Translation •  STUN — Session Traversal Utilities for NAT •  TURN — Traversal Using Relays around NAT
40. Hidden behind NAT
42. Alice gets ICE candidates
43. Bob gets ICE candidates
44. SIGNALLING
45. Alice sends candidates to Bob
46. Bob sends candidates to Alice
47. USER MEDIA
48. getUserMedia
49. Media offer/answer
50. Connection!
51. TURN Connection!
52. Summary •  Presence •  NAT Traversal •  User Media •  Signalling
53. OTHER WEBRTC IDEAS
55. 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
57. Webtorrent Streaming torrent client for node and the browser •  Code: http:/ /webtorrent.io/ •  npm: https:/ /www.npmjs.org/package/webtorrent
58. Gaming •  Live gaming against friends •  CubeSlam: https:/ /www.cubeslam.com/
61. Remember those texts? Call
62. BUT WAIT...
64. DEMO
66. NASH20
67. 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
68. Resources •  http:/ /bit.ly/stunturn •  https:/ /github.com/philnash/video-chat •  https:/ /github.com/philnash/whatrtc •  
69. 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 93 06
70. ONWARD!
71. 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? (+48) 79 944 93 06