Basically, it allows a file to be shared using the BitTorrent protocol, which is P2P, in the browser. Awesome right?! So let’s get started
Things you’ll need:
- NPM (Comes with NodeJS)
- A file you want hosted in the Swarm CDN (Any type, some file types can be rendered or even streamed in the browser)
- CORS and HTTPS Highly Recomended
- Motivation and/or Madness!
- CDN… Even better right!?
Step 1 — Get a file
A webseed is peer that serves the pieces of the torrent through HTTP(S), allowing 24/7 seeded torrents. The pieces are requested with HTTP range requests. In the current WebTorrent implementation, each requests is up to the size of each piece.
Either way the original file is publicly available (HTTPS CORS Enabled) at the following address: https://webseed.btorrent.xyz/timedrift-alpine-4k-timelapse.mp4
You may notice that the βTorrent’s URL has a link to a .torrent file(https://btorrent.xyz/download#https:%2F%2Fwebseed.btorrent.xyz%2Ftimedrift.torrent), instead of the mp4 file. This is because the .torrent has the information about the pieces of the mp4 file and the URL of the HTTP-Accessible original file (The Webseed).
Step 2— Upload the original file
Upload the mp4 video to your website’s hosting/server and make sure it’s publicly available in a URL, if it’s on a different domain, make sure it’s CORS enabled. In the example we’ll use https://webseed.btorrent.xyz/timedrift-alpine-4k-timelapse.mp4 as the URL.
Step 3— Create the torrent file to your file
Okay, now we need to create a .torrent file which contains the metadata and the URL where the original file is hosted. To do this, we must first install one of WebTorrent Project’s Modules, create-torrent NPM Module:
npm i -g create-torrent
Once installed, we must create the .torrent. In the same folder as the original file we type the following command:
create-torrent --urlList 'https://webseed.btorrent.xyz/timedrift-alpine-4k-timelapse.mp4' timedrift-alpine-4k-timelapse.mp4 > timedrift.torrent
Basically, the generic command is:
create-torrent --urlList '<ORIGINAL FILE URL>' <ORIGINAL FILE NAME> > <TORRENT FILE NAME>.torrent
Step 4 — Upload the torrent file
Upload the torrent video to your website’s hosting/server and make sure it’s publicly available in a URL, if it’s on a different domain, make sure it’s CORS enabled. In the example we’ll use https://webseed.btorrent.xyz/timedrift.torrent as the URL.
Step 5 — Setup your viewer
We now just need a static HTML & JS to render and stream this file with WebTorrent! The simple following code will do:
Upload to your website’s hosting/server and you are done.
Step 6 — Enjoy, the more viewers the faster everything is!
How to do it with files
Although video is the best use case because of it size, you may want to host files and use the Swarm CDN on large files to just like Step 1. To do this, we must use WebTorrent’s API to create a clickable URL to the file that is available on memory once the download is complete.
In this example we’ll be downloading: https://webseed.btorrent.xyz/juanpabloaj/other-page.md through WebTorrent:
Show speed, % done, etc
Instant webseed for your files
With Peerify you can get an instant URL to a torrent and have your original file hosted.
Need any help?
Check WebTorrent’s Gitter channel and feel free to mention me @DiegoRBaquero
Update 1: July 20, 2016
HTTP 2 performance
By default, WebTorrent opens a maximum of 4 requests to a webseed simultaneously, each initial XHR on HTTP 1.1 would open each a TCP connection, and if the webseed has TLS/SSL the latency would increase for the maximum of 6 connections a browser has to a host that would be reused later for the rest of requests. Now, with the new HTTP2 protocol, a webseed can now use a single TCP connection over TLS improving the performance of a webseed. Improvement can be seen as: 83% saved in initial connections RTT latency and up to 50% faster completion of the XHR requests made to the webseed (Depends on available bandwidth).
So go ahead and activate HTTP 2 (DIRECTLY, CloudFlare wouldn’t fully work) in your hosts, not only to improve WebTorrent and webseeds but everything loaded from your servers!
A small demo using HTTP 2 can be seen here.
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!