WebRTC Data Black Magic

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]

B498d33041627b07726dc29c28f02df7?s=128

Feross Aboukhadijeh

October 18, 2013
Tweet

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

  8. None
  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)
  12. None
  13. None
  14. None
  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%
  57. None
  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
  60. None
  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)
  86. None
  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