Dweb: Building a Resilient Web with WebTorrent

In this series we are covering projects that explore what is possible when the web becomes decentralized or distributed. These projects aren’t affiliated with Mozilla, and some of them rewrite the rules of how we think about a web browser. What they have in common: These projects are open source, and open for participation, and share Mozilla’s mission to keep the web open and accessible for all.

The web is healthy when the financial cost of self-expression isn’t a barrier. In this installment of the Dweb series we’ll learn about WebTorrent – an implementation of the BitTorrent protocol that runs in web browsers. This approach to serving files means that websites can scale with as many users as are simultaneously viewing the website – removing the cost of running centralized servers at data centers. The post is written by Feross Aboukhadijeh, the creator of WebTorrent, co-founder of PeerCDN and a prolific NPM module author… 225 modules at last count! –Dietrich Ayala

What is WebTorrent?

WebTorrent is the first torrent client that works in the browser. It’s written completely in JavaScript – the language of the web – and uses WebRTC for true peer-to-peer transport. No browser plugin, extension, or installation is required.

Using open web standards, WebTorrent connects website users together to form a distributed, decentralized browser-to-browser network for efficient file transfer. The more people use a WebTorrent-powered website, the faster and more resilient it becomes.

Screenshot of the WebTorrent player interface

Architecture

The WebTorrent protocol works just like BitTorrent protocol, except it uses WebRTC instead of TCP or uTP as the transport protocol.

In order to support WebRTC’s connection model, we made a few changes to the tracker protocol. Therefore, a browser-based WebTorrent client or “web peer” can only connect to other clients that support WebTorrent/WebRTC.

Once peers are connected, the wire protocol used to communicate is exactly the same as in normal BitTorrent. This should make it easy for existing popular torrent clients like Transmission, and uTorrent to add support for WebTorrent. Vuze already has support for WebTorrent!

Diagram showing the decentralized P2P network of torrents

Getting Started

It only takes a few lines of code to download a torrent in the browser!

To start using WebTorrent, simply include the webtorrent.min.js script on your page. You can download the script from the WebTorrent website or link to the CDN copy.

<script src="webtorrent.min.js"></script>

This provides a WebTorrent function on the window object. There is also an
npm package available.

var client = new WebTorrent()

// Sintel, a free, Creative Commons movie
var torrentId = 'magnet:...' // Real torrent ids are much longer.

var torrent = client.add(torrentId)

torrent.on('ready', () => {
// Torrents can contain many files. Let's use the .mp4 file
var file = torrent.files.find(file => file.name.endsWith('.mp4'))

// Display the file by adding it to the DOM.
// Supports video, audio, image files, and more!
file.appendTo('body')
})

That’s it! Now you’ll see the torrent streaming into a <video width="300" height="150"> tag in the webpage!

Learn more

You can learn more at webtorrent.io, or by asking a question in #webtorrent on Freenode IRC or on Gitter. We’re looking for more people who can answer questions and help people with issues on the GitHub issue tracker. If you’re a friendly, helpful person and want an excuse to dig deeper into the torrent protocol or WebRTC, then this is your chance!

 

 

About Feross Aboukhadijeh

Feross writes popular open source software including WebTorrent, StandardJS, and hundreds of Node.js packages (collectively 200+ million downloads per month). He recently released a fun site called BitMidi that curates MIDI files for your listening pleasure! His open source work is supported by generous donors on Patreon.

More articles by Feross Aboukhadijeh…


14 comments

  1. Valentin C.

    I may not be familiar enough with P2P protocols, but what guarantees the integrity of data received from a peer?

    August 15th, 2018 at 23:36

    1. Feross Aboukhadijeh

      The data that a peer receives is hashed and compared to a known good hash value. If a malicious peer were to changed even a single bit of the data, then the hash would not match and the data would be discarded.

      You can learn more about torrents in my talk from JSConf Asia in 2014: https://www.youtube.com/watch?v=kxHRATfvnlw

      August 15th, 2018 at 23:49

  2. Valentin C.

    By the way, as an example to those technologies, you can mention PeerTube (https://joinpeertube.org/en/) which aims to be a decentralized, FOSS, Youtube.

    August 16th, 2018 at 05:02

    1. Feross Aboukhadijeh

      Yep! PeerTube is one of the most impressive uses of WebTorrent and it has a lot of potential.

      There’s also a whole list of users of WebTorrent on this page: https://webtorrent.io/faq

      August 16th, 2018 at 11:01

  3. Richie Sikra

    I think this has a lot of potential and it looks like it might be fun to play around with.
    Thank you for your hard work

    August 16th, 2018 at 09:31

  4. Richie Sikra

    Just saw the video with brave on webtorrent’s website and it downloaded the 129mb like it was nothing.. I’m impressed

    August 16th, 2018 at 09:44

    1. Feross Aboukhadijeh

      Thank you!

      August 16th, 2018 at 11:07

  5. Tailor Vijay

    Super interesting.

    How long does the client cache content and serve it to other clients?
    Is there a setting for the amount of bandwidth a client is willing to provide?
    Does it affect the QOS a client could expect?

    August 16th, 2018 at 12:00

    1. Feross Aboukhadijeh

      The client serves content for as long as the browser tab remains open. Once the browser tab is closed, the webpage is unloaded by the browser and JavaScript cannot continue to run.

      > Is there a setting for the amount of bandwidth a client is willing to provide? Does it affect the QOS a client could expect?

      Not yet, though there’s an open issue to add bandwidth rate limiting. I would expect QoS is unaffected since upload bandwidth is used and that’s not usually the bottleneck for end users.

      August 16th, 2018 at 13:00

  6. Danyl Strype

    What’s the best place for Torrent client devs to look for information about how to follow the example of Vuze, and support WebTorrent swarms?

    August 29th, 2018 at 10:50

    1. Feross Aboukhadijeh

      The best way at the moment is to just look at the source code to see what we’re doing. Work on a spec is ongoing. There’s also discussion about using WebSockets instead of WebRTC, as a simpler, more pragmantic approach that’s easier for clients to implement. Read more here: https://github.com/webtorrent/webtorrent/issues/1492

      August 29th, 2018 at 12:31

  7. gr

    hi, can you add or show link of example to add/store new files to webtorrent with this js script ?

    September 1st, 2018 at 03:31

    1. Feross Aboukhadijeh

      Creating a new torrent and seed it (in the browser)

      var dragDrop = require('drag-drop') var WebTorrent = require('webtorrent') var client = new WebTorrent() // When user drops files on the browser, create a new torrent and start seeding it! dragDrop('body', function (files) { client.seed(files, function (torrent) { console.log('Client is seeding ' + torrent.magnetURI) }) })

      This example uses the drag-drop package, to make the HTML5 Drag and Drop API easier to work with.

      September 1st, 2018 at 15:27

  8. Abby Nion

    Nice post, and I really support the DWeb.

    September 11th, 2018 at 11:16

Comments are closed for this article.