直播页面原型搭建2

直播页面原型中的核心交互逻辑与状态管理设计

一、直播页面的本质是“状态驱动界面”

直播页面并不是普通网页，而是一个强状态驱动系统。

在你的原型中，核心状态包括：

let isLive = false;
let isMicOn = true;
let isCamOn = true;
let isScreenSharing = false;

页面上的所有行为，本质上都是这些状态的映射。

---

二、麦克风与摄像头的状态控制逻辑

1. 状态控制方式

麦克风和摄像头并不是“销毁 track”，而是：

track.enabled = false;

这种方式的优点是：

• 不会中断 WebRTC 连接
• 可以快速恢复
• 远端立即感知变化

---

2. UI 与状态的绑定

按钮样式并不是写死的，而是通过 class 切换：

toggleMicBtn.className = 'control-btn mic-on';
toggleMicBtn.className = 'control-btn mic-off';

这是一种典型的状态驱动 UI设计。

---

三、直播开始与结束的生命周期管理

开始直播时发生的事情

点击“开始直播”后，系统会顺序执行：

1. 创建 WebSocket 连接
2. 初始化 RTCPeerConnection
3. 获取摄像头和麦克风
4. 挂载本地预览画面
5. 更新按钮状态
6. 启动语音识别（可选）

这一整套流程，构成了直播的“启动阶段”。

---

结束直播时的清理逻辑

结束直播并不是简单地关闭视频，而是：

• 停止所有媒体轨道
• 关闭 PeerConnection
• 关闭 WebSocket
• 重置页面状态
• 恢复占位提示

这种完整的清理流程，是工程级代码的重要体现。

---

四、屏幕共享的工程实现思路

屏幕共享并不是“新开一个视频”，而是：

• 获取 displayMedia
• 用 replaceTrack 替换当前发送的视频轨道

sender.replaceTrack(newTrack);

这种方式可以保证：

• WebRTC 连接不断
• 观众端画面平滑切换

---

五、录制功能的设计思路

录制功能并不依赖服务器，而是使用浏览器内置能力：

• MediaRecorder
• MediaStream 组合

通过将多个轨道组合成新的 MediaStream，可以实现：

• 录屏 + 声音
• 摄像头 + 声音

---

六、博客小结

这一篇主要解决的是：

• 直播页面“如何动起来”
• 状态如何驱动 UI
• 如何管理直播生命周期

---