Development Roadmap / 开发路线图

Project Positioning / 项目定位: A production-ready WebRTC learning platform built with Go, covering everything from basic peer-to-peer calls to advanced multi-party Mesh architecture.

基于 Go 的生产级 WebRTC 学习平台，从基础点对点通话到高级多人 Mesh 架构，覆盖 WebRTC 核心能力的完整实现。

This roadmap documents the development plan, milestones, and progress tracking, designed with a progressive learning path.

本路线图记录项目的开发计划、里程碑和进度追踪，采用渐进式学习路径设计。

📊 Project Overview / 项目概览

Basic Info / 基本信息

项目	内容
名称	WebRTC
类型	学习导向的生产级 Demo
技术栈	Go 1.22+ / Vanilla JavaScript / WebRTC APIs
许可	MIT

核心目标

✅ 理解 WebRTC 点对点通话的完整流程（信令、ICE、媒体流）
✅ 掌握常见 WebRTC 能力（静音、屏幕共享、DataChannel、多人通话）
✅ 学习生产级安全实践（身份绑定、连接限制、完美协商）
⚠️ 不涉及复杂运维（高可用、监控、鉴权体系）

当前状态

模块	状态	完成度
WebSocket 信令服务	✅ 生产可用	100%
浏览器前端 Demo	✅ 生产可用	100%
多人 Mesh 通话	✅ 生产可用	100%
Docker 部署	✅ 生产可用	100%

🗺️ 开发阶段总览

项目采用渐进式学习路径，分为四个主要阶段：

阶段 1: 基础体验优化
    ↓
阶段 2: WebRTC 能力扩展
    ↓
阶段 3: 多人通话进阶
    ↓
阶段 4: 部署与网络扩展

阶段	名称	状态	核心目标
阶段 1	打磨一对一 Demo 体验	✅ 已完成	提升稳定性、可读性、错误处理
阶段 2	WebRTC 能力扩展	✅ 已完成	媒体控制、屏幕共享、DataChannel、录制
阶段 3	多人通话进阶	✅ 已完成	房间管理、Mesh 多人通话
阶段 4	部署与网络扩展	✅ 已完成	TURN、HTTPS、Docker

📝 阶段 1：打磨一对一 Demo 体验

目标：在不增加复杂度的前提下，让一对一 Demo 更稳定、更易懂、更好用。

1.1 后端优化（Go 信令服务）

日志与调试

结构化日志输出
- WebSocket 升级失败时，记录请求路径和错误详情
- JSON 消息解析失败时，包含房间/客户端上下文
- JSON 写入失败时，记录完整错误堆栈
- 实现位置：internal/signal/hub.go

连接管理

稳健的连接清理
- 读/写错误时立即调用 removeClient
- 房间成员为空时自动删除房间
- 防止”僵尸连接”残留
- 实现位置：internal/signal/hub.go
心跳保活机制
- 前端定时发送 type: "ping" 消息
- 后端响应 type: "pong" 或忽略
- 目的：学习保活概念，不做复杂超时逻辑

1.2 前端优化（web/app.js + web/index.html）

状态管理

连接与通话状态展示
- 状态文本区域显示：未连接 → 已加入房间 → 通话中 → 已挂断
- 关键动作时自动更新状态
- 实现位置：web/app.js
按钮状态管理
- 根据状态动态禁用/启用按钮
- 状态机：未加入 → 已加入 → 通话中 → 已挂断
- 实现位置：web/app.js

错误处理

用户友好的错误提示
- getUserMedia 失败时显示权限提示
- WebSocket 断开时显示重连提示
- 实现位置：web/app.js

🎯 阶段 2：WebRTC 能力扩展

目标：通过前端扩展，深入理解媒体轨道、屏幕共享、数据通道和录制。

2.1 媒体控制

静音/取消静音
- 添加 Mute / Unmute 按钮
- 通过 localStream.getAudioTracks()[0].enabled 控制
- 实现位置：web/app.js
摄像头开关
- 添加 Camera On/Off 按钮
- 通过视频 track 的 enabled 属性控制
- 实现位置：web/app.js

2.2 屏幕共享

基础屏幕共享
- 使用 navigator.mediaDevices.getDisplayMedia 获取屏幕流
- 替换摄像头轨道或新增屏幕窗口
- 实现位置：web/app.js

2.3 DataChannel 文本聊天

点对点文本聊天
- 创建 RTCDataChannel（命名为 chat）
- 通过 ondatachannel 接收通道
- 实现聊天输入框和消息显示区域
- 实现位置：web/app.js

2.4 本地录制

MediaRecorder 录制
- 录制本地或远端 MediaStream
- 生成 .webm 文件并提供下载
- 实现位置：web/app.js

🌐 阶段 3：多人通话进阶

目标：理解多人房间概念，实现 3-4 人的小规模 Mesh 通话。

3.1 房间成员管理

后端：成员列表广播
- 成员加入/离开时广播 type: "room_members" 消息
- 消息内容为成员 ID 列表
- 实现位置：internal/signal/hub.go
前端：成员列表显示
- 显示当前房间在线成员
- 点击成员自动填入 Remote ID 输入框
- 实现位置：web/app.js

3.2 Mesh 多人通话

多 PeerConnection 管理
- 为每个远端成员创建独立 RTCPeerConnection
- 维护 remoteId -> pc 映射表
- 分别处理 offer/answer/candidate
- 实现位置：web/app.js
多路视频布局
- 为每个远端成员添加 <video> 元素
- 实现网格布局
- 实现位置：web/index.html, web/styles.css

提示：Mesh 模式适合 3-4 人小房间；大规模多人场景建议使用 SFU。

🚀 阶段 4：部署与网络扩展

目标：理解 TURN/HTTPS 和 Docker 打包，支持跨网络演示。

4.1 TURN 支持

基础 TURN 配置
- 搭建或使用 TURN 服务器（如 coturn）
- 在前端 iceServers 中配置 TURN
- 注意：不要在仓库中泄露真实凭证

4.2 HTTPS/WSS

HTTPS 反向代理
- 使用 Nginx/Caddy 提供 HTTPS
- 信令走 wss:// 协议
- 实现位置：部署配置

4.3 Docker 部署

多阶段 Dockerfile
- Go 编译阶段
- 静态前端打包阶段
- 最小化镜像体积
- 实现位置：Dockerfile

📋 学习路径建议

学习资源

主题	推荐资源
WebRTC 基础	MDN WebRTC API
信令协议	WebRTC 信令详解
架构设计	技术指南
完美协商	Perfect Negotiation

🔮 未来规划

短期目标（v2.0）

TURN 自动配置
- 自动检测网络环境
- 动态配置 ICE 服务器
HTTPS/WSS 自动化
- 集成 Let’s Encrypt
- 自动证书续期

中期目标（v3.0）

SFU 架构
- 替代 Mesh 模式
- 支持大规模多人通话
端到端加密
- 实现 DTLS-SRTP
- 增强安全性

长期目标（v4.0）

移动端支持
- React Native / Flutter SDK
- 跨平台兼容
监控与分析
- WebRTC 统计信息收集
- 性能监控面板

📊 进度统计

指标	数值
总任务数	32
已完成	32
进行中	0
待开始	0
完成率	100%

最后更新：2026-04-17 维护者：LessUp Team

Roadmap — WebRTC

WebRTC development roadmap and milestone tracking - features, phases, and future plans