WebRTC

WebRTC（Web Real-Time Communication）是一組 JavaScript API，允許瀏覽器之間建立點對點連線，即時交換音訊、視訊和資料。

概述

• 瀏覽器原生支援，無需外掛
• 點對點（P2P）連線，低延遲
• 支援音訊、視訊和資料傳輸
• 需要 Signaling Server 協調連線

WebRTC vs WebSocket

為何 WebRTC 需要 WebSocket

• UDP 不驗證資料，不適合傳輸重要資料
• WebRTC 沒有內建 Signaling 機制
• 需要 WebSocket 進行初始連線協調

核心流程

連線建立流程

1. 雙方 Peer 先連上 Signaling Server
2. PeerA 取得自身 SDP 並呼叫 setLocalDescription
3. PeerA 將 SDP 傳給 Signaling Server
4. Signaling Server 將 PeerA 的 SDP 送給 PeerB
5. PeerB 呼叫 setRemoteDescription 將 PeerA 的 SDP 寫入
6. PeerB 取得自身 SDP 並呼叫 setLocalDescription
7. PeerB 將 SDP 傳給 Signaling Server
8. Signaling Server 將 PeerB 的 SDP 送給 PeerA
9. PeerA 呼叫 setRemoteDescription 將 PeerB 的 SDP 寫入
10. PeerA 向 STUN Server 詢問 public IP
11. STUN Server 回應 public IP
12. PeerA 向 TURN Server 詢問 relay 資訊（若 STUN 失敗）
13. TURN Server 回應 relay 資訊
14. PeerA 將 ICE Candidates 傳給 Signaling Server
15. Signaling Server 將 PeerA 的 ICE Candidates 送給 PeerB
16. PeerB 呼叫 setRemoteIceCandidate 寫入
17. PeerB 重複步驟 10-16
18. P2P 通道建立完成

Signaling

Signaling 是設定、控制和終止通訊會話的過程。

三大主要功能

1. Session Control Information - 會話控制資訊
2. Exchange IP and Port - 交換 IP 與 Port 資訊
3. Exchange Codecs - 交換編解碼器與媒體類型

NAT 穿透技術

STUN（Session Traversal Utilities for NAT）

• 用於發現公網 IP 和 Port
• 輕量級協定
• Google 提供免費 STUN Server

TURN（Traversal Using Relay NAT）

• 當 STUN 失敗時使用
• 透過中繼伺服器轉發資料
• 支援 TCP/UDP 跨越 NAT 和防火牆

ICE（Interactive Connectivity Establishment）

ICE 是整合各種 NAT 穿透技術的框架，包含 STUN、TURN 等。

{
  "sdpMLineIndex": 0,
  "sdpMid": "",
  "candidate": "a=candidate:2999745851 1 udp 2113937151 192.168.56.1 51411 typ host generation 0"
}

ICE 會收集多個 ICE Candidates，嘗試不同路徑直到找到最佳連線。

Trickle ICE

傳統方式需等待所有 ICE Candidates 收集完成：

Trickle ICE 允許邊收集邊傳送，加速連線：

串流媒體概念

  flowchart LR
    VcC[聲音採集]
    VdC[影像採集]
    VcEc[聲音編碼]
    VdEc[影像編碼]
    Enc[封裝]
    Network[網路傳輸]
    DeEnc[解封裝]
    Dc[解碼]
    Output[輸出裝置]

    VcC --> VcEc --> Enc
    VdC --> VdEc --> Enc
    Enc --> Network --> DeEnc --> Dc --> Output

OSI 層級對應

WebRTC API

Media Capture

• navigator.mediaDevices.getUserMedia() - 取得音視訊串流
• MediaStream - 媒體串流介面
• MediaStreamTrack - 單一軌道（音訊或視訊）
• MediaRecorder - 錄製多媒體資料

Peer Connection

• RTCPeerConnection - 建立與管理 P2P 連線
  • setLocalDescription() - 設定本地 SDP
  • setRemoteDescription() - 設定遠端 SDP
  • addIceCandidate() - 新增 ICE Candidate

Data Channel

• RTCDataChannel - 建立雙向資料通道，傳送任意資料

網路架構

相關主題

• WebSocket