Peer-to-peer Web

LXJS 2014. http://2014.lxjs.org/

Links mentioned in talk:

- http://talky.io
- https://www.sharefest.me
- http://github.com/mafintosh
- http://webtorrent.io
- https://github.com/feross/simple-peer
- https://github.com/feross/lxjs-chat

Transcript

1. Peer-to-peer Web
   by @feross
2. WebRTC
   by @feross
3. WebRTC Browser Browser
4. WebSocket WebSocket Server Browser Browser
5. WebRTC Browser Browser
6. 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?
7. 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
8. Why is this exciting?
9. “A project to bring realtime communication (RTC) to the open web platform” ! - Justin Uberti @ Google I/O 2012
10. INSTALL
15. (show examples)
16. “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
17. MAD SCIENCE
18. (show examples)
20. WebTorrent •BitTorrent in the browser (over WebRTC) •Existing BitTorrent clients •Streaming video playback •Easy to share links •No installation required
21. bittorrent bittorrent bittorrent bittorrent
22. bittorrent bittorrent bittorrent bittorrent bittorrent
23. bittorrent bittorrent bittorrent bittorrent bittorrent
24. bittorrent bittorrent bittorrent bittorrent webtorrent webtorrent bittorrent
25. bittorrent bittorrent bittorrent bittorrent webtorrent webtorrent bittorrent
26. bittorrent bittorrent bittorrent bittorrent webtorrent webtorrent webtorrent.js webtorrent.js bittorrent webtorrent.js
27. bittorrent bittorrent bittorrent bittorrent webtorrent webtorrent webtorrent.js webtorrent.js webtorrent (webrtc) bittorrent webtorrent.js
28. bittorrent webtorrent.js NOT POSSIBLE TCP/UDP WebRTC
29. bittorrent bittorrent bittorrent bittorrent webtorrent webtorrent webtorrent.js webtorrent.js webtorrent (webrtc) bittorrent webtorrent.js IMPORTANT!
30. 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
31. • 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)
32. Mutual Dependencies • peerflix (used by popcorn time) • torrent-mount • https://github.com/mafintosh
33. <script src=“webtorrent.js”></script> ! ! ! !
34. <script src=“webtorrent.js”></script> ! <script> var pdf = ‘d2474e86c95b19b8bcfdb92bc12c9d44667cfa36’ webtorrent(pdf, ‘#viewer’) </script>
35. <script src=“webtorrent.js”></script> ! <script> var movie = ‘d2474e86c95b19b8bcfdb92bc12c9d44667cfa36’ webtorrent(movie, function (err, stream) { if (!err) video.src = stream }) </script>
36. webtorrent.io
37. “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
39. getUserMedia()
40. 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
41. Signaling
42. getUserMedia()
43. getUserMedia() <stream>
44. new RTCPeerConnection(constraints, config) getUserMedia() <stream>
45. new RTCPeerConnection(constraints, config) pc getUserMedia() <stream>
46. new RTCPeerConnection(constraints, config) pc getUserMedia() addStream() <stream>
47. new RTCPeerConnection(constraints, config) pc getUserMedia() addStream() <stream> “negotiationneeded”
48. new RTCPeerConnection(constraints, config) pc createOffer() getUserMedia() addStream() <stream> “negotiationneeded”
49. new RTCPeerConnection(constraints, config) <offer> pc createOffer() getUserMedia() addStream() <stream> “negotiationneeded”
50. new RTCPeerConnection(constraints, config) <offer> pc createOffer() getUserMedia() addStream() <stream> “negotiationneeded” setLocalDescription()
51. new RTCPeerConnection(constraints, config) <offer> pc Server createOffer() getUserMedia() addStream() <stream> “negotiationneeded” setLocalDescription()
52. new RTCPeerConnection(constraints, config) <offer> <offer> pc Server createOffer() getUserMedia() addStream() <stream> “negotiationneeded” setLocalDescription()
53. new RTCPeerConnection(constraints, config) <offer> <offer> pc Server new RTCPeerConnection(…) createOffer() getUserMedia() addStream() <stream> “negotiationneeded” setLocalDescription()
54. new RTCPeerConnection(constraints, config) <offer> <offer> pc Server pc new RTCPeerConnection(…) createOffer() getUserMedia() addStream() <stream> “negotiationneeded” setLocalDescription()
55. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> pc Server pc new RTCPeerConnection(…) createOffer() getUserMedia() addStream() <stream> “negotiationneeded” setLocalDescription()
56. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> pc Server pc new RTCPeerConnection(…) createOffer() getUserMedia() addStream() <stream> getUserMedia() “negotiationneeded” setLocalDescription()
57. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> pc Server pc new RTCPeerConnection(…) createOffer() getUserMedia() addStream() <stream> getUserMedia() <stream> “negotiationneeded” setLocalDescription()
58. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc new RTCPeerConnection(…) createOffer() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
59. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc new RTCPeerConnection(…) createOffer() createAnswer() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
60. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc new RTCPeerConnection(…) createOffer() createAnswer() <answer> getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
61. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
62. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
63. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
64. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
65. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> pc Server pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
66. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> pc Server ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
67. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> pc Server <candidate> ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
68. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> pc Server <candidate> addIceCandidate() ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
69. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> <candidate> “icecandidate” pc Server <candidate> addIceCandidate() ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
70. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> <candidate> “icecandidate” pc Server <candidate> addIceCandidate() ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
71. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> <candidate> “icecandidate” pc Server <candidate> addIceCandidate() <candidate> ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
72. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> <candidate> “icecandidate” pc Server <candidate> addIceCandidate() <candidate> ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() addIceCandidate() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
73. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> <candidate> “icecandidate” pc Server <candidate> addIceCandidate() <candidate> ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() addIceCandidate() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded” “addstream”
74. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> <candidate> “icecandidate” pc Server <candidate> addIceCandidate() <candidate> ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() addIceCandidate() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded” “addstream”
75. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> <candidate> “icecandidate” pc Server <candidate> addIceCandidate() <candidate> ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() addIceCandidate() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded” “addstream” “addstream”
76. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> <candidate> “icecandidate” pc Server <candidate> addIceCandidate() <candidate> ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() addIceCandidate() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded” “addstream” “addstream”
77. pc pc createDataChannel() <channel>
78. pc pc createDataChannel() <channel> “datachannel” <channel>
79. pc pc createDataChannel() <channel> “datachannel” <channel> send() <secret message>
80. pc pc createDataChannel() <channel> “datachannel” <channel> send() <secret message> “message” <secret message>
81. (code)
82. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() “icecandidate” <candidate> <candidate> “icecandidate” pc Server <candidate> addIceCandidate() <candidate> ⋮ ⋮ pc new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> <answer> setRemoteDescription() addIceCandidate() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded” “addstream” “addstream”
83. new Peer({ initiator: true, stream: s })
84. new Peer({ initiator: true, stream: s })
85. new Peer({ initiator: true, stream: s }) Peer
86. “signal” new Peer({ initiator: true, stream: s }) <offer> Peer
87. “signal” new Peer({ initiator: true, stream: s }) <offer> Peer Server
88. “signal” new Peer({ initiator: true, stream: s }) <offer> Peer Server
89. “signal” new Peer({ initiator: true, stream: s }) <offer> <offer> Peer Server
90. “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> Peer Server
91. “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> Peer Server Peer
92. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> Peer Server Peer
93. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> Peer Server Peer
94. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> Peer Server Peer
95. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> Peer Server Peer
96. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() Peer Server Peer
97. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> Peer Server Peer
98. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> Peer Server ⋮ Peer
99. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> Peer Server <candidate> ⋮ Peer
100. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> Peer Server <candidate> signal() ⋮ Peer
101. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> <candidate> “signal” Peer Server <candidate> signal() ⋮ Peer
102. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> <candidate> “signal” Peer Server <candidate> signal() ⋮ ⋮ Peer
103. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> <candidate> “signal” Peer Server <candidate> signal() <candidate> ⋮ ⋮ Peer
104. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> <candidate> “signal” Peer Server <candidate> signal() <candidate> signal() ⋮ ⋮ Peer
105. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> <candidate> “signal” Peer Server <candidate> signal() <candidate> signal() “stream” ⋮ ⋮ Peer
106. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> <candidate> “signal” Peer Server <candidate> signal() <candidate> signal() “stream” “ready” ⋮ ⋮ Peer
107. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> <candidate> “signal” Peer Server <candidate> signal() <candidate> signal() “stream” “ready” “stream” ⋮ ⋮ Peer
108. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> <candidate> “signal” Peer Server <candidate> signal() <candidate> signal() “stream” “ready” “stream” ⋮ ⋮ Peer “ready”
109. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> <candidate> “signal” Peer Server <candidate> signal() <candidate> signal() “stream” “ready” “stream” ⋮ ⋮ send() <secret message> Peer “ready”
110. signal() “signal” new Peer({ initiator: true, stream: s }) new Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> <candidate> “signal” Peer Server <candidate> signal() <candidate> signal() “stream” “ready” “stream” ⋮ ⋮ send() “message” <secret message> <secret message> Peer “ready”
111. (code)
112. webtorrent.io:8080
113. github.com/feross/lxjs-chat
114. github.com/feross/simple-peer
115. go forth and hack!
116. webtorrent.io
117. feross aboukhadijeh webtorrent.io @feross happy hacking!