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

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

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/)

Feross Aboukhadijeh

April 25, 2014
Tweet

More Decks by Feross Aboukhadijeh

Other Decks in Programming

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