★ FEATURED ARTICLE WebTorrent 上手指南10 行代码在浏览器里边下边播 BT 视频【免费下载链接】webtorrent⚡️ Streaming torrent client for the web项目地址: https://gitcode.com/gh_mirrors/we/webtorrentWebTorrent 是一个同时运行在浏览器和 Node.js 的流式 BTBitTorrent客户端同一个 npm 包既能在网页里通过 WebRTC 对等传输、下载的同时直接播放视频也能在 Node 环境里用 TCP/UDP 下载和做种帮你解决必须等下载完才能播放和浏览器装不了传统 BT 插件这两个老问题。它替你解决了什么麻烦先想一个熟悉场景传统客户端下载一部 2GB 的电影进度条走到 100% 之前你什么都干不了而在网页里用 BT这句话本身听起来就不可能——浏览器不开放原生 TCP/UDP传统 BitTorrent 协议根本跑不进去。WebTorrent 的做法是浏览器端走 WebRTC 数据通道不需要任何插件、扩展或安装纯 JavaScript 就能建立点对点连接Node.js 端则照常用 TCP/UDP 和传统 BT 网络通信。同一份代码、同一个 npm 包两个运行时通用。文件以 stream 形式暴露。数据块按需从网络拉取所以你边下边播、边下边拖进度条不需要等完整文件落地。下载即做种。客户端每下载一个 torrent就会自动把它分享给其他节点你的流量同时服务于下载和上传。它覆盖了主流 BT 扩展协议magnet、DHT、tracker、LSD、PEX、WebSeed、uTP 等具体清单见 docs/bep_support.md。分场景装好 WebTorrent网页、Node、命令行网页端装 npm 包或用预构建产物用 bundlerbrowserify/webpack的项目直接装包即可npm install webtorrentimport WebTorrent from webtorrent不想自己打包的话可以直接引入预构建的webtorrent.min.js以 ES module 方式挂到页面上webpack 用户如果打包遇到 polyfill 问题可以参考仓库自带的配置 scripts/browser.webpack.js。Node.js确认版本再装包当前版本要求Node.js 22见 package.json 的engines装法和浏览器端完全一样npm install webtorrent一个关键区别Node 端默认连的是传统 TCP/UDP 网络如果你还想同时连接浏览器里的 web peer需要配合支持 WebRTC 的webtorrent-hybrid它是 webtorrent 的扩展包装同样从 npm 安装。命令行装 webtorrent-cli只想下载或推流不想写代码可以全局安装命令行工具npm install webtorrent-cli -g之后一行命令就能下载 magnet 链接甚至直接推流到 AirPlay、Chromecast、VLC、MPV 等播放器webtorrent magnet_uri webtorrent magnet_uri --airplay另外还有官方桌面客户端 WebTorrent DesktopMac/Windows/Linux界面和传统 BT 客户端类似并且能把文件做种给浏览器端的 web peer。写最短可运行示例5 行代码从 magnet 到播放下面是最短的浏览器端边下边播版本逐句看import WebTorrent from webtorrent const client new WebTorrent() // 1. 创建客户端 const magnetURI magnet:?xturn:btih:... client.add(magnetURI, torrent { // 2. 拿到元数据后触发 const file torrent.files.find(f f.name.endsWith(.mp4)) file.streamTo(document.querySelector(video)) // 3. 流进 video })new WebTorrent()创建客户端默认开启 DHT、tracker 等发现机制。client.add()传入 magnet 链接也支持 .torrent 文件、infohash、http 链接等回调在元数据就绪后触发。从torrent.files里挑出视频文件file.streamTo()把它接进video元素——立刻可以播放、可以拖动进度条文件尚未下完也没关系。两点注意streamTo依赖client.createServer()提供的 HTTP 服务在浏览器里这个服务必须由Service Worker承接请求所以需要先注册sw.min.js并把 controller 传给createServer({ controller })。一个 70 行以内、可直接保存为 .html 跑的完整页面在 docs/get-started.md 里就有。Node 端更短核心就是指定保存目录import WebTorrent from webtorrent const client new WebTorrent() client.add(magnet:..., { path: /path/to/folder }, torrent { torrent.on(done, () console.log(下载完成)) })把 WebTorrent 接进你自己的项目接入 HTML5video或 Video.js原生video直接file.streamTo(videoElement)支持所有浏览器原生解码的容器webm、mp4、mkv、mov、ogv 等。Video.js它会把video包进一层div所以要把流接到包装后的节点上即video#${id}_html5_api。哪些容器/编码在各浏览器能播docs/api.md里有一张完整的支持矩阵表不确定时先查它。更多播放器集成片段见 docs/tutorials.md。把 torrent 暴露成 HTTP 文件服务器client.createServer()会起一个支持 Range 请求的 HTTP 服务访问/webtorrent/列出全部 torrent/webtorrent/infoHash访问单个 torrenttorrent.files[0].streamURL直接拿到可播放/可下载的 URL。这是最轻量的P2P CDN玩法——浏览器或任意 HTTP 客户端都能消费。命令行直连外部播放器不想写代码、只想让媒体文件流到电视或本地播放器webtorrent-cli自带一组开关--airplayApple TV、--chromecast、--mpv、--vlc、--mplayer、--stdout输出到标准输出传一个 flag 即可。让用户拖文件进来做种浏览器里做种同样简单配合drag-drop包监听拖拽拿到文件后client.seed(files, ...)回调里就能打印torrent.magnetURI分发给别人。docs/get-started.md 里有完整示例。从 Demo 到生产上线前必须知道的 5 组配置先确认浏览器支持WebTorrent.WEBRTC_SUPPORT为true才说明当前浏览器能走 P2P不支持时应给用户降级提示。客户端级选项new WebTorrent(opts)maxConns控制单 torrent 最大连接数默认 55dht/tracker/lsd/utPex可各自关闭或传自定义配置downloadLimit/uploadLimit做全局限速字节/秒blocklist传 IP 列表做黑名单secure控制 RC4 加密程度。完整字段见 docs/api.md。单 torrent 选项client.add(torrentId, opts)path指定 Node 端保存目录strategy在sequential与rarest间切换选块策略paused先挂起再手动恢复announce补充 trackerurlList添加 WebSeed。按需下载多文件 torrent 只想要某几个文件时对文件调file.select(priority)/file.deselect()或对字节区间用torrent.select(start, end)、torrent.critical(start, end)提高优先级——流媒体场景就是靠它只优先拉播放器要的那段。打开调试日志Node 端DEBUG* node your-app.js浏览器端在控制台执行localStorage.setItem(debug, *)删除该 key 即关闭。出问题先查这 6 处现象大概率原因处理办法浏览器里 0 peers、速度为 0torrent 没有被 WebRTC 客户端做种。浏览器无法连接纯 TCP/UDP 的传统 peer用 WebTorrent Desktop、webtorrent-hybrid 等 WebRTC 客户端把文件做种给 web 端视频无法播放浏览器不支持该容器/编码或缺少MediaSource能力优先用.mp4/.m4v/.m4a支持最完整含拖动进度条查docs/api.md的支持矩阵streamTo没反应未调用client.createServer({ controller })或 Service Worker 没注册成功注册sw.min.js并传入 controller页面需通过 http(s) 服务访问file://下 Blob URL 也不可用Node 端装包报错Node 版本低于 22升级 NodeuTP 走可选原生依赖utp-native装不上会自动降级纯 JS 实现想只下部分文件但全在下载没有做文件级选择用file.select/deselect或torrent.select设置优先级行为异常但看不出原因日志没开Node 用DEBUG*浏览器用localStorage.setItem(debug, *)更多高频问答WebRTC 原理、隐私与 IP、能否直播等见 docs/faq.md。迈出第一步3 条命令跑起来现在就可以动手先克隆仓库并安装依赖git clone https://gitcode.com/gh_mirrors/we/webtorrent cd webtorrent npm install装好后按这个顺序探索挑一个 docs/free-torrents.md 里的公共领域测试 torrentSintel、Big Buck Bunny 等把上面的最小示例跑通通读 docs/get-started.md 里的完整 HTML 页面示例改成你自己的 UI需要完整 API 时查 docs/api.md播放器集成细节看 docs/tutorials.md想读实现入口是 index.js核心逻辑在 lib/lib/torrent.js下载与选块、lib/file.js文件流、lib/server.jsHTTP 服务、lib/worker.jsService Worker 侧。先让 Sintel 在你自己的video标签里转起来你就已经跨进了浏览器 P2P 的世界。【免费下载链接】webtorrent⚡️ Streaming torrent client for the web项目地址: https://gitcode.com/gh_mirrors/we/webtorrent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
