在浏览器中实现 OBS 式的直播工作台：场景保存配置并快速切换，来源承载屏幕捕获 / 摄像头 / 文字 / 图片 / 视频等素材，混音器控制输出监听与各输入设备音量，支持 WebRTC（WHIP） 与 WebTransport 两种推流链路。
技术栈：React 19 + TypeScript + Vite + Tailwind CSS + shadcn/ui + Zustand（选型依据见 docs/04-技术选型文档.md）。
自上而下：UI 层（React 组件）→ 状态层（Zustand）→ Core 引擎层（不依赖 React 的合成 / 混音 / 推流 / 录制 / 持久化）→ 浏览器 Web API → 外部服务（WebTransport / WHIP）。
源文件为 docs/architecture.excalidraw，可在 Excalidraw 中导入继续编辑后重新导出。
pnpm install
pnpm dev # http://localhost:5173
pnpm build # 类型检查 + 产物构建
pnpm test # Vitest 单元测试（54 项）
pnpm test:e2e # Playwright E2E 主套件（假媒体流，默认不含录制）
pnpm test:e2e:record # 录制用例（单独运行：无头 MediaRecorder 编码有间歇卡死，故 opt-in）- 摄像头 / 屏幕捕获 / 麦克风要求 HTTPS 或 localhost 安全上下文；
- 本地 WHIP 联调推荐 MediaMTX：推流地址
http://127.0.0.1:8889/live/whip，播放地址http://127.0.0.1:8889/live/； - 未配置推流服务器时为模拟模式（状态机与统计演示）。
| 文档 | 内容 |
|---|---|
| 01-概要设计文档 | 目标与边界、总体架构、数据模型、关键流程、协议对比、里程碑 |
| 02-详细设计文档 | 领域模型（TS）、核心服务实现、双推流链路、UI / 性能 / 测试 |
| 03-交互原型 | 可直接打开的高保真交互原型（OBS 主界面布局） |
| 04-技术选型文档 | React + Vite + shadcn/ui 选型结论与备选对比 |
src/
├─ components/ # layout / preview / panels / dialogs / ui(shadcn)
├─ stores/ # zustand：scenes / ui / stream / settings / devices
├─ core/ # ★ 不依赖 React
│ ├─ engine/ # 合成引擎（渲染循环 / 命中测试 / 转场）
│ ├─ sources/ # 来源采集与句柄生命周期
│ ├─ audio/ # Web Audio 混音图
│ ├─ streaming/ # IStreamTransport：whip / webtransport
│ ├─ record/ # MediaRecorder 录制
│ └─ persistence/ # IndexedDB（场景 / 素材 / 设置）
├─ types/ # 领域模型
└─ hooks/ # 画布指针交互
- M0 交互原型 ✅（docs/03）
- M1 MVP ✅ —— 合成 + 混音 + 六类来源 + WHIP 推流 / 模拟推流 + 录制（FS 流式 / 下载双模式）+ IndexedDB 持久化 + 工作室模式
- M2 接近完成 ✅ WebTransport 媒体封装（WebCodecs + MoQ / RTP-over-QUIC + 自研拥塞）、来源 / 场景右键菜单、拖拽排序、Shift 等比缩放、滤镜一期（ctx.filter）、配置导入导出、渐变到黑转场、Wake Lock、性能面板；剩余：设备热插拔细节打磨
- M3：WebGL 渲染器、色度键 / LUT、多路推流、ESLint / Prettier 接入