課程簡介

第一天 – 媒体设备处理

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

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

 

最低要求

本課程非常適合前端和全端開發者、技術架構師,以及工程師,他們正在開發基於瀏覽器的即時通訊功能,如視訊聊天、螢幕共享或音訊串流。參與者應具備JavaScript和網頁技術的基本知識,並可選擇性地具備Node.js和基於WebSocket的通訊經驗。
 14 時間:

人數


每位參與者的報價

客戶評論 (5)

Provisional Upcoming Courses (Require 5+ participants)

課程分類