用 React + Node.js 做一个本地共享影院：同步观影、文字聊天、语音通话和语音条

效果图

一、为什么要做这个项目

平时和朋友异地一起看剧，经常会遇到一个很现实的问题：直接共享屏幕会把整个桌面都暴露出去，房主切到其他页面、回复消息、打开文件时，隐私就很尴尬；而且共享屏幕的视频清晰度、声音延迟和同步体验也不稳定。

所以我做了一个本地演示版的“共享影院”：

• 不共享房主屏幕，只共享房间里的播放状态；
• 视频源来自百度网盘或手动视频地址；
• 房主退出页面后，房间状态仍然保存在服务端；
• 房间内任意成员都可以播放、暂停、拖动进度和切换影片；
• 支持文字聊天；
• 支持实时语音通话；
• 支持像聊天软件一样发送语音条；
• 提供百度网盘 Mock 模式，没有真实百度开放平台凭据也能完整演示。

最终本地演示效果如下：

二、项目完成度

这里说的 100%，指的是“本地演示版”的完整闭环，不是公网商业化版本。

模块	本地演示状态
房间创建和加入	已完成
房间链接分享	已完成
局域网访问链接展示	已完成
服务端播放状态同步	已完成
房主退出后状态保留	已完成
多成员播放、暂停、拖动、倍速、切片	已完成
文字聊天	已完成
实时语音通话信令	已完成
语音条聊天	已完成
百度网盘真实接口封装	已完成基础封装
百度网盘 Mock 演示	已完成
本地数据持久化	已完成
一键本地演示命令	已完成
自动化验证脚本	已完成
CSDN 文章截图脚本	已完成

正式上线还需要继续补公网部署、HTTPS、TURN 服务、账号体系、权限控制和更安全的 token 存储。

三、源码仓库

https://gitee.com/wu-xubin/shared_-cinema.git

四、技术栈

模块	技术
前端	React + TypeScript + Vite
UI 图标	lucide-react
后端	Node.js + Express
房间同步	WebSocket
语音通话	WebRTC 信令
语音条	MediaRecorder + WebSocket 广播
视频来源	百度网盘接口 / 手动视频 URL / Mock 视频
数据存储	本地 JSON 文件
验证	自定义 Node.js 验证脚本 + npm audit

五、如何本地运行

拉取代码：

git clone https://gitee.com/wu-xubin/shared_-cinema.git
cd shared_-cinema

安装依赖：

npm install

如果只是想看完整本地演示，直接运行：

npm run demo

这个命令会自动开启：

• 前端页面；
• 后端接口；
• 百度网盘 Mock 模式。

默认访问地址：

http://127.0.0.1:5175

开发模式可以使用：

npm run dev

局域网手机访问可以使用：

npm run dev:lan

六、核心设计

这个项目没有采用“屏幕共享”的方案，而是采用“共享播放状态”的方案。

服务端保存房间状态：

{
  "roomId": "living-room",
  "video": {
    "id": "baidu:2001",
    "name": "Mock Trailer.mp4",
    "streamUrl": "https://example.com/video.mp4",
    "source": "baidu"
  },
  "status": "playing",
  "position": 18.5,
  "playbackRate": 1,
  "startedAt": 1785808000000
}

真正播放进度不是一直靠客户端上报，而是根据服务端保存的 position、startedAt 和 playbackRate 动态计算：

currentPosition = position + (Date.now() - startedAt) / 1000 * playbackRate;

这样房主退出播放页面以后，房间不会因为房主离开而暂停。后加入的人只要进入同一个房间，就能拿到服务端当前状态并继续同步播放。

七、百度网盘 Mock 演示

本地没有百度开放平台凭据时，可以开启 Mock 模式：

BAIDU_MOCK=1

Mock 模式会返回固定的演示文件：

• Mock Movies 文件夹；
• Mock Trailer.mp4 视频；
• Mock Feature.mp4 视频。

页面读取到的百度网盘文件如下：

选择视频后，房间内成员会收到 change-video 消息，服务端更新房间状态并广播给所有成员：

八、房间同步能力

房间同步主要通过 WebSocket 完成。每个用户进入房间时，会携带：

roomId
userId
name

服务端根据 roomId 维护成员列表和播放状态。任何成员都可以发起这些控制：

• 切换视频；
• 播放；
• 暂停；
• 拖动进度；
• 修改倍速；
• 发送文字消息；
• 发送语音条；
• 加入或退出语音通话。

文字聊天效果：

九、语音能力

项目里把语音分成了两类，不混在一起：

类型	用途
实时语音通话	像直播间连麦，适合边看边聊
语音条聊天	像微信语音消息，录一段发到聊天区

语音通话目前采用 WebRTC P2P 信令，适合本地和少量成员演示。多人正式房间建议后续接入 LiveKit、mediasoup 或 Janus。

语音条聊天效果：

十、项目结构

Shared_Cinema
├─ server
│  ├─ index.ts
│  ├─ rooms.ts
│  ├─ baidu.ts
│  └─ store.ts
├─ src
│  ├─ App.tsx
│  ├─ main.tsx
│  └─ styles.css
├─ scripts
│  ├─ start-demo.mjs
│  ├─ verify.mjs
│  ├─ verify-server.mjs
│  ├─ verify-persistence.mjs
│  ├─ verify-baidu-mock.mjs
│  └─ capture-csdn-screenshots.mjs
├─ docs
│  ├─ VERIFICATION.md
│  └─ csdn
│     ├─ shared-cinema-csdn-article.md
│     └─ assets
└─ package.json

十一、自动化验证

项目提供了一条完整验证命令：

npm run verify:all

它会依次执行：

• TypeScript 编译；
• Vite 生产构建；
• 临时启动后端并验证 REST / WebSocket；
• 验证房间状态持久化；
• 验证百度网盘 Mock 流程；
• 执行 npm audit 安全检查。

本地验证结果：

PASS REST health
PASS REST network links
PASS Baidu unauthenticated status and files error
PASS Room chat, video control, late join sync
PASS Room playing progress advances for late join
PASS Voice signaling peers, relay, leave
PASS Voice message chat broadcast
PASS Invalid WebSocket message reports error
PASS Malformed WebSocket payloads report errors
PASS persistence restart restores room state
PASS Baidu mock provider and room selection
found 0 vulnerabilities

十二、注意事项

百度网盘方式比腾讯视频这类平台更适合这个项目。腾讯视频等商业影视平台通常会有 DRM、版权、登录态、跨域和播放限制，不能直接拿来做二次共享播放器。

当前方案的边界也要讲清楚：

• 本地 Mock 视频只用于演示；
• 真实百度网盘视频需要配置百度开放平台应用；
• 公网多人使用必须部署 HTTPS；
• 复杂网络下 WebRTC 语音需要 TURN；
• 真实上线应把本地 JSON 存储替换为数据库；
• 用户 token 需要加密保存；
• 公开分享视频时必须注意版权合规。

十三、总结

这个项目的核心不是录屏，而是把“影院房间”抽象成一份服务端状态：大家各自在自己的浏览器播放同一个视频地址，再用 WebSocket 同步当前影片、播放状态、进度和聊天消息。

本地演示版已经形成完整闭环：一键启动、Mock 百度网盘、同步观影、文字聊天、语音通话、语音条、持久化和自动化验证都已经补齐。后续如果要做成真正可公网使用的产品，重点会放在云服务器部署、HTTPS、TURN/SFU、账号权限和安全存储上。