聯繫我們

課程簡介

媒體裝置處理

1. 使用 navigator.permissions 的瀏覽器權限

  • 存取硬體:
    • 網路攝影機
    • 麥克風
  • 選配權限:
    • 地理定位
    • 通知
    • 剪貼簿(讀/寫)
  • 權限查詢與狀態
  • 限制與瀏覽器相容性

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 統計

  • 統計類型
  • 解讀統計數據的方法
  • 即時位元率/抖動圖表
  • 品質適應策略

6. 所有主題皆為

  • 實作案例

最低要求

本課程適合前端與全端開發人員、技術架構師以及正在開發瀏覽器實時通訊功能(如視訊聊天、螢幕分享或音訊串流)的工程師。學員應具備 JavaScript 和網路技術的實務知識,並可選擇性擁有 Node.js 及基於 WebSocket 通訊的經驗。

 14 小時

客戶評論 (3)

課程分類