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

WebRTC Everywhere (Beyond the Browser) @ Data Terra Nemo 2015

WebRTC Everywhere (Beyond the Browser) @ Data Terra Nemo 2015

Talk by Feross Aboukhadijeh (that's me!) at Data Terra Nemo 2015 (http://dtn.is).

https://webtorrent.io
https://instant.io
http://feross.org

Feross Aboukhadijeh

May 23, 2015
Tweet

More Decks by Feross Aboukhadijeh

Other Decks in Technology

Transcript

  1. WebRTC Everywhere
    by Feross

    View full-size slide

  2. WebRTC
    Beyond the Browser

    View full-size slide

  3. WebTorrent
    4 BitTorrent in the browser
    4 True P2P implementation – not just a proxy
    4 No install – pure JavaScript with WebRTC
    4 Exposes files as node-style streams
    4 Stream into , , VLC, Chromecast,
    Airplay, etc.

    View full-size slide

  4. var WebTorrent = require('webtorrent')
    var client = new WebTorrent()
    client.add('magnet:...', function (torrent) {
    console.log('Got torrent metadata!', torrent.infoHash)
    torrent.files.forEach(function (file) {
    var video = document.createElement('video')
    document.body.appendChild(video)
    file.createReadStream().pipe(video)
    })
    })

    View full-size slide

  5. Astro
    Bob Ren
    Daniel Posch
    Feross Aboukhadijeh
    Iván Todorovich
    John Hiesey
    Joseph Dykstra
    Mathias Buus
    Travis Fischer
    many more...

    View full-size slide

  6. POWER TO THE PEOPLE

    View full-size slide

  7. True personal computing

    View full-size slide

  8. WebRTC is a backdoor
    4 Companies just want browser video chat
    4 But they're building P2P into the fabric of the web
    4 Let's use this opportunity!

    View full-size slide

  9. WebRTC Data Channel

    View full-size slide

  10. Data Channel Unintended Consequences
    4 Peer-assisted delivery (PeerCDN, Peer5, others)
    4 File transfer (WebTorrent, Sharefest)
    4 Website hosting over torrents
    4 Chat/email/encrypted real-time communications
    4 All future P2P protocols!

    View full-size slide

  11. WebRTC Whiteboard
    Demo

    View full-size slide

  12. WebRTC Whiteboard
    whiteboard.webtorrent.io

    View full-size slide

  13. WebRTC Whiteboard
    whiteboard.webtorrent.io
    github.com/feross/whiteboard

    View full-size slide

  14. Another unintended consequence...
    WebRTC beyond the
    browser

    View full-size slide

  15. This is WebRTC Everywhere
    4 WebRTC in web apps (desktop & mobile)
    4 WebRTC in desktop apps
    4 WebRTC in server apps
    4 WebRTC in mobile apps

    View full-size slide

  16. WebRTC is universal

    View full-size slide

  17. Only transport that works
    in the browser

    View full-size slide

  18. You get NAT traversal for free

    View full-size slide

  19. No cross-origin policy

    View full-size slide

  20. Mandatory transport
    encryption

    View full-size slide

  21. Data Channel API is easy!
    var channel = peer.createDataChannel()
    channel.send('hi')
    channel.addEventListener('message', function (event) {
    console.log('got message: ' + event.data)
    })

    View full-size slide

  22. Where does WebRTC work
    today?

    View full-size slide

  23. WebRTC support in Web Apps
    4 Google Chrome - supported
    4 Mozilla Firefox - supported
    4 Opera - supported
    4 Microsoft Edge (next IE) - planned
    4 Apple Safari - no comment

    View full-size slide

  24. WebRTC support in Desktop apps
    4 Electron (atom-shell) - easiest choice!
    4 NW.js (node-webkit) - also super easy!
    4 Google's webrtc.org - compile it into your app
    4 Ericsson's OpenWebRTC - compile it into your app

    View full-size slide

  25. WebRTC support in Server apps
    4 wrtc package on npm (native dep on webrtc.org)
    4 Google's webrtc.org - compile it into your app
    4 Ericsson's OpenWebRTC - compile it into your app

    View full-size slide

  26. WebRTC support in Mobile apps
    4 iOS - Google's webrtc.org - compile it into your app
    4 Android - Use Chromium WebView
    4 Or, better: Just use Chrome/Firefox on Android!

    View full-size slide

  27. Electron is awesome!

    View full-size slide

  28. Same code in both places
    Demo

    View full-size slide

  29. friends
    github.com/moose-team/friends

    View full-size slide

  30. You can run it headless!
    github.com/maxogden/electron-spawn

    View full-size slide

  31. There are challenges, and
    even some deal breakers

    View full-size slide

  32. WebRTC deal breakers

    View full-size slide

  33. No "Data Channel only" build
    4 All implementations include media component cruft
    4 Data channel build: code.google.com/p/webrtc/
    issues/detail?id=3892

    View full-size slide

  34. Not as lightweight as UDP
    4 Even after optimization, it won't ever be

    View full-size slide

  35. No IE/Safari support yet
    4 Consider using Temasys plugin
    4 Microsoft Edge support coming soon

    View full-size slide

  36. WebRTC challenges

    View full-size slide

  37. Offer/answer connection model
    4 IP/UDP/TCP is like calling a phone number
    4 WebRTC is like getting set up on a date

    View full-size slide

  38. Single points of failure
    remain!

    View full-size slide

  39. In browser, you need a domain name
    4 Possible solution: Make it work offline!
    4 hyperboot.org
    4 Service Workers

    View full-size slide

  40. Finding peers
    4 Easiest way is through a central tracker / introducer
    4 signalhub (used by Friends)
    4 bittorrent-tracker (used by WebTorrent)
    4 We need a general purpose WebRTC DHT!
    4 webrtc-explorer by David Dias

    View full-size slide

  41. STUN
    4 External service that aids in NAT traversal
    4 Lots of services just use Google's public STUN server
    4 You can run your own very cheaply
    4 Possible privacy leak, but unlikely

    View full-size slide

  42. Privacy leak
    4 Any webpage can query your local IPs
    4 Chrome disables local candidates on proxy/VPN
    4 Tor Browser Bundle disables WebRTC

    View full-size slide

  43. Streaming is a challenge
    4 No readable backpressure
    4 Writable backpressure is hacky
    4 bufferedAmount
    4 setInteval

    View full-size slide

  44. Despite challenges, we
    should rally around
    WebRTC

    View full-size slide

  45. We need more P2P apps

    View full-size slide

  46. We need more P2P primitives

    View full-size slide

  47. LET'S MAKE THE MAN
    A BIT HUMBLER

    View full-size slide

  48. "The sharing economy is
    mainly owned by the 1%"
    @jowyang

    View full-size slide

  49. apps that use simple-peer
    4 Friends - P2P chat
    4 ScreenCat - Screen sharing
    4 WebTorrent - browser torrent client
    4 Whiteboard - draw together
    4 Lots of experiments: webrtc-explorer, peernet,
    rtcat, webcat ...

    View full-size slide

  50. bittorrent-dht

    View full-size slide

  51. Learn more about WebRTC
    "html5rocks webrtc basics"
    webrtchacks.com
    "simple-peer" on npm

    View full-size slide

  52. Learn more about
    WebTorrent
    webtorrent.io
    instant.io

    View full-size slide