Slide 1

Slide 1 text

WebRTC Data Black Magic

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

WebSocket WebSocket Server

Slide 4

Slide 4 text

WebRTC

Slide 5

Slide 5 text

OMG!

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

INSTALL

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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)

Slide 16

Slide 16 text

LAN LAN ? The NAT problem

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Signaling!

Slide 19

Slide 19 text

LAN LAN WebSocket WebSocket Signaling server

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

LAN LAN WebSocket WebSocket Signaling server Offer SDP

Slide 22

Slide 22 text

LAN LAN WebSocket WebSocket Signaling server Offer SDP

Slide 23

Slide 23 text

LAN LAN WebSocket WebSocket Signaling server Offer SDP

Slide 24

Slide 24 text

LAN LAN WebSocket WebSocket Signaling server Offer SDP

Slide 25

Slide 25 text

LAN LAN WebSocket WebSocket Signaling server Offer SDP

Slide 26

Slide 26 text

Signaling server LAN LAN WebSocket WebSocket Answer SDP

Slide 27

Slide 27 text

Signaling server LAN LAN WebSocket WebSocket Answer SDP

Slide 28

Slide 28 text

Signaling server LAN LAN WebSocket WebSocket Answer SDP

Slide 29

Slide 29 text

Signaling server LAN LAN WebSocket WebSocket Answer SDP

Slide 30

Slide 30 text

Signaling server LAN LAN WebSocket WebSocket Answer SDP

Slide 31

Slide 31 text

Signaling server STUN server LAN LAN WebSocket WebSocket

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Signaling server STUN server LAN LAN WebSocket WebSocket Data Channel

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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%

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Let’s see it

Slide 62

Slide 62 text

Redecentralize

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Images •peerCDN automatically serves all images on your site • •No site changes required, just copy-paste

Slide 67

Slide 67 text

How do you intercept image loads?

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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()

Slide 73

Slide 73 text

“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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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”

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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)

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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!

Slide 82

Slide 82 text

Let’s see it filldisk.com

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

filldisk google bug report

Slide 85

Slide 85 text

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)

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

peercdn.com

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

webtorrent.io

Slide 90

Slide 90 text

thanks!

Slide 91

Slide 91 text

gustave congelés gustave.me