javascripthtmlbrowserifywebtorrent

How to use webtorrent in browser?


I have some trouble with the the example showed in https://github.com/feross/webtorrent#usage I'm trying to use the code in browser. So I first create a file called app.js

app.js

var WebTorrent = require('webtorrent')
var concat = require('concat-stream')

var client = new WebTorrent()
console.log('Hi there');
client.download('magnet:?xt=urn:btih:XXXXXXXX', function (torrent) {
  // Got torrent metadata!
  console.log('Torrent info hash:', torrent.infoHash)

  torrent.files.forEach(function (file) {
    // Get the file data as a Buffer (Uint8Array typed array)
    file.createReadStream().pipe(concat(function (buf) {

      // Append a link to download the file
      var a = document.createElement('a')
      a.download = file.name
      a.href = URL.createObjectURL(new Blob([ buf ]))
      a.textContent = 'download ' + file.name
      document.body.appendChild(a)
    }))
  })
})

Then I type command browserify app.js > bundle.js so that can make code work for browser. I create another file called index.html:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="bundle.js"></script>
</head>

<body id="home">

    <h1>test</h1>


</body>
</html>

From the console I can only see "Hi there". It seems that the client.download() function didn't work. Why this happened? I'm new to browserify, is there anything wrong with the command which I use?


Solution

  • WebTorrent can only download torrents that are explicitly seeded to the WebTorrent network. Torrent clients need to support WebRTC to peer with web browsers. Currently, no clients support it but you can use http://instant.io to start seeding a new torrent and try downloading it using the WebTorrent library in your application. Enable debug logs on http://instant.io by setting `localStorage.debug = '*' to get the info-hash of the torrent.

    You can also learn more here: