$30 off During Our Annual Pro Sale. View Details »

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]

Feross Aboukhadijeh

October 18, 2013
Tweet

More Decks by Feross Aboukhadijeh

Other Decks in Programming

Transcript

  1. WebRTC Data
    Black Magic

    View Slide

  2. What is WebRTC?
    •Adds peer-to-peer capabilities to the browser
    •Video, audio, data
    •Protocol
    •JavaScript API

    View Slide

  3. WebSocket
    WebSocket
    Server

    View Slide

  4. WebRTC

    View Slide

  5. OMG!

    View Slide

  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

    View Slide

  7. INSTALL

    View Slide

  8. View Slide

  9. What is WebRTC Data Channel?
    •Send arbitrary data between browsers
    •Binary or text data
    •Reliable or unreliable transport
    •Simple WebSocket-style API

    View Slide

  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);
    };

    View Slide

  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)

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  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)

    View Slide

  16. LAN LAN
    ?
    The NAT problem

    View Slide

  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

    View Slide

  18. Signaling!

    View Slide

  19. LAN LAN
    WebSocket
    WebSocket
    Signaling server

    View Slide

  20. LAN LAN
    WebSocket
    WebSocket
    Signaling server
    I can haz Data Channel, plz?

    View Slide

  21. LAN LAN
    WebSocket
    WebSocket
    Signaling server
    Offer
    SDP

    View Slide

  22. LAN LAN
    WebSocket
    WebSocket
    Signaling server
    Offer
    SDP

    View Slide

  23. LAN LAN
    WebSocket
    WebSocket
    Signaling server
    Offer
    SDP

    View Slide

  24. LAN LAN
    WebSocket
    WebSocket
    Signaling server
    Offer
    SDP

    View Slide

  25. LAN LAN
    WebSocket
    WebSocket
    Signaling server
    Offer
    SDP

    View Slide

  26. Signaling server
    LAN LAN
    WebSocket
    WebSocket
    Answer
    SDP

    View Slide

  27. Signaling server
    LAN LAN
    WebSocket
    WebSocket
    Answer
    SDP

    View Slide

  28. Signaling server
    LAN LAN
    WebSocket
    WebSocket
    Answer
    SDP

    View Slide

  29. Signaling server
    LAN LAN
    WebSocket
    WebSocket
    Answer
    SDP

    View Slide

  30. Signaling server
    LAN LAN
    WebSocket
    WebSocket
    Answer
    SDP

    View Slide

  31. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket

    View Slide

  32. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  33. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  34. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip?
    What’s my ip?

    View Slide

  35. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  36. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  37. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  38. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  39. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  40. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip?
    What’s my ip?

    View Slide

  41. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  42. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  43. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  44. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  45. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  46. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  47. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  48. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  49. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  50. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  51. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  52. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Ice
    Candidate
    Ice
    Candidate
    What’s my ip? What’s my ip?

    View Slide

  53. Signaling server
    STUN server
    LAN LAN
    WebSocket
    WebSocket
    Data Channel

    View Slide

  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

    View Slide

  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

    View Slide

  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%

    View Slide

  57. View Slide

  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

    View Slide

  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

    View Slide

  60. View Slide

  61. Let’s see it

    View Slide

  62. Redecentralize

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  66. Images
    •peerCDN automatically serves all images on your site

    •No site changes required, just copy-paste

    View Slide

  67. How do you intercept image loads?

    View Slide

  68. How do you intercept image loads?
    • “Capturing” technique (by Shawn at Mobify, see Mozilla Hacks)

    View Slide

  69. How do you intercept image loads?
    • “Capturing” technique (by Shawn at Mobify, see Mozilla Hacks)
    •document.write(‘’)

    View Slide

  70. How do you intercept image loads?
    • “Capturing” technique (by Shawn at Mobify, see Mozilla Hacks)
    •document.write(‘’)
    • Wait for HTML to load

    View Slide

  71. How do you intercept image loads?
    • “Capturing” technique (by Shawn at Mobify, see Mozilla Hacks)
    •document.write(‘’)
    • Wait for HTML to load
    • Change all to

    View Slide

  72. How do you intercept image loads?
    • “Capturing” technique (by Shawn at Mobify, see Mozilla Hacks)
    •document.write(‘’)
    • Wait for HTML to load
    • Change all to
    • Inject HTML back into page w/ document.open() & document.write()

    View Slide

  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

    View Slide

  74. How do you stream video & audio?
    •MediaSource API
    •Pipe JS binary data into HTML5 and tags
    • decodes H.264, OGG, “MPEG container” media for you
    •To handle seeking, you need keyframed video & pre-parsed
    video container

    View Slide

  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”

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  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.”

    View Slide

  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!

    View Slide

  82. Let’s see it
    filldisk.com

    View Slide

  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

    View Slide

  84. filldisk google bug report

    View Slide

  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)

    View Slide

  86. View Slide

  87. peercdn.com

    View Slide

  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

    View Slide

  89. webtorrent.io

    View Slide

  90. thanks!

    View Slide

  91. gustave congelés
    gustave.me

    View Slide