Reference: Get Started with WebTorrent
Official Example: Instant.io Streaming file transfer over WebTorrent (torrents on the web)
<!doctype html> <html> <body> <h1>Download files using the WebTorrent protocol (BitTorrent over WebRTC).</h1> <form> <label for="torrentId">Download from a magnet link: </label> <input name="torrentId", placeholder="magnet:" value="magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent"> <button type="submit">Download</button> </form> <h2>Download Log</h2> <div class="downloadlog"></div> <h1>WebTorrent Seeding Example</h1> <input type="file" id="file-input"> <button id="seed-button">Seed File</button> <h2>Upload Log</h2> <div class="uploadlog"></div> <!-- Include the latest version of WebTorrent --> <script src="https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js"></script> <script> /* start download */ const client = new WebTorrent() client.on('error', function (err) { console.error('ERROR: ' + err.message) }) document.querySelector('form').addEventListener('submit', function (e) { e.preventDefault() // Prevent page refresh const torrentId = document.querySelector('form input[name=torrentId]').value log('Adding ' + torrentId, '.downloadlog') client.add(torrentId, onTorrent) }) function onTorrent (torrent) { log('Got torrent metadata!', '.downloadlog') log( 'Torrent info hash: ' + torrent.infoHash + ' ' + '<a href="' + torrent.magnetURI + '" target="_blank">[Magnet URI]</a> ' + '<a href="' + torrent.torrentFileBlobURL + '" target="_blank" download="' + torrent.name + '.torrent">[Download .torrent]</a>', '.downloadlog' ) // Print out progress every 5 seconds const interval = setInterval(function () { log('Progress: ' + (torrent.progress * 100).toFixed(1) + '%', '.downloadlog') }, 5000) torrent.on('done', function () { log('Progress: 100%', '.downloadlog') clearInterval(interval) }) // Render all files into to the page torrent.files.forEach(function (file) { file.appendTo('.downloadlog') log('(Blob URLs only work if the file is loaded from a server. "http//localhost" works. "file://" does not.)', '.downloadlog') file.getBlobURL(function (err, url) { if (err) return log(err.message) log('File done.', '.downloadlog') log('<a href="' + url + '">Download full file: ' + file.name + '</a>', '.downloadlog') }) }) } function log (str, selector) { const p = document.createElement('p') p.innerHTML = str document.querySelector(selector).appendChild(p) } /* end download */ /* start upload */ document.getElementById('seed-button').addEventListener('click', function() { var fileInput = document.getElementById('file-input'); var file = fileInput.files[0]; if (file) { //var client = new WebTorrent(); // Note it is already declared above client.seed(file, function(torrent) { var infoHash = torrent.infoHash; var magnetURI = torrent.magnetURI; log('File is being seeded with Info Hash: ' + infoHash, '.uploadlog'); log('Magnet URI: ' + magnetURI, '.uploadlog'); // Perform additional actions if needed //client.destroy(); // Clean up the WebTorrent client }); } }); /* end upload */ </script> </body> </html>