WebTorrent: Bringing BitTorrent to the Web (with WebRTC and Mad Science)

Feross Aboukhadijeh talking at CraftConf in Budapest, Hungary on April 25, 2013.

About the talk
--------------------

WebRTC changes everything! For the first time, we can do peer-to-peer, or client-to-client, communication in the browser without plugins, extensions, or a software installation. This enables an entirely new class of applications to be built for the web! This talk will look at WebTorrent, a BitTorrent client for the browser that fully-interoperates with the regular BitTorrent network. WebTorrent uses WebRTC Data Channels and special "hybrid clients" to connect to the wider BitTorrent network. By making BitTorrent easier, we're making it accessible to new swathes of users who were previously intimidated, confused, or unwilling to install a program on their computer to participate.

About Feross
-------------------

Feross Aboukhadijeh is a programmer, designer, teacher, and mad scientist. He is currently building WebTorrent, a streaming BitTorrent client for the browser, powered by WebRTC. Before that, he built PeerCDN, a peer-to-peer content delivery network that dramatically reduces bandwidth costs. Feross is a graduate of Stanford University and has worked at Quora, Facebook, and Intel. In the past, he did research in the Stanford human-computer interaction and computer security labs. Feross enjoys working on "mad science" -- projects that make people say, "Whoa! I didn't know that was possible!". Feross frequently wins hackathons by crafting code that gives the kids with spectacles spectacular fits, like his recent virtual reality piloting hack that lets you control a quadcopter with an Oculus Rift.

Links
--------

Feross Aboukhadijeh (http://feross.org)
CraftConf (http://craft-conf.com/2014/)

Transcript

1. WebTorrent
   Bringing BitTorrent to the Web
   

   View Slide

2. View Slide

3. Topics
   •How does WebTorrent work?
   •How to craft awesome software using:
   1. npm
   2. Browserify
   3. WebRTC
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. Virus Scan Results
    •MacOS:GoPhoto-A [Adw]
    •Trojan.Crossrider.9294
    •RTF:Malware.OddRTF/Heur!1.9E6F
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. http://mg8.org/processing/bt.html
    

    View Slide

19. View Slide

20. Improve Bittorrent UX
    •Streaming video playback
    •Works in the browser
    •Easy to share links
    •No installation required
    •Elegant search experience
    

    View Slide

21. bittorrent
    bittorrent
    bittorrent
    bittorrent
    

    View Slide

22. uTorrent
    Transmission
    Azureus
    etc.
    

    View Slide

23. bittorrent
    bittorrent
    bittorrent
    bittorrent
    

    View Slide

24. bittorrent
    bittorrent
    bittorrent
    bittorrent
    bittorrent
    

    View Slide

25. bittorrent
    bittorrent
    bittorrent
    bittorrent
    webtorrent
    webtorrent
    bittorrent
    

    View Slide

26. bittorrent
    bittorrent
    bittorrent
    bittorrent
    webtorrent
    webtorrent
    bittorrent
    

    View Slide

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

    View Slide

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

    View Slide

29. bittorrent webtorrent.js
    NOT POSSIBLE
    

    View Slide

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

    View Slide

31. webtorrent v1 (chrome app)
    

    View Slide

32. webtorrent v2
    

    View Slide

33. The plan
    1. Build awesome JavaScript bittorrent client for OS X, Windows, Linux
    2. Make node.js code run in the browser!
    3. Use WebRTC to create peer-to-peer connections.
    

    View Slide

34. 1
    npm
    

    View Slide

35. webtorrent.app!
    (os x, windows, linux)
    webtorrent.js!
    (browser js library)
    webtorrent-chrome!
    (chrome app)
    

    View Slide

36. webtorrent.app!
    (os x, windows, linux)
    webtorrent.js!
    (browser js library)
    webtorrent-chrome!
    (chrome app)
    

    View Slide

37. bittorrent-client!
    (stream from bittorrent)
    webtorrent!
    (http range server, cmd line)
    webtorrent-client!
    (stream from webtorrent)
    webtorrent.app!
    (os x, windows, linux)
    webtorrent.js!
    (browser js library)
    webtorrent-chrome!
    (chrome app)
    bittorrent-dht
    bittorrent-protocol
    bittorrent-tracker bittorrent-swarm ut_metadata
    magnet-uri
    parse-torrent
    extension
    

    View Slide

38. the way™
    

    View Slide

39. Do one thing well.
    

    View Slide

40. Compose larger units out of
    smaller, independent units
    of functionality.
    

    View Slide

41. "When applications are done well, they are just
    the really application-specific, brackish residue
    that can't be so easily abstracted away.
    !
    All the nice, reusable components sublimate
    away onto github and npm where everybody can
    collaborate to advance the commons.”
    !
    — substack
    

    View Slide

42. airport amplitude-viewer ansi-keycode ap archy array-map array-reduce astw asynth attr-bind attr-chooser attr-ev attr-range attr-scope attr-submit attractor autorev
    bashful battleship-search baudio baudio-party ben bigint binary bouncy brake brfs browser-badge browser-launcher browser-pack browser-resolve browser-terminal
    browser-unix browser-unpack browserify buffer-equal bufferlist buffers bulk-require bulkify bunker burrito c-tokenizer camelize caps-lock catch-links catw cert-
    unbundle chainsaw char-size charm chdir chi-squared choose chunky cicada cipherhub cities1000 clocker code-art code-music-studio codebux coffeeify comandante
    commondir concat-map confuse console-stream continued-fraction cookie-cutter coords core-http-benchmark coverify covert crytter css-prefix cursory cypher-feed de-
    bruijn deck decode-prompt deep-equal deep-freeze defined deps-sort deputy destroyer detective difflet disorder dnode dnode-protocol dnode-stack dotc duplex-pipe
    earl-grey editor editor-timeline emit-stream endian-toggle energy-relay ent ever exportify extents exterminate factor-bundle falafel faucet figc fileify findit fleet
    foreign-key fort freestyle frequency-viewer fritter funstance gamma garbage gcd git-emit git-file git-history git-http-backend github-avatar github-from-package
    github-push-receive glog graph-stream grave gray-code gtest gutter hacker-deps hash-join hashish hat heatmap http-alt http-browserify http-duplex http-noupgrade
    http-raw https-browserify https-detect hugh-detector humbug hyperglue hyperkey hyperquest hyperspace hyperstream identifier insert-css insert-module-globals
    internet-timestamp intestine intreq invoicer is-triangle isaacs jadeify join-stream jquery-mousewheel json-literal-parse json-scrape json-stable-stringify jsonify
    jsonparse jsup key-range keysym keyx level-assoc level-join level-party level-proxy level-query level-track lexical-scope lexicographic-integer liver logdir lump marak
    markdown-directory markov marx meteor mine minimist mkdirp mmmify module-deps mountie mrcolor multilevel-feed multimeter n-pair normalize-browser-names
    npm-package-search npm-package-sync npmdep npmtop nub number-grouper number-script object-inspect oppressor optimist ordered-emitter parcel-detector parcel-
    finder parcel-map parcel-processor parcelify parents parse-color parsley password-reset path-browserify pathway permafrost persona-id picture-tube pier pipestop
    pkginit placename ploy plucky point-grouper point-in-polygon polygon-hash pony prehost pricing-widget progressify prompter propagit provinces pushover put pw py
    quack-array quote-stream quotemeta rap-battle recon relaychum render-assoc replicant resolve response-stream resumer resware rfb rhyme rolling-hash rolling-reduce
    rref rsa-json rsa-stream rsa-unpack running-mean safe-regex schoolbus scoper scrux seaport secure-peer seq seqsolve sesame shadow-npm shallow-copy shell-quote
    shimify shoe shortcode shp2json shux sigsolve sillyscope single-page slice-file slideways slidey-termy smtp-protocol sockjs-windows song sorta sorted source split-by
    split-css ssh stackedy stagecoach static-eval static-module still-alive straggler stream-adventure stream-browserify string_decoder subarg subdeps subdir surrender
    svg-morph svg-pencil svg-select switch-stream swoop syntax-error tabby tap-finished tap-parser tape terminal-menu testling testling-jasmine testling-server text-
    table throughout tilemap time-window-stream toss tracer-bullet transfuse traverse travisify trumpet tty-browserify tuner tuple-stream typedarray undead
    undirender upnode uppercase.c utf8-bytes utf8-length utf8-stream vectorwave vm-browserify voicebox-karaoke voxel-chunks voxel-creature voxel-debris voxel-
    forest voxel-json voxel-player voxel-portal voxel-spider waiting-around waitlist watchify webworkify whatever wit wordwrap wreq x256 xhr-write-stream xit xrandr-
    parse yarnify zygote
    !
    — substack
    

    View Slide

43. add-deps adiff all amd another-progress-bar ansi-highlight ansi-recover assertions async-chain async-iterator asynct autonode badass bash-vars battery bed between
    bikeshed binomial-hash-list blake2s bracket-matcher browser-stream bundle-metadata bv canvas-browserify canvas-progress-bar carpenter center client-reloader
    config-chain connect-restreamer console-log content-addressable-store continuable-para continuable-series convoy-stream couch-stream couch-sync couchfeed
    couchlegs count-tabs cradle-init crdt create-systemd-service crypto-browserify cryptomx ctrlflow ctrlflow_tests curry cyphernet d-utils d64 dart-stream dat-table
    default-pager delay-stream demonstrate deploy deterministic-tar dom-vector duplex duplexer easyfs el-streamo element-splice eohbjcobpchokp event-stream event-
    tree f-core feedopensource from fs-reverse fsm gen get-deps git-deploy github-url goatdb graphlib-adjacency graphlib-git h hash-change hdiff header-stream himark
    hipster how-big hud hyperscript idle indexes-of indexhtmlify insert-queue invert-stream it-is iterate jrep js-tokenizer json-buffer json-logdb json-rest json-select
    json-sst JSON.sh JSONStream keep kiddb kv lamport level-binomial-replication level-content-addressable-store level-content-cache level-couch-sync level-fix-range
    level-hooks level-index level-inverted-index level-live-stream level-manifest level-map level-map-merge level-map-tile level-map-tiles level-master level-merkle level-
    peek level-post level-queue level-reduce level-replicate level-repred level-scuttlebutt level-search level-static level-sublevel level-test level-trigger level-update level-
    update-stream level-view-stream level-window line-graph lm localstorage-scuttlebutt lock looper ls-modules ls-r lu macgyver map-reduce map-stream map-tile-url
    markdown-sections math-buffer matrix merkle-stream message-stream meta-test mkdir-and-mv-stream modal-widget modem-stream mokuai-map monotonic-
    timestamp mpg123 msgpack-stream mux-demux mw-pipes my-local-ip nih-op ninja-tools nodejitsu-client nonsense npm-atomic-publish npm-github-resolve-url npm-
    remapper npm-search npmd npmd-bin npmd-cache npmd-config npmd-git-resolve npmd-install npmd-leaves npmd-link npmd-pack npmd-rebuild npmd-resolve npmd-
    tree npmd-unpack ntk observable padded-semver parentchild parse-regexp parse-table pause-stream peers per-second poset probe-stream proxy-by-url proxy80 ps-
    tree pull-2step-replicate pull-cat pull-core pull-crypto pull-csv pull-flow pull-fs pull-glob pull-handshake pull-level pull-markable pull-merge pull-merkle pull-pair pull-
    paramap pull-pushable pull-server pull-sorted-merge pull-split pull-stream pull-stream-merge pull-stream-range pull-stream-to-stream pull-stringify pull-switch
    pull-tee pull-through pull-traverse pull-utf8-decoder pull-window pull-zip query-stream quickansi r-array r-edit r-value random-name range-bucket rc readme rec2
    reconnect reconnect-widget reconnector redis-protocol-stream redis-raw regular-stream relational-join-stream remap remember remote-events render repl-stream
    replace-stream replicated-reduce repred retro rpc-stream rpc-with-streams rumours runloop scuttlebucket scuttlebutt scuttlebutt-remote scuttlebutt-schema search-
    context securify seneca-level-store seneca-pay seneca-rumours-store seneca-stripe-pay sha.js sha1sum sha256d shadow-npm shasum signed-http skates smoothie
    smoothie-stream snob sort-stream sortable split spork ssh ssh-key-to-pem stability statistics stream-combiner stream-serializer stream-spec stream-tester stream-
    to-pull-stream string-range strm style synct tab-stream tacodb test-cmd test-helper test-report test-report-view testbed through tiles timestamp tiny-route tmpdir
    to-base traverser tree-query trees tslide typewiselite ubelt udid unordered-map-stream useragent-wtf vec2-animate vec2-dom vec2-easing vec2-layout vec2-tile-
    layer vec2-touch vec2-view vector-touch voice vu watch-stream wikiwiki wildfile x11 xcp xdiff xml-the-good-parts xmodel youtube-player
    !
    — dominictarr
    

    View Slide

44. beepbeep bittorrent-client bittorrent-dht bittorrent-protocol
    bittorrent-swarm bittorrent-tracker buffer call-log chrome-
    dgram chrome-http chrome-net chrome-portfinder
    connectivity cyberhobo drag-drop futils hostile ieee754
    jquery-placeholder magnet-uri nagger native-buffer-
    browserify parse-torrent purge-netdna run-auto run-parallel
    run-series rusha-browserify simple-build spoof
    string2compact studynotes timers-ref typedarray-to-buffer
    ut_metadata webtorrent zelda zero-fill
    !
    — feross
    

    View Slide

45. moduletopia!
    

    View Slide

46. ~70,000 modules
    

    View Slide

47. gzip
    wc -c
    uglifyjs -m -c
    cat script.js
    

    View Slide

48. gzip wc -c
    uglifyjs -m -c
    cat script.js | | |
    

    View Slide

49. gzip wc -c
    uglifyjs -m -c
    cat script.js | | |
    

    View Slide

50. the npm way
    •have a good module system
    •pull code out into modules early, often
    •modules should do one thing, do it well
    •easy to test (npm test)
    •Badges, docs
    

    View Slide

51. http://www.yasiv.com/npm#view/webtorrent
    

    View Slide

52. bittorrent-client!
    (stream from bittorrent)
    webtorrent!
    (http range server, cmd line)
    webtorrent-client!
    (stream from webtorrent)
    webtorrent.app!
    (os x, windows, linux)
    webtorrent.js!
    (browser js library)
    webtorrent-chrome!
    (chrome app)
    bittorrent-dht
    bittorrent-protocol
    bittorrent-tracker bittorrent-swarm ut_metadata
    magnet-uri
    parse-torrent
    extension
    

    View Slide

53. streams
    

    View Slide

54. bittorrent-protocol
    

    View Slide

55. bittorrent-protocol
    in out
    

    View Slide

56. bittorrent-protocol
    in out
    onei1e4:woahd3:arr d3:bla4:blup3:foo3:bar3
    

    View Slide

57. bittorrent-protocol
    “handshake”
    in out
    d3:bla4:blup3:foo3:bar3:onei1e4:woa
    :blup3:foo3:bar3:onei1e4:woahd3:arr
    

    View Slide

58. bittorrent-protocol
    “handshake” “request”
    in out
    d3:bla4:blup3:foo3:bar3:onei1e4:woa
    :blup3:foo3:bar3:onei1e4:woahd3:arr
    

    View Slide

59. bittorrent-protocol
    “handshake” “request”
    in out
    d3:bla4:blup3:foo3:bar3:onei1e4:woa
    :blup3:foo3:bar3:onei1e4:woahd3:arr
    handshake()
    

    View Slide

60. bittorrent-protocol
    “handshake” “request”
    in out
    d3:bla4:blup3:foo3:bar3:onei1e4:woa
    :blup3:foo3:bar3:onei1e4:woahd3:arr
    handshake() data()
    

    View Slide

61. tcp socket
    bittorrent-protocol
    in out
    in out
    

    View Slide

62. bittorrent-protocol
    in out
    tcp socket in
    out
    

    View Slide

63. bittorrent-protocol
    in out
    webrtc in
    out
    

    View Slide

64. bittorrent-protocol
    in out
    ANYTHING! in
    out
    

    View Slide

65. var Protocol = require(‘bittorrent-protocol’)
    var net = require('net')
    !
    !
    !
    !
    !
    !
    !
    !
    !
    

    View Slide

66. var Protocol = require(‘bittorrent-protocol’)
    var net = require('net')
    !
    net.createServer(function (socket) {
    !
    !
    !
    !
    !
    !
    !
    })
    

    View Slide

67. var Protocol = require(‘bittorrent-protocol’)
    var net = require('net')
    !
    net.createServer(function (socket) {
    var wire = new Protocol()
    !
    !
    !
    !
    !
    !
    })
    

    View Slide

68. var Protocol = require(‘bittorrent-protocol’)
    var net = require('net')
    !
    net.createServer(function (socket) {
    var wire = new Protocol()
    !
    socket.pipe(wire).pipe(socket)
    !
    !
    !
    !
    })
    

    View Slide

69. var Protocol = require(‘bittorrent-protocol’)
    var net = require('net')
    !
    net.createServer(function (socket) {
    var wire = new Protocol()
    !
    socket.pipe(wire).pipe(socket)
    !
    wire.on(‘handshake’, function (infoHash, peerId) {
    })
    })
    

    View Slide

70. var Protocol = require(‘bittorrent-protocol’)
    var net = require('net')
    !
    net.createServer(function (socket) {
    var wire = new Protocol()
    !
    socket.pipe(wire).pipe(socket)
    !
    wire.on(‘handshake’, function (infoHash, peerId) {
    wire.handshake(infoHash, myPeerId)
    })
    })
    

    View Slide

71. 2
    Browserify
    

    View Slide

72. // foo.js
    !
    module.exports = function (num) {
    return num + 2
    }
    !
    !
    !
    !
    !
    

    View Slide

73. // foo.js
    !
    module.exports = function (num) {
    return num + 2
    }
    !
    // bar.js
    !
    module.exports = function (num) {
    return num * 10
    }
    

    View Slide

74. // main.js
    !
    var foo = require(‘./foo’)
    var bar = require(‘./bar’)
    !
    console.log(foo(bar(4)))
    

    View Slide

75. // main.js
    !
    var foo = require(‘./foo’)
    var bar = require(‘./bar’)
    !
    console.log(foo(bar(4)))
    // 42
    

    View Slide

76. browserify main.js > bundle.js
    

    View Slide

77. 
    

    View Slide

78. require(‘buffer’)
    require(‘stream’)
    

    View Slide

79. require(‘net’)
    require(‘dgram’)
    

    View Slide

80. // package.json
    !
    {
    browser: {
    “net”: “chrome-net”
    “dgram”: “chrome-dgram”
    }
    }
    

    View Slide

81. require(‘net’)
    require(‘dgram’)
    

    View Slide

82. require(‘chrome-net’)
    require(‘chrome-dgram’)
    

    View Slide

83. Browserify lets you require('modules') in the
    browser by bundling up all of your dependencies.
    

    View Slide

84. 3
    WebRTC
    

    View Slide

85. 
    !
    !
    !
    !
    

    View Slide

86. 
    !
    <br/>var pdf = ‘d2474e86c95b19b8bcfdb92bc12c9d44667cfa36’<br/>webtorrent(pdf, ‘#viewer’)<br/>
    

    View Slide

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

    View Slide

88. WebSocket
    WebSocket
    Server
    Browser Browser
    

    View Slide

89. WebRTC
    Browser Browser
    

    View Slide

90. Is peer-to-peer possible in the browser?
    •What about security?
    •What about the same origin policy?
    •What about asking the user for permission?
    •ISN’T THIS CRAZY?
    

    View Slide

91. WebRTC
    •Protocol and API to establish P2P connections
    •W3C/IETF web standard
    •Special support for video & audio
    •But, can send arbitrary data too
    •Simple JavaScript API
    

    View Slide

92. This is huge!
    

    View Slide

93. View Slide

94. http://talky.io
    

    View Slide

95. INSTALL
    

    View Slide

96. View Slide

97. View Slide

98. 1,000,000,000
    WebRTC devices
    

    View Slide

99. View Slide

100. WebRTC
     video data
     

     View Slide

101. Data Channel
     •Send arbitrary data between browsers
     •Text and binary data
     •Reliable or unreliable transport
     •Encryption out-of-the-box
     •Simple WebSocket-like API
     

     View Slide

102. var pc = new RTCPeerConnection({ iceServers: [] })
     pc.createOffer(function (offer) {
     pc.setLocalDescription(offer, function () {
     // send offer to peer
     }, function (err) {
     // could not set local description
     })
     , function (err) {
     // could not create offer
     })
     

     View Slide

103. // peer 1
     var channel = pc.createDataChannel('reliable', {})
     !
     channel.send(‘hi’)
     !
     // peer 2
     channel.onmessage = function (e) {
     console.log(e.data) // ‘hi’
     }
     

     View Slide

104. // peer 1
     var channel = pc.createDataChannel('unreliable', {
     ordered: false,
     maxRetransmits: 0
     })
     !
     channel.send(‘hi’)
     !
     // peer 2
     channel.onmessage = function (e) {
     console.log(e.data) // ‘hi’
     }
     

     View Slide

105. What can you do with Data Channel?
     •Games (especially first-person shooters)
     •CDNs (Content Delivery Networks)
     •File sharing
     •Replicated/distributed DBs, DHTs, etc.
     •Dark Web, Tor, Freenet …FREEDOM TECHNOLOGY???
     •MAD SCIENCE!
     

     View Slide

106. View Slide

107. Why is UDP useful?
     •Fire and forget
     •Realtime apps (games, stock quotes, etc.)
     •Live video streaming
     •Use UDP to create your own protocol!
     

     View Slide

108. npm install wrtc
     

     View Slide

109. View Slide

110. View Slide

111. View Slide

112. View Slide

113. quick tangent
     

     View Slide

114. How do you access the browser cache?
     •You can’t. No programmatic access.
     •Alternatives:
     •Filesystem API
     •IndexedDB
     •LocalStorage
     !
     (10% of free space for temp., prompt for perm., Chrome only)
     (50 MB, prompt for more)
     (5-10 MB maximum)
     

     View Slide

115. Local Storage
     “User agents should limit the total amount of space allowed for
     storage areas.
     User agents should guard against sites storing data under the
     origins other affiliated sites, e.g. storing up to the limit in
     a1.example.com, a2.example.com, a3.example.com, etc,
     circumventing the main example.com storage limit.”
     

     View Slide

116. Local Storage
     •Chrome, IE, and Safari ignore recommendation
     •Every subdomain gets its own 5-10 MB quota
     •Subdomains are free
     •Thus, unlimited disk space with no prompt!
     

     View Slide

117. View Slide

118. filldisk.com
     

     View Slide

119. View Slide

120. Back to WebRTC
     

     View Slide

121. 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
     

     View Slide

122. Signaling
     

     View Slide

123. LAN LAN
     WebSocket
     WebSocket
     Signaling server
     

     View Slide

124. LAN LAN
     WebSocket
     WebSocket
     Signaling server
     

     View Slide

125. LAN LAN
     WebSocket
     WebSocket
     Signaling server
     new RTCPeerConnection()
     

     View Slide

126. LAN LAN
     WebSocket
     WebSocket
     Offer

     SDP
     Signaling server
     

     View Slide

127. LAN LAN
     WebSocket
     WebSocket
     Offer

     SDP
     Signaling server
     

     View Slide

128. LAN LAN
     WebSocket
     WebSocket
     Offer

     SDP
     Signaling server
     

     View Slide

129. LAN LAN
     WebSocket
     WebSocket
     Offer

     SDP
     Signaling server
     

     View Slide

130. LAN LAN
     WebSocket
     WebSocket
     Offer

     SDP
     Signaling server
     

     View Slide

131. LAN LAN
     WebSocket
     WebSocket
     Answer

     SDP
     Signaling server
     

     View Slide

132. LAN LAN
     WebSocket
     WebSocket
     Answer

     SDP
     Signaling server
     

     View Slide

133. LAN LAN
     WebSocket
     WebSocket
     Answer

     SDP
     Signaling server
     

     View Slide

134. LAN LAN
     WebSocket
     WebSocket
     Answer

     SDP
     Signaling server
     

     View Slide

135. LAN LAN
     WebSocket
     WebSocket
     Answer

     SDP
     Signaling server
     

     View Slide

136. View Slide

137. NAT
     (Network Address Translation)
     

     View Slide

138. LAN LAN
     ?
     The NAT problem
     Router Router
     User User
     

     View Slide

139. The NAT problem
     192.168.1.100
     192.168.1.101
     44.44.44.44
     

     View Slide

140. STUN
     (Session Traversal Utilities for NAT)
     

     View Slide

141. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

142. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

143. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

144. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

145. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

146. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

147. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

148. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip? What’s my ip?
     Signaling server
     

     View Slide

149. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

150. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip? What’s my ip?
     Signaling server
     

     View Slide

151. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

152. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

153. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

154. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

155. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

156. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

157. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

158. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

159. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

160. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

161. STUN server
     LAN LAN
     WebSocket
     WebSocket
     Ice
     Candidate
     Ice
     Candidate
     What’s my ip?
     What’s my ip?
     Signaling server
     

     View Slide

162. Peer-to-peer engaged!
     

     View Slide

163. wrapping up
     

     View Slide

164. 1. npm
     2. browserify
     3. WebRTC
     

     View Slide

165. SimpleWebRTC (super easy, for video)

     PeerJS (super easy, for data)
     

     View Slide

166. webtorrent.io
     

     View Slide

167. feross aboukhadijeh
     webtorrent.io
     @feross
     happy hacking!
     

     View Slide