WhatRTC? Everything you need to know to connect browsers to the world.

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.

--

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

These slides on GitHub:
https://github.com/philnash/whatrtc

Waggledance:
http://waggle.monkeypatch.me/
https://github.com/tOkeshu/waggle.js
https://www.youtube.com/watch?v=pyIIkUV3moM

WebTorrent
http://webtorrent.io/

Transcript

1. WHATRTC?
2. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com
3. +442033899329
4. WHAT IS WEBRTC?
5. WEB REAL TIME COMMUNICATION
7. REALLY REAL TIME
8. APIs •  getUserMedia •  RTCPeerConnection •  RTCDataChannel
9. BROWSER SUPPORT
12. WHAT DOES WEBRTC DO?
13. GET VIDEO
14. AWESOME RIGHT?
15. HOW DOES IT WORK?
16. Meet Alice and Bob
17. PRESENCE
18. You need a server
19. Alice logs on
20. Bob logs on
21. Alice knows Bob is there
22. NAT TRAVERSAL
24. ICE ICE Baby All right stop, collaborate and listen Ice is back with my brand new invention Something grabs a hold of me tightly NAT Traversal goin on daily and nightly “
25. NAT Traversal •  NAT — Network Address Translation •  ICE — Interactive Connectivity Establishment •  STUN — Session Traversal Utilities for NAT •  TURN — Traversal Using Relays around NAT
26. Hidden behind NAT
28. Alice gets ICE candidates
29. Bob gets ICE candidates
30. SIGNALLING
31. Alice sends candidates to Bob
32. Bob sends candidates to Alice
33. Media offer/answer
34. Connection!
35. TURN Connection!
36. WEBRTC IDEAS
37. 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
38. Webtorrent Streaming torrent client for node and the browser •  Code: http:/ /webtorrent.io/ •  npm: https:/ /www.npmjs.org/package/webtorrent
39. Remember those texts? CALL
40. Resources •  http:/ /bit.ly/stunturn •  https:/ /github.com/philnash/video-chat •  https:/ /github.com/philnash/whatrtc
41. ONWARD!
42. Thanks! @philnash http:/ /philna.sh philnash@twilio.com