WebTorrent: Bringing P2P to the masses with WebRTC

Slide 1

Slide 1 text

WEB TORRENT BRINGING P2P TO THE MASSES WITH WEBRTC

Slide 2

Slide 2 text

ONCE UPON A TIME...

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

RESILIENT

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

NO MIDDLEMEN

Slide 7

Slide 7 text

DIVERSE

Slide 8

Slide 8 text

PEOPLE POWERED

Slide 9

Slide 9 text

P2P PEER TO PEER

Slide 10

Slide 10 text

P2P ADVANTAGES > Censorship resistant > Privacy preserving > User controls their data > Safe against user-hostile changes

Slide 11

Slide 11 text

P2P APPLICATIONS > Currency Bitcoin > Web Tor, I2P, Freenet > Storage IPFS, Tahoe > Computation Ethereum > File sharing BitTorrent, WebTorrent

Slide 12

Slide 12 text

APPLICATIONS THAT USE P2P > Communication Skype, Hangouts > Music Spotify > OS Windows Update > Game Updates Blizzard, EVE Online > Content Delivery Network PeerCDN

Slide 13

Slide 13 text

CENTRALIZED APPS > ALL THE REST

Slide 14

Slide 14 text

SERVER → CLIENT

Slide 15

Slide 15 text

MAINFRAME → PC → CLOUD → ?

Slide 16

Slide 16 text

PEER ® PEER

Slide 17

Slide 17 text

P2P APPLICATIONS > Currency Bitcoin > Web Tor, I2P, Freenet > Storage IPFS, Tahoe > Computation Ethereum > File sharing BitTorrent, WebTorrent

Slide 18

Slide 18 text

WEB APPS TRAPPED IN THE BROWSER

Slide 19

Slide 19 text

DOMAINS, DNS, URLS

Slide 20

Slide 20 text

WEB ≠ P2P

Slide 21

Slide 21 text

WHAT IF IT WAS?

Slide 22

Slide 22 text

The way we code the Web will determine the way we live online. So we need to bake our values into our code. — Brewster Kahle, Internet Archive

Slide 23

Slide 23 text

WEB RTC REAL TIME COMMUNICATIONS

Slide 24

Slide 24 text

DATA CHANNEL HIDDEN GEM IN WEBRTC

Slide 25

Slide 25 text

DATA CHANNEL API var channel = peer.createDataChannel() channel.send('hi') channel.addEventListener('message', function (event) { console.log('got message: ' + event.data) })

Slide 26

Slide 26 text

THE ONLY P2P TRANSPORT THAT WORKS IN THE BROWSER

Slide 27

Slide 27 text

NAT TRAVERSAL

Slide 28

Slide 28 text

NO CROSS-ORIGIN POLICY

Slide 29

Slide 29 text

TRANSPORT ENCRYPTION

Slide 30

Slide 30 text

WEBRTC DATA CHANNEL IS UNIVERSAL

Slide 31

Slide 31 text

> WebRTC in web apps (desktop & mobile) > WebRTC in desktop apps > WebRTC in mobile apps > WebRTC in server/cli apps

Slide 32

Slide 32 text

BUILD P2P APPS

Slide 33

Slide 33 text

BUILD P2P PROTOCOLS

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

TORRENT CLIENT FOR THE WEB

Slide 36

Slide 36 text

DEMO

Slide 37

Slide 37 text

var WebTorrent = require('webtorrent') var client = new WebTorrent() client.add('magnet:...', function (torrent) { var file = torrent.files[0] // Display the file by adding it to the DOM. // Supports video, audio, image files, and more! file.appendTo('body') })

Slide 38

Slide 38 text

WEBTORRENT PROTOCOL IS 95% BITTORRENT

Slide 39

Slide 39 text

BITTORRENT WIRE PROTOCOL > TCP > uTP (UDP) > WebRTC

Slide 40

Slide 40 text

BITTORRENT TRACKER PROTOCOL > HTTP > UDP > WebSocket

Slide 41

Slide 41 text

HTTP/UDP TRACKERS 1. Send message to tracker (info hash, IP address, port) 2. Receive response with list of peers 3. Tracker adds you to list of peers

Slide 42

Slide 42 text

OFFER. ANSWER.

Slide 43

Slide 43 text

WEBSOCKET TRACKERS 1. Open WebSocket connection to tracker 2. Send message (info hash, WebRTC offers) 3. Receive some WebRTC answers 4. Keep WebSocket open to receive remote offers

Slide 44

Slide 44 text

WIRE PROTOCOL IS 100% THE SAME

Slide 45

Slide 45 text

BITTORRENT TRACKER PROTOCOL > HTTP > UDP > WebSocket

Slide 46

Slide 46 text

WEBTORRENT ON NPM > Lightweight (just 75 KB) > Pure JavaScript (no native dependencies) > Full-featured (magnet uris, dht, tracker, pex) > Stream from files (On-demand piece prioritization)

Slide 47

Slide 47 text

DESKTOP APP

Slide 48

Slide 48 text

WEBTORRENT DESKTOP

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

AIRPLAY, CHROMECAST, CLOSED CAPTIONS

Slide 52

Slide 52 text

DEMO

Slide 53

Slide 53 text

ELECTRON BUILD CROSS PLATFORM DESKTOP APPS WITH JAVASCRIPT, HTML, & CSS

Slide 54

Slide 54 text

PERFECT FOR WEBTORRENT DESKTOP

Slide 55

Slide 55 text

PERFECT FOR WEBRTC APPS

Slide 56

Slide 56 text

NODE.JS + CHROME

Slide 57

Slide 57 text

ELECTRON INCLUDES WEBRTC

Slide 58

Slide 58 text

WORKS IN NODE.JS & THE BROWSER

Slide 59

Slide 59 text

TORRENT TRANSPORTS > BitTorrent TCP/UDP > WebTorrent WebRTC

Slide 60

Slide 60 text

TORRENT TRANSPORTS > Node.js → TCP/UDP > Browser → WebRTC > Electron → TCP/UDP, WebRTC