Peer-to-peer Web - Speaker Deck

Slide 1

Slide 1 text

Peer-to-peer Web by @feross

Slide 2

Slide 2 text

WebRTC by @feross

Slide 3

Slide 3 text

WebRTC Browser Browser

Slide 4

Slide 4 text

WebSocket WebSocket Server Browser Browser

Slide 5

Slide 5 text

WebRTC Browser Browser

Slide 6

Slide 6 text

How is this possible? •What about security? •What about the same origin policy? •What about asking the user for permission? •What about users behind firewalls/NATs? •ISN’T THIS CRAZY?

Slide 7

Slide 7 text

WebRTC •W3C/IETF web standard •Simple JavaScript API •Supports voice and video with amazing video quality •Supports arbitrary data (reliable or unreliable) •Peer-to-peer

Slide 8

Slide 8 text

Why is this exciting?

Slide 9

Slide 9 text

“A project to bring realtime communication (RTC) to the open web platform” ! - Justin Uberti @ Google I/O 2012

Slide 10

Slide 10 text

INSTALL

Slide 11

Slide 11 text

No content

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

(show examples)

Slide 16

Slide 16 text

“I popped in to a recent HTML5 development conference and was surprised at lack of general knowledge by the “geeks at large” about webrtc." ! - Chris Kranky

Slide 17

Slide 17 text

MAD SCIENCE

Slide 18

Slide 18 text

(show examples)

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

WebTorrent •BitTorrent in the browser (over WebRTC) •Existing BitTorrent clients •Streaming video playback •Easy to share links •No installation required

Slide 21

Slide 21 text

bittorrent bittorrent bittorrent bittorrent

Slide 22

Slide 22 text

bittorrent bittorrent bittorrent bittorrent bittorrent

Slide 23

Slide 23 text

bittorrent bittorrent bittorrent bittorrent bittorrent

Slide 24

Slide 24 text

bittorrent bittorrent bittorrent bittorrent webtorrent webtorrent bittorrent

Slide 25

Slide 25 text

bittorrent bittorrent bittorrent bittorrent webtorrent webtorrent bittorrent

Slide 26

Slide 26 text

bittorrent bittorrent bittorrent bittorrent webtorrent webtorrent webtorrent.js webtorrent.js bittorrent webtorrent.js

Slide 27

Slide 27 text

bittorrent bittorrent bittorrent bittorrent webtorrent webtorrent webtorrent.js webtorrent.js webtorrent (webrtc) bittorrent webtorrent.js

Slide 28

Slide 28 text

bittorrent webtorrent.js NOT POSSIBLE TCP/UDP WebRTC

Slide 29

Slide 29 text

bittorrent bittorrent bittorrent bittorrent webtorrent webtorrent webtorrent.js webtorrent.js webtorrent (webrtc) bittorrent webtorrent.js IMPORTANT!

Slide 30

Slide 30 text

The plan 1. Build a native torrent client (for OS X, Windows, Linux) 2. Build a web torrent client (for the browser) 3. Add WebRTC to the native client so it can talk to the web clients

Slide 31

Slide 31 text

• bittorrent-protocol (wire protocol) • bittorrent-swarm (manage sockets) • bittorrent-dht (peer discovery) • bittorrent-tracker (client & server, udp & http) • parse-torrent (parse .torrent files) • magnet-uri (parse magnet uris) • ut_metadata (fetch metadata) • bittorrent-client (expose torrents as node.js streams) • webtorrent (stream torrents to VLC)

Slide 32

Slide 32 text

Mutual Dependencies • peerflix (used by popcorn time) • torrent-mount • https://github.com/mafintosh

Slide 33

Slide 33 text

! ! ! !

Slide 34

Slide 34 text

! var pdf = ‘d2474e86c95b19b8bcfdb92bc12c9d44667cfa36’ webtorrent(pdf, ‘#viewer’)

Slide 35

Slide 35 text

! var movie = ‘d2474e86c95b19b8bcfdb92bc12c9d44667cfa36’ webtorrent(movie, function (err, stream) { if (!err) video.src = stream })

Slide 36

Slide 36 text

webtorrent.io

Slide 37

Slide 37 text

“I popped in to a recent HTML5 development conference and was surprised at lack of general knowledge by the “geeks at large” about webrtc." ! - Chris Kranky

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

getUserMedia()

Slide 40

Slide 40 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 41

Slide 41 text

Signaling

Slide 42

Slide 42 text

getUserMedia()

Slide 43

Slide 43 text

getUserMedia()

Slide 44

Slide 44 text

new RTCPeerConnection(constraints, config) getUserMedia()

Slide 45

Slide 45 text

new RTCPeerConnection(constraints, config) pc getUserMedia()

Slide 46

Slide 46 text

new RTCPeerConnection(constraints, config) pc getUserMedia() addStream()

Slide 47

Slide 47 text

new RTCPeerConnection(constraints, config) pc getUserMedia() addStream() “negotiationneeded”

Slide 48

Slide 48 text

new RTCPeerConnection(constraints, config) pc createOffer() getUserMedia() addStream() “negotiationneeded”

Slide 49

Slide 49 text

new RTCPeerConnection(constraints, config) pc createOffer() getUserMedia() addStream() “negotiationneeded”

Slide 50

Slide 50 text

new RTCPeerConnection(constraints, config) pc createOffer() getUserMedia() addStream() “negotiationneeded” setLocalDescription()

Slide 51

Slide 51 text

new RTCPeerConnection(constraints, config) pc Server createOffer() getUserMedia() addStream() “negotiationneeded” setLocalDescription()

Slide 52

Slide 52 text

new RTCPeerConnection(constraints, config) pc Server createOffer() getUserMedia() addStream() “negotiationneeded” setLocalDescription()

Slide 53

Slide 53 text

new RTCPeerConnection(constraints, config) pc Server new RTCPeerConnection(…) createOffer() getUserMedia() addStream() “negotiationneeded” setLocalDescription()

Slide 54

Slide 54 text

new RTCPeerConnection(constraints, config) pc Server pc new RTCPeerConnection(…) createOffer() getUserMedia() addStream() “negotiationneeded” setLocalDescription()

Slide 55

Slide 55 text

setRemoteDescription() new RTCPeerConnection(constraints, config) pc Server pc new RTCPeerConnection(…) createOffer() getUserMedia() addStream() “negotiationneeded” setLocalDescription()

Slide 56

Slide 56 text

setRemoteDescription() new RTCPeerConnection(constraints, config) pc Server pc new RTCPeerConnection(…) createOffer() getUserMedia() addStream() getUserMedia() “negotiationneeded” setLocalDescription()

Slide 57

Slide 57 text

Slide 58

Slide 58 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() pc Server pc new RTCPeerConnection(…) createOffer() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded”

Slide 59

Slide 59 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() pc Server pc new RTCPeerConnection(…) createOffer() createAnswer() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded”

Slide 60

Slide 60 text

Slide 61

Slide 61 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() pc Server pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded”

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() pc Server pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded”

Slide 65

Slide 65 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() “icecandidate” pc Server pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded”

Slide 66

Slide 66 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() “icecandidate” pc Server ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded”

Slide 67

Slide 67 text

Slide 68

Slide 68 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() “icecandidate” pc Server addIceCandidate() ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded”

Slide 69

Slide 69 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() “icecandidate” “icecandidate” pc Server addIceCandidate() ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded”

Slide 70

Slide 70 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() “icecandidate” “icecandidate” pc Server addIceCandidate() ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded”

Slide 71

Slide 71 text

Slide 72

Slide 72 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() “icecandidate” “icecandidate” pc Server addIceCandidate() ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() addIceCandidate() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded”

Slide 73

Slide 73 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() “icecandidate” “icecandidate” pc Server addIceCandidate() ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() addIceCandidate() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded” “addstream”

Slide 74

Slide 74 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() “icecandidate” “icecandidate” pc Server addIceCandidate() ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() addIceCandidate() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded” “addstream”

Slide 75

Slide 75 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() “icecandidate” “icecandidate” pc Server addIceCandidate() ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() addIceCandidate() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded” “addstream” “addstream”

Slide 76

Slide 76 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() “icecandidate” “icecandidate” pc Server addIceCandidate() ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() addIceCandidate() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded” “addstream” “addstream”

Slide 77

Slide 77 text

pc pc createDataChannel()

Slide 78

Slide 78 text

pc pc createDataChannel() “datachannel”

Slide 79

Slide 79 text

pc pc createDataChannel() “datachannel” send()

Slide 80

Slide 80 text

pc pc createDataChannel() “datachannel” send() “message”

Slide 81

Slide 81 text

(code)

Slide 82

Slide 82 text

setRemoteDescription() new RTCPeerConnection(constraints, config) setLocalDescription() “icecandidate” “icecandidate” pc Server addIceCandidate() ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() setRemoteDescription() addIceCandidate() getUserMedia() addStream() getUserMedia() addStream() “negotiationneeded” “addstream” “addstream”

Slide 83

Slide 83 text

new Peer({ initiator: true, stream: s })

Slide 84

Slide 84 text

new Peer({ initiator: true, stream: s })

Slide 85

Slide 85 text

new Peer({ initiator: true, stream: s }) Peer

Slide 86

Slide 86 text

“signal” new Peer({ initiator: true, stream: s }) Peer

Slide 87

Slide 87 text

“signal” new Peer({ initiator: true, stream: s }) Peer Server

Slide 88

Slide 88 text

“signal” new Peer({ initiator: true, stream: s }) Peer Server

Slide 89

Slide 89 text

“signal” new Peer({ initiator: true, stream: s }) Peer Server

Slide 90

Slide 90 text

“signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) Peer Server

Slide 91

Slide 91 text

“signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) Peer Server Peer

Slide 92

Slide 92 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) Peer Server Peer

Slide 93

Slide 93 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” Peer Server Peer

Slide 94

Slide 94 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” Peer Server Peer

Slide 95

Slide 95 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” Peer Server Peer

Slide 96

Slide 96 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() Peer Server Peer

Slide 97

Slide 97 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() “signal” Peer Server Peer

Slide 98

Slide 98 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() “signal” Peer Server ⋮ Peer

Slide 99

Slide 99 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() “signal” Peer Server ⋮ Peer

Slide 100

Slide 100 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() “signal” Peer Server signal() ⋮ Peer

Slide 101

Slide 101 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() “signal” “signal” Peer Server signal() ⋮ Peer

Slide 102

Slide 102 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() “signal” “signal” Peer Server signal() ⋮ ⋮ Peer

Slide 103

Slide 103 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() “signal” “signal” Peer Server signal() ⋮ ⋮ Peer

Slide 104

Slide 104 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() “signal” “signal” Peer Server signal() signal() ⋮ ⋮ Peer

Slide 105

Slide 105 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() “signal” “signal” Peer Server signal() signal() “stream” ⋮ ⋮ Peer

Slide 106

Slide 106 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() “signal” “signal” Peer Server signal() signal() “stream” “ready” ⋮ ⋮ Peer

Slide 107

Slide 107 text

signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) “signal” signal() “signal” “signal” Peer Server signal() signal() “stream” “ready” “stream” ⋮ ⋮ Peer