Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Peer-to-peer Web

Peer-to-peer Web

B498d33041627b07726dc29c28f02df7?s=128

Feross Aboukhadijeh

June 28, 2014
Tweet

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

  11. None
  12. None
  13. None
  14. None
  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)

  19. None
  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
  38. None
  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!