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. 4.
  2. 5.
  3. 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
  4. 7.
  5. 8.
  6. 9.

    What is WebRTC Data Channel? •Send arbitrary data between browsers

    •Binary or text data •Reliable or unreliable transport •Simple WebSocket-style API
  7. 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); };
  8. 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)
  9. 12.
  10. 13.
  11. 14.
  12. 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)
  13. 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
  14. 32.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  15. 33.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  16. 34.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  17. 35.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  18. 36.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  19. 37.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  20. 38.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  21. 39.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  22. 40.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  23. 41.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  24. 42.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  25. 43.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  26. 44.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  27. 45.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  28. 46.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  29. 47.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  30. 48.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  31. 49.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  32. 50.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  33. 51.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  34. 52.

    Signaling server STUN server LAN LAN WebSocket WebSocket Ice Candidate

    Ice Candidate What’s my ip? What’s my ip?
  35. 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
  36. 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
  37. 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%
  38. 57.
  39. 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
  40. 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
  41. 60.
  42. 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
  43. 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
  44. 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
  45. 66.

    Images •peerCDN automatically serves all images on your site •<img

    src=“omg_cats.gif”> •No site changes required, just copy-paste
  46. 69.

    How do you intercept image loads? • “Capturing” technique (by

    Shawn at Mobify, see Mozilla Hacks) •document.write(‘<plaintext style=“display: none”>’)
  47. 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
  48. 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”>
  49. 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()
  50. 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
  51. 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
  52. 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”
  53. 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
  54. 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
  55. 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)
  56. 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
  57. 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.”
  58. 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!
  59. 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
  60. 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)
  61. 86.
  62. 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
  63. 90.