WebRTC

這為期兩天的WebRTC培訓提供了一個實用、逐步的旅程，深入即時瀏覽器通訊的世界。從媒體設備的基礎開始，參與者將學習如何安全有效地管理不同瀏覽器中的相機、麥克風和權限。隨著課程的進展，他們將深入探討WebRTC的核心概念，如點對點視頻通話、信號傳遞和會話協商，並使用WebSocket和RTCPeerConnection等工具構建實際解決方案。在此過程中，實際案例將引導學習者完成錄製、屏幕共享和即時音視頻分析。最終，參與者將了解如何設計和實現基於WebRTC的應用程序，這些應用程序既穩健又適合生產環境。

• 通過navigator.mediaDevices和getUserMedia，獲得媒體設備處理、瀏覽器權限和跨瀏覽器兼容性的實際經驗。
• 學習使用WebRTC和WebSocket等信號協議構建點對點視頻通訊系統。Socket.IO
• 實現媒體流錄製、波形預覽、屏幕共享和即時音視頻統計跟踪。
• 探索高級主題，如SDP協商、編解碼器選擇、即時比特率監控和動態質量適應。
• 非常適合希望將現代瀏覽器通訊功能整合到實際應用中的開發人員。

第一天 – 媒体设备处理

1. 使用 navigator.permissions 处理浏览器权限

• Access硬件：
  • 摄像头
  • 麦克风
• 可选权限：
  • 地理位置
  • 通知
  • 剪贴板（读/写）
• 权限查询与状态
• 限制与浏览器兼容性
• 实际操作案例

2. 使用 navigator.mediaDevices 读取媒体设备

• 设备枚举
• 处理设备变更
• 实际操作案例

3. 跨浏览器兼容性

• API 使用：
  • navigator.permissions.query()
  • navigator.mediaDevices.enumerateDevices()
  • getUserMedia()
• Safari 回退策略
• 实际操作案例

4. 媒体设备处理

• 设备初始化：getUserMedia(constraints)
• 媒体设备约束
• 启动与停止媒体流
• 处理设备变更
• 实际操作案例

5. 使用 MediaRecorder 进行设备录制

• 启动/停止流媒体与录制
• 下载 .webm 文件
• 实时波形预览
• 实际操作案例

可选附加功能：

• 使用 ScriptProcessorNode 保存为 .wav 格式
• 音频 FFT 频谱可视化
• 分贝音量条
• 使用 webkitSpeechRecognition 进行语音识别

第二天 – 点对点连接

1. 信令服务器

• 双向通道选项：
  • WebSocket
  • Socket.io
  • SignalR
• 消息结构
• 简化 WebRTC 客户端
• 完整信令流程
• 实际操作案例

2. 通过 WebRTC 进行视频聊天

• 架构：Node.js + ws
• WebRTC 客户端：RTCPeerConnection
• 本地端到端测试
• 实际操作案例

可选功能：

• 挂断电话（关闭连接，停止媒体）
• 群组通话（多用户房间）
• 基于令牌的简单身份验证

3. 屏幕共享

• 使用 getDisplayMedia()
• 架构与选项
• 实际操作案例

4. 会话描述协议 (SDP)

• 简介与内容
• 读取与解释 SDP
• 编解码器：
  • 音频与视频
  • 协商与控制
  • 回退策略
• 实际操作案例

5. 使用 getStats() 进行 WebRTC Statistics

• 统计类型
• 如何解释统计信息
• 实时比特率/抖动图表
• 质量适应策略
• 实际操作案例