WebRTC Screen Mirror

一个基于 WebRTC、WebSocket 和 Cloudflare Durable Objects 的屏幕共享工具。当前版本支持局域网内一对多观看：一台电脑共享屏幕，3-5 台手机或电脑输入同一个投屏码即可观看。

功能

• 基于 WebRTC 点对点传输屏幕画面
• 基于 WebSocket 做信令交换
• 支持局域网访问，手机可以访问电脑启动的前端服务
• 支持小规模一对多观看
• 开发环境下只需要对外暴露前端端口 5173
• Worker 信令服务可本地运行，也可部署到 Cloudflare Workers

环境要求

• Node.js
• Corepack
• pnpm

如果没有全局安装 pnpm，可以直接使用：

corepack pnpm -v

安装依赖

项目分为前端和 Worker 两部分，需要分别安装依赖。

cd G:\WebRTC-Screen-Mirror
corepack pnpm install

cd G:\WebRTC-Screen-Mirror\worker
corepack pnpm install

本地局域网运行

先启动 Worker 信令服务：

cd G:\WebRTC-Screen-Mirror\worker
corepack pnpm dev

再打开另一个终端启动前端：

cd G:\WebRTC-Screen-Mirror
corepack pnpm dev

默认端口：

前端: http://0.0.0.0:5173
信令: http://0.0.0.0:8787

在电脑上访问：

http://localhost:5173

在手机上访问电脑的局域网 IP，例如：

http://192.168.0.105:5173

实际 IP 以启动日志里的 Network 地址为准，或者用下面命令查看：

Get-NetIPAddress -AddressFamily IPv4

使用方法

一台电脑共享，多个设备观看

1. 共享电脑打开 http://localhost:5173
2. 点击“开始共享屏幕”
3. 浏览器弹出授权窗口后，选择要共享的屏幕、窗口或标签页
4. 共享电脑页面顶部会显示 6 位“我的投屏码”
5. 手机或其他电脑打开 http://电脑局域网IP:5173
6. 每个观看设备都输入同一个 6 位投屏码
7. 点击“加入观看”

这样多台设备会分别和共享电脑建立 WebRTC 连接。

停止共享

共享电脑点击“停止共享”，所有观看端会断开。

观看端也可以点击“停止观看”，只断开自己的连接。

手机打不开时检查

确认手机和电脑在同一个 Wi-Fi 下，不要使用访客 Wi-Fi 或手机流量。

确认访问的是电脑的局域网 IP，不是：

127.0.0.1
localhost
172.16.*
172.17.*

如果 Windows 防火墙拦截了端口，用管理员 PowerShell 执行：

netsh advfirewall firewall add rule name="WebRTC Screen Mirror Frontend 5173" dir=in action=allow protocol=TCP localport=5173 profile=private

当前开发模式下，手机只需要访问 5173 端口。前端会把 /connect WebSocket 代理到本机 Worker 的 8787 端口。

一对多说明

当前一对多实现适合局域网内 3-5 个观看者。

实现方式是共享电脑为每个观看者创建一条独立的 WebRTC 连接，并把同一个屏幕流添加到每条连接里。因此观看人数越多，共享电脑的上传压力越大。

如果需要几十人或公网稳定观看，建议改为 SFU/媒体服务器方案，例如 LiveKit、mediasoup、Janus、Pion 或 Cloudflare Calls。

本次主要改动

• 将原本的一对一连接改为小规模一对多连接
• 投屏码改为“房间码”：共享端显示投屏码，多个观看端输入同一个码加入
• WebRTC 服务从单个 RTCPeerConnection 改为按观看者维护多个连接
• 增加 viewer_join、viewer_left、host_stopped 等信令流程
• 开发模式前端默认监听 0.0.0.0:5173
• Worker 开发服务默认监听 0.0.0.0:8787
• Vite 增加 /connect WebSocket 代理，手机无需直接访问 8787
• 修复首次生成投屏码后 WebSocket 使用旧 id 的问题
• 根目录 TypeScript 检查排除 worker/，避免前端 tsconfig 误编 Worker 代码
• 增加 pnpm 构建脚本允许配置，避免 esbuild、workerd 安装后被 pnpm 阻止

常用命令

前端类型检查：

cd G:\WebRTC-Screen-Mirror
corepack pnpm typecheck

前端生产构建：

cd G:\WebRTC-Screen-Mirror
corepack pnpm build

Worker 类型检查：

cd G:\WebRTC-Screen-Mirror\worker
corepack pnpm exec tsc --noEmit

技术栈

• React
• React Router
• Chakra UI
• Zustand
• WebRTC
• WebSocket
• Cloudflare Workers
• Cloudflare Durable Objects
• TypeScript

部署说明

生产环境前端默认连接：

wss://signaling.pexni.com/connect

如果部署自己的 Worker，需要在构建前端时设置：

$env:VITE_SIGNALING_URL="wss://你的信令服务域名/connect"
corepack pnpm build

部署 Worker：

cd G:\WebRTC-Screen-Mirror\worker
corepack pnpm deploy