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
   

   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