场景 30:直播系统 (Live Streaming)
从摄像头本地预览,演进到百万观众的直播平台。
V1 — 1 个用户:纯前端摄像头预览
Section titled “V1 — 1 个用户:纯前端摄像头预览”你想在浏览器中获取摄像头画面,本地预览和录制保存。
你要解决什么
Section titled “你要解决什么”- getUserMedia 获取摄像头和麦克风
- video 标签实时预览
- MediaRecorder 录制视频并保存为文件
- 基本控制:开始/停止录制、切换前后摄像头
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”用 React + Tailwind 构建摄像头工具。调用 navigator.mediaDevices.getUserMedia({video: true, audio: true}) 获取媒体流,显示在 video 标签中实时预览。用 MediaRecorder API 录制,格式 webm。控制按钮:开始录制、停止录制、下载视频。设备选择:列出所有摄像头和麦克风(enumerateDevices),可切换。显示录制时长。不需要后端。
- 摄像头画面实时预览
- 录制后可以下载 webm 文件
- 可以切换不同摄像头
- 录制时长正确显示
- 停止录制后视频可正常播放
你学到了什么
Section titled “你学到了什么”- getUserMedia API → Module 1
- MediaRecorder 录制 → Module 1
- 媒体设备枚举 → Module 2
V2 — 10 个用户:P2P 直播
Section titled “V2 — 10 个用户:P2P 直播”你想让一个人的摄像头画面实时传给另一个人看,点对点直播。
你要解决什么
Section titled “你要解决什么”- WebRTC 点对点视频传输
- Go 信令服务器交换 SDP/ICE 信息
- 一对一直播:主播推流、观众拉流
- 连接状态管理
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”用 Go + Gin 构建 WebRTC 信令服务器。WebSocket /ws/signal 端点处理信令消息(offer/answer/ice-candidate),按房间 ID 转发。前端:主播创建 RTCPeerConnection,添加本地媒体流,创建 offer 通过信令发送。观众收到 offer 后创建 answer,通过信令交换 ICE candidate。最终建立 P2P 视频传输。UI:主播页面显示本地预览 + “开始直播”按钮,观众页面输入房间号加入观看。显示连接状态(连接中/已连接/断开)。
- 主播开始直播后观众能看到视频
- 音视频同步无明显延迟
- 断开后可以重新连接
- 连接状态正确显示
- 两个不同浏览器窗口通信正常
你学到了什么
Section titled “你学到了什么”- WebRTC 基础(SDP/ICE)→ Module 3
- 信令服务器设计 → Module 4
- P2P 媒体传输 → Module 3
V3 — 100 个用户:一对多直播
Section titled “V3 — 100 个用户:一对多直播”一个主播需要同时向多个观众推流,需要弹幕和观众列表。
你要解决什么
Section titled “你要解决什么”- RTMP 推流 + HLS/FLV 拉流(突破 P2P 限制)
- 流媒体服务器中转
- 弹幕系统:观众发送,所有人实时可见
- 观众列表和在线人数
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”搭建一对多直播系统。推流端:用 OBS 或浏览器推 RTMP 流到服务端(用 livego 或 nginx-rtmp 做流媒体服务器)。拉流端:将 RTMP 转为 HTTP-FLV 或 HLS,前端用 flv.js 或 hls.js 播放。Go 后端管理直播间:Room(主播、标题、状态、推流密钥)。WebSocket /ws/live/:roomId 处理弹幕:观众发送弹幕消息,服务端广播给房间内所有连接。PostgreSQL 存储直播间信息和弹幕记录。API:创建直播间、直播间列表、开始/结束直播。
- 主播推流后多个观众可以看到
- 弹幕发送后所有观众实时可见
- 观众在线人数实时更新
- 直播延迟在可接受范围(< 5秒 FLV / < 15秒 HLS)
- 主播断流后观众收到通知
你学到了什么
Section titled “你学到了什么”- RTMP/HLS/FLV 流媒体协议 → Module 5
- 流媒体服务器部署 → Module 6
- 弹幕广播系统 → Module 7
V4 — 1000 个用户:互动功能
Section titled “V4 — 1000 个用户:互动功能”直播需要丰富的互动:实时弹幕、点赞动画、在线人数统计。
你要解决什么
Section titled “你要解决什么”- 高频弹幕处理:限速、敏感词过滤
- 点赞动画:批量聚合(不每条都推送)
- 在线人数准确统计(进出房间事件)
- Redis 缓存热门直播间和在线人数
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”优化直播互动系统。弹幕限速:每用户每秒最多 2 条(Redis 令牌桶)。敏感词过滤:加载敏感词表(Trie 树),匹配则替换为 ***。点赞:客户端发送点赞事件,服务端每 500ms 聚合一次(“过去 500ms 有 N 个赞”),广播聚合结果。前端播放粒子动画。在线人数:用 Redis HyperLogLog 统计(房间ID为key,用户ID为元素),WebSocket 连接/断开时更新,每 5 秒广播当前人数。热门直播间:按在线人数排序的 Redis Sorted Set。
- 弹幕超过频率限制被拦截
- 敏感词被替换不显示
- 点赞动画流畅不卡顿
- 在线人数基本准确
- 热门直播间列表按人气排序
你学到了什么
Section titled “你学到了什么”- 令牌桶限速 → Module 8
- Trie 树敏感词过滤 → Module 9
- HyperLogLog 统计 → Module 8
- 事件聚合批处理 → Module 9
V5 — 1 万用户:转码分发
Section titled “V5 — 1 万用户:转码分发”不同观众网络条件不同,需要多码率适配。直播需要回放功能。
你要解决什么
Section titled “你要解决什么”- 多码率转码:原始流转为 1080p/720p/480p
- CDN 分发:减轻源站压力
- 直播回放:录制直播流存储为点播文件
- 自适应码率:根据网络自动切换
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”实现转码和分发。用 FFmpeg 将 RTMP 输入流转码为多码率(1080p 4Mbps / 720p 2Mbps / 480p 1Mbps),输出 HLS 分片(每片 3 秒)。多码率 HLS:生成 master.m3u8 包含所有码率的 playlist。CDN 配置:HLS 分片存到共享存储(本地 NFS 或 S3),CDN 回源到共享存储。直播回放:直播结束后将 HLS 分片合并为 MP4 文件(FFmpeg concat),存到视频存储,生成回放记录。API:回放列表、按直播间查询回放。
- 同一直播可选择不同清晰度
- 网络差时自动切到低码率
- CDN 缓存命中后不回源
- 直播结束后可以看回放
- 回放视频画质与直播一致
你学到了什么
Section titled “你学到了什么”- FFmpeg 转码流水线 → Module 10
- HLS 自适应码率 → Module 5
- CDN 回源策略 → Module 11
V6 — 10 万+ 用户:百万观众与商业化
Section titled “V6 — 10 万+ 用户:百万观众与商业化”头部主播百万观众同时在线,需要连麦互动和礼物打赏系统。
你要解决什么
Section titled “你要解决什么”- CDN 边缘节点 + 分层回源(支撑百万并发)
- 连麦:主播与观众实时音视频(SFU 架构)
- 礼物系统:虚拟礼物 + 支付 + 主播收益
- 弹幕分级:热门直播间弹幕按采样率显示
给 AI 的 Prompt
Section titled “给 AI 的 Prompt”实现大规模直播架构。CDN:多层缓存——边缘节点(离用户最近)→ 区域节点 → 源站,每层 HLS 分片缓存 TTL 递增(3s/10s/30s)。连麦:SFU(Selective Forwarding Unit)服务器接收主播和连麦观众的上行流,选择性转发给其他人。最多 4 人同时连麦。信令走 WebSocket,媒体走 WebRTC。礼物系统:Gift 表(名称、图标、价格),UserBalance(用户、余额),GiftRecord(发送者、接收者、礼物、金额、时间)。送礼扣余额+记录+广播礼物动画+主播收益入账(分成比例 70%)。大房间弹幕:在线 > 10万时,弹幕随机采样 30% 显示。
- 百万级并发下 CDN 正常分发
- 连麦观众音视频与主播互通
- 送礼正确扣款并显示动画
- 主播收益按比例到账
- 大房间弹幕不卡顿
你学到了什么
Section titled “你学到了什么”- CDN 分层架构 → Module 11
- SFU 媒体服务器 → Module 12
- 虚拟货币与支付系统 → Module 13
- 大流量降级策略 → Module 14