Skip to main content

Basic Usage Examples

Downloading a Torrent

The simplest way to download a torrent in the browser:
import WebTorrent from 'webtorrent'

const client = new WebTorrent()
const magnetURI = 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10...'

client.add(magnetURI, torrent => {
  // Got torrent metadata!
  console.log('Client is downloading:', torrent.infoHash)

  for (const file of torrent.files) {
    document.body.append(file.name)
  }
})

Seeding Files

Create a new torrent and start seeding it:
import dragDrop from 'drag-drop'
import WebTorrent from 'webtorrent'

const client = new WebTorrent()

// When user drops files on the browser, create a new torrent and start seeding it!
dragDrop('body', files => {
  client.seed(files, torrent => {
    console.log('Client is seeding:', torrent.infoHash)
  })
})

Video Player Integration

WebTorrent can stream video directly to HTML5 video elements.

Service Worker Renderer

The modern approach using Service Workers for optimal performance:
import WebTorrent from 'https://esm.sh/webtorrent/dist/webtorrent.min.js'

const client = new WebTorrent()
const torrentId = 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10...'
const player = document.querySelector('video')

// Register service worker
const controller = await navigator.serviceWorker.register('./sw.min.js', { scope: './' })
await navigator.serviceWorker.ready
client.createServer({ controller })

client.add(torrentId, torrent => {
  // Find the video file
  const file = torrent.files.find(file => file.name.endsWith('.mp4'))
  
  // Log streams emitted by the video player
  file.on('stream', ({ stream, file, req }) => {
    if (req.destination === 'video') {
      console.log(`Video player requested data from ${file.name}!`)
    }
  })
  
  // Stream to video element
  file.streamTo(player)
  console.log('Ready to play!')
})

Video.js Integration

Integrate with the popular Video.js player:
<!DOCTYPE html>
<html>
  <head>
    <title>WebTorrent + Video.js</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video-js.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video.min.js"></script>
  </head>
  <body>
    <video id="video-container" class="video-js" data-setup="{}" controls="true"></video>
    
    <script type='module'>   
      import WebTorrent from 'https://esm.sh/webtorrent/dist/webtorrent.min.js'
      
      const client = new WebTorrent()
      const torrentId = 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10...'
      const player = document.querySelector('video')

      const controller = await navigator.serviceWorker.register('./sw.min.js', { scope: './' })
      await navigator.serviceWorker.ready
      client.createServer({ controller })

      client.add(torrentId, torrent => {
        const file = torrent.files.find(file => file.name.endsWith('.mp4'))
        file.streamTo(player)
        console.log('Ready to play!')
      })
    </script>
  </body>
</html>
Video.js wraps the <video> element in a <div>, so the actual video element ID becomes video-container_html5_api.

Real-World Applications

File Sharing Application

Simple peer-to-peer file sharing:
import WebTorrent from 'webtorrent'

const client = new WebTorrent()

// Upload handler
function handleFileUpload(files) {
  client.seed(files, torrent => {
    const magnetURI = torrent.magnetURI
    console.log('Share this magnet link:', magnetURI)
    
    // Display download progress
    torrent.on('upload', () => {
      console.log('Upload speed:', torrent.uploadSpeed)
      console.log('Uploaded:', torrent.uploaded)
    })
  })
}

// Download handler
function handleDownload(magnetURI) {
  client.add(magnetURI, torrent => {
    console.log('Downloading:', torrent.name)
    
    torrent.on('download', () => {
      console.log('Progress:', (torrent.progress * 100).toFixed(1) + '%')
      console.log('Download speed:', torrent.downloadSpeed)
    })
    
    torrent.on('done', () => {
      console.log('Download finished!')
      torrent.files.forEach(file => {
        file.getBlobURL((err, url) => {
          if (err) throw err
          // Create download link
          const a = document.createElement('a')
          a.href = url
          a.download = file.name
          a.click()
        })
      })
    })
  })
}

Streaming Media Player

A complete streaming media player with controls:
import WebTorrent from 'webtorrent'

class TorrentPlayer {
  constructor(videoElement) {
    this.client = new WebTorrent()
    this.video = videoElement
    this.currentTorrent = null
  }
  
  async play(magnetURI) {
    // Stop current torrent if playing
    if (this.currentTorrent) {
      this.currentTorrent.destroy()
    }
    
    // Setup service worker
    const controller = await navigator.serviceWorker.register('./sw.min.js', { scope: './' })
    await navigator.serviceWorker.ready
    this.client.createServer({ controller })
    
    this.currentTorrent = this.client.add(magnetURI, torrent => {
      // Find media file
      const file = torrent.files.find(f => {
        return f.name.endsWith('.mp4') || 
               f.name.endsWith('.webm') || 
               f.name.endsWith('.mkv')
      })
      
      if (!file) {
        throw new Error('No supported video file found')
      }
      
      // Stream to video element
      file.streamTo(this.video)
      
      // Setup event listeners
      torrent.on('download', () => {
        this.updateStats(torrent)
      })
      
      torrent.on('wire', (wire) => {
        console.log('Connected to peer:', wire.remoteAddress)
      })
    })
  }
  
  updateStats(torrent) {
    const stats = {
      progress: (torrent.progress * 100).toFixed(1) + '%',
      downloadSpeed: this.formatBytes(torrent.downloadSpeed) + '/s',
      uploadSpeed: this.formatBytes(torrent.uploadSpeed) + '/s',
      peers: torrent.numPeers,
      downloaded: this.formatBytes(torrent.downloaded),
      uploaded: this.formatBytes(torrent.uploaded)
    }
    
    console.log('Stats:', stats)
    return stats
  }
  
  formatBytes(bytes) {
    if (bytes === 0) return '0 B'
    const k = 1024
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }
  
  stop() {
    if (this.currentTorrent) {
      this.currentTorrent.destroy()
      this.currentTorrent = null
    }
  }
  
  destroy() {
    this.client.destroy()
  }
}

// Usage
const player = new TorrentPlayer(document.querySelector('video'))
player.play('magnet:?xt=urn:btih:...')

Node.js Examples

Command Line Downloader

import WebTorrent from 'webtorrent'
import fs from 'fs'
import path from 'path'

const client = new WebTorrent()
const magnetURI = process.argv[2]

if (!magnetURI) {
  console.error('Usage: node download.js <magnet-uri>')
  process.exit(1)
}

client.add(magnetURI, { path: './downloads' }, torrent => {
  console.log('Downloading:', torrent.name)
  
  torrent.on('download', () => {
    const progress = (torrent.progress * 100).toFixed(1)
    const speed = (torrent.downloadSpeed / 1024 / 1024).toFixed(2)
    process.stdout.write(`\rProgress: ${progress}% | Speed: ${speed} MB/s`)
  })
  
  torrent.on('done', () => {
    console.log('\n\nDownload complete!')
    console.log('Files saved to:', torrent.path)
    process.exit(0)
  })
  
  torrent.on('error', err => {
    console.error('\nError:', err.message)
    process.exit(1)
  })
})

client.on('error', err => {
  console.error('Client error:', err.message)
  process.exit(1)
})

HTTP Server for Streaming

import WebTorrent from 'webtorrent'
import http from 'http'

const client = new WebTorrent()
const port = 3000

// Create HTTP server
const server = http.createServer((req, res) => {
  if (req.url === '/') {
    res.writeHead(200, { 'Content-Type': 'text/html' })
    res.end(`
      <h1>WebTorrent HTTP Server</h1>
      <video controls width="720" src="/stream"></video>
    `)
    return
  }
  
  if (req.url === '/stream' && client.torrents[0]) {
    const torrent = client.torrents[0]
    const file = torrent.files[0]
    file.createReadStream().pipe(res)
  } else {
    res.writeHead(404)
    res.end('Not found')
  }
})

server.listen(port, () => {
  console.log(`Server listening on http://localhost:${port}`)
  
  // Add a torrent
  const magnetURI = 'magnet:?xt=urn:btih:...'
  client.add(magnetURI, torrent => {
    console.log('Torrent ready:', torrent.name)
  })
})

Production Applications Using WebTorrent

WebTorrent Desktop

Streaming torrent app for Mac, Windows, and Linux

Instant.io

Streaming file transfer over WebTorrent

File.pizza

Free peer-to-peer file transfers in your browser

BitChute

A decentralized video streaming social network

Performance Tips

WebTorrent automatically switches between sequential and rarest-first piece selection. For streaming, it prioritizes pieces needed for playback.
client.add(magnetURI, {
  strategy: 'sequential' // Force sequential for streaming
})
Control the maximum number of peer connections:
const client = new WebTorrent({
  maxConns: 100 // Default is 55
})
Limit upload and download speeds:
const client = new WebTorrent({
  downloadLimit: 1024 * 1024, // 1 MB/s
  uploadLimit: 512 * 1024     // 512 KB/s
})