WebRTC Data Black Magic

WATCH VIDEO: https://vimeo.com/77265280

"Since its inception, the Realtime Conference have been extremely fortunate to play host to manifold wizards of the technical sphere. That said, there is naught that could have prepared you for the following revelations, which may in fact run athwart the boundaries of reality itself. I hereby present to you, Gustave Congelés (played by Feross Aboukhadijeh) with WebRTC Data Black Magic! " -- RealtimeConf 2013 intro

[WebRTC Data Channels]

Transcript

1. WebRTC Data Black Magic
2. What is WebRTC? •Adds peer-to-peer capabilities to the browser •Video, audio, data •Protocol •JavaScript API
3. WebSocket WebSocket Server
4. WebRTC
5. OMG!
6. This is huge •Fundamentally changes the nature of the web •Data has always flowed between server and client. •Now data can flow from client to client
7. INSTALL
9. What is WebRTC Data Channel? •Send arbitrary data between browsers •Binary or text data •Reliable or unreliable transport •Simple WebSocket-style API
10. What is WebRTC Data Channel? •Send arbitrary data between browsers •Binary or text data •Reliable or unreliable transport •Simple WebSocket-style API channel.send(‘hi’); channel.onmessage = function (e) { console.log(e.data); };
11. What can you do with Data Channel? • Real-time chat • File sharing • Super low latency networking for multiplayer games • Distributed databases / distributed hash tables / mad science? • Dark Web? (Tor Hidden Services, Freenet) • CDN? (Content Delivery Network)
15. Tell me more about Data Channels •Works without a browser permission prompt •Automatic 128-bit AES encryption •NATs (Network Address Translators) are not a problem •Except symmetric NATs (~8% of connections) •NAT hole-punching with ICE protocol (STUN, TURN)
16. LAN LAN ? The NAT problem
17. How do peers find each other? • Up to you! • Here’s an example: • Each user reports to server that they’re online • Make information available to all peers • When a peer wants to connect to another peer, it asks the server for an introduction to that peer
18. Signaling!
19. LAN LAN WebSocket WebSocket Signaling server
20. LAN LAN WebSocket WebSocket Signaling server I can haz Data Channel, plz?
21. LAN LAN WebSocket WebSocket Signaling server Offer SDP
22. LAN LAN WebSocket WebSocket Signaling server Offer SDP
23. LAN LAN WebSocket WebSocket Signaling server Offer SDP
24. LAN LAN WebSocket WebSocket Signaling server Offer SDP
25. LAN LAN WebSocket WebSocket Signaling server Offer SDP
26. Signaling server LAN LAN WebSocket WebSocket Answer SDP
27. Signaling server LAN LAN WebSocket WebSocket Answer SDP
28. Signaling server LAN LAN WebSocket WebSocket Answer SDP
29. Signaling server LAN LAN WebSocket WebSocket Answer SDP
30. Signaling server LAN LAN WebSocket WebSocket Answer SDP
31. Signaling server STUN server LAN LAN WebSocket WebSocket
32. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
33. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
34. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
35. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
36. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
37. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
38. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
39. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
40. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
41. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
42. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
43. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
44. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
45. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
46. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
47. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
48. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
49. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
50. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
51. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
52. Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate Ice Candidate What’s my ip? What’s my ip?
53. Signaling server STUN server LAN LAN WebSocket WebSocket Data Channel
54. Data Channel limitations •Chrome & Firefox cannot interoperate •Chrome can’t send binary data •Chrome can’t use reliable transport •No Safari, Internet Explorer, or Opera support •Bugs
55. Data Channel limitations •Chrome & Firefox cannot interoperate •Chrome can’t send binary data •Chrome can’t use reliable transport •No Safari, Internet Explorer, or Opera support •Bugs
56. Data Channel limitations •Chrome & Firefox cannot interoperate •Chrome can’t send binary data •Chrome can’t use reliable transport •No Safari, Internet Explorer, or Opera support •Bugs 60%
58. peerCDN •Peer-to-peer CDN, powered by your site visitors •“browser cache sharing” •Simple install: just paste a script tag •Serves images, video, audio, file downloads
59. Why use peerCDN? • If you already have a CDN (Akamai, CloudFront, etc.)... • Dramatically reduce bandwidth costs (up to 90%) • If you don’t have a CDN... • Easiest way to get started (just paste a script) • Capacity closely follows the demand • More visitors = more seeders
61. Let’s see it
62. Redecentralize
63. How does peerCDN work? • Central “tracker” server • Tracks seeders, does peer introductions, file hashing • Client-side script • Resource “capturing”, cache management, peering decisions, file splitting/recombining, file verification, seeding
64. Is it reliable? • Tracker down? • Immediately fallback: load site normally • Slow peers? • Slow peers are automatically pruned • Speed check: if overall speed is too slow: load remaining data normally
65. How is incorrect file data detected? • Trust the central tracker server • Creates a SHA1 hash list (Merkle tree) for every file • Peers use the hash list to verify that file data is correct • Use web worker pool for “streaming” SHA1 hashing • Discard invalid data, try again from different peer (rare) • Rule: Never display unvalidated data to the user
66. Images •peerCDN automatically serves all images on your site •<img src=“omg_cats.gif”> •No site changes required, just copy-paste
67. How do you intercept image loads?
68. How do you intercept image loads? • “Capturing” technique (by Shawn at Mobify, see Mozilla Hacks)
69. How do you intercept image loads? • “Capturing” technique (by Shawn at Mobify, see Mozilla Hacks) •document.write(‘<plaintext style=“display: none”>’)
70. How do you intercept image loads? • “Capturing” technique (by Shawn at Mobify, see Mozilla Hacks) •document.write(‘<plaintext style=“display: none”>’) • Wait for HTML to load
71. How do you intercept image loads? • “Capturing” technique (by Shawn at Mobify, see Mozilla Hacks) •document.write(‘<plaintext style=“display: none”>’) • Wait for HTML to load • Change all <img src=“cat.gif”> to <img data-peercdn-src=“cat.gif”>
72. How do you intercept image loads? • “Capturing” technique (by Shawn at Mobify, see Mozilla Hacks) •document.write(‘<plaintext style=“display: none”>’) • Wait for HTML to load • Change all <img src=“cat.gif”> to <img data-peercdn-src=“cat.gif”> • Inject HTML back into page w/ document.open() & document.write()
73. “Always bet on the Web” •“Always bet on JavaScript” •Because there’s almost always a way to do what you want •Hacks on hacks on hacks... •Awesome •Might make you die a little on the inside
74. How do you stream video & audio? •MediaSource API •Pipe JS binary data into HTML5 <video> and <audio> tags •<video> decodes H.264, OGG, “MPEG container” media for you •To handle seeking, you need keyframed video & pre-parsed video container
75. What about privacy? • By definition, peer-to-peer reveals your IP address • Behind NAT, maybe you don’t care • Use peerCDN only on non-sensitive websites • Crazy ideas: • Give people random files to seed to confuse would-be snoops • Add “onion routing”
76. What about latency? • Roundtrip to tracker to find peers for a resource • Roundtrip through tracker for signaling • Roundtrip to STUN server (to generate ICE candidates) • Roundtrip to send/receive ICE candidates • Roundtrip to peer to establish a data channel • Roundtrip to request file pieces and start receiving data
77. Latency hacks •Only load below-the-fold images over peerCDN •For video/audio, load first 10 seconds normally, peerCDN for rest •For big files, initial latency doesn’t really matter •Dominated by user’s overall download speed
78. How do you access the browser cache? • You can’t. No programmatic access. • Alternatives: • Filesystem API • IndexedDB • LocalStorage • Absolutely cannot prompt the user for disk space (10% of free space [temp], prompt for perm) (50 MB, prompt for more) (5-10 MB max) (Chrome)
79. How do you access the browser cache? •Options: •Settle for limited disk space and just use in-memory cache •Trick the browser to get more disk space
80. Trolling LocalStorage “User agents should limit the total amount of space allowed for storage areas. User agents should guard against sites storing data under the origins other affiliated sites, e.g. storing up to the limit in a1.example.com, a2.example.com, a3.example.com, etc, circumventing the main example.com storage limit.”
81. Trolling LocalStorage •Chrome, Internet Explorer, and Safari ignore recommendation •Every subdomain gets its own 5-10 MB quota •Subdomains are free •We can can get unlimited disk space with no prompt!
82. Let’s see it filldisk.com
83. What about Firefox? •In Firefox, each domain gets 10 MB of disk space •Solution: buy a lot of domains •100 domains (.info) × $2 per year = $200 per year •100 domains × 10 MB each = 1,000 MB per visitor
84. filldisk google bug report
85. More Challenges •How do you test WebRTC apps? - we built our own test harness •Implement reliability & flow control on unreliable transport •Chrome out-of-memory bugs (because of 32 bit) •Chrome has inefficient ArrayBuffers (3x size increase)
87. peercdn.com
88. WebTorrent • BitTorrent in your browser! • No plugins (uses WebRTC Data Channels for peer-to-peer data) • Streaming playback (get first pieces first) • Works with .torrent files and magnet links • Supports DHT (trackerless torrents) over WebRTC • DHT nodes do "peer introductions" so WebRTC can work without a centralized signaling server • Supports completely serverless, trackerless operation
89. webtorrent.io
90. thanks!
91. gustave congelés gustave.me