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

Peer-to-peer Web

Peer-to-peer Web

Feross Aboukhadijeh

June 28, 2014
Tweet

More Decks by Feross Aboukhadijeh

Other Decks in Technology

Transcript

  1. 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?
  2. 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
  3. “A project to bring realtime communication (RTC) to the open

    web platform” ! - Justin Uberti @ Google I/O 2012
  4. “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
  5. WebTorrent •BitTorrent in the browser (over WebRTC) •Existing BitTorrent clients

    •Streaming video playback •Easy to share links •No installation required
  6. 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
  7. • 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)
  8. “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
  9. 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
  10. new RTCPeerConnection(constraints, config) <offer> <offer> pc Server new RTCPeerConnection(…) createOffer()

    getUserMedia() addStream() <stream> “negotiationneeded” setLocalDescription()
  11. new RTCPeerConnection(constraints, config) <offer> <offer> pc Server pc new RTCPeerConnection(…)

    createOffer() getUserMedia() addStream() <stream> “negotiationneeded” setLocalDescription()
  12. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> pc Server pc new

    RTCPeerConnection(…) createOffer() getUserMedia() addStream() <stream> “negotiationneeded” setLocalDescription()
  13. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> pc Server pc new

    RTCPeerConnection(…) createOffer() getUserMedia() addStream() <stream> getUserMedia() “negotiationneeded” setLocalDescription()
  14. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> pc Server pc new

    RTCPeerConnection(…) createOffer() getUserMedia() addStream() <stream> getUserMedia() <stream> “negotiationneeded” setLocalDescription()
  15. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc

    new RTCPeerConnection(…) createOffer() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
  16. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc

    new RTCPeerConnection(…) createOffer() createAnswer() getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
  17. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc

    new RTCPeerConnection(…) createOffer() createAnswer() <answer> getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
  18. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc

    new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
  19. setRemoteDescription() new RTCPeerConnection(constraints, config) <offer> <offer> setLocalDescription() pc Server pc

    new RTCPeerConnection(…) createOffer() setLocalDescription() createAnswer() <answer> getUserMedia() addStream() <stream> getUserMedia() addStream() <stream> “negotiationneeded”
  20. 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”
  21. 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”
  22. 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”
  23. 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”
  24. 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”
  25. 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”
  26. 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”
  27. 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”
  28. 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”
  29. 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”
  30. 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”
  31. 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”
  32. 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”
  33. 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”
  34. 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”
  35. “signal” new Peer({ initiator: true, stream: s }) new Peer({

    stream: s }) <offer> <offer> Peer Server
  36. “signal” new Peer({ initiator: true, stream: s }) new Peer({

    stream: s }) <offer> <offer> Peer Server Peer
  37. signal() “signal” new Peer({ initiator: true, stream: s }) new

    Peer({ stream: s }) <offer> <offer> Peer Server Peer
  38. signal() “signal” new Peer({ initiator: true, stream: s }) new

    Peer({ stream: s }) <offer> <offer> “signal” <answer> Peer Server Peer
  39. signal() “signal” new Peer({ initiator: true, stream: s }) new

    Peer({ stream: s }) <offer> <offer> “signal” <answer> Peer Server Peer
  40. signal() “signal” new Peer({ initiator: true, stream: s }) new

    Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> Peer Server Peer
  41. signal() “signal” new Peer({ initiator: true, stream: s }) new

    Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() Peer Server Peer
  42. signal() “signal” new Peer({ initiator: true, stream: s }) new

    Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> Peer Server Peer
  43. signal() “signal” new Peer({ initiator: true, stream: s }) new

    Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> Peer Server ⋮ Peer
  44. signal() “signal” new Peer({ initiator: true, stream: s }) new

    Peer({ stream: s }) <offer> <offer> “signal” <answer> <answer> signal() “signal” <candidate> Peer Server <candidate> ⋮ Peer
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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
  51. 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
  52. 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
  53. 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”
  54. 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”
  55. 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”