课程大纲

第一天 – 媒体设备处理

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)

即将举行的公开课程

课程分类