WebRTC 技術與流程圖解懶人包

WebRTC（Web Real-Time Communication）是一項強大而靈活的技術，使得網頁應用程式 (Web App) 能夠在沒有第三方套件的情況下進行聲音影像通訊和數據傳輸。這篇文章將帶你深入了解 WebRTC 的基礎知識及其工作流程，並通過一張自製的流程圖展示 Peer-to-Peer（P2P）連接建立前與 Signal server 進行的訊息交換過程。

什麼是 WebRTC？

WebRTC 是一個 Open source project，主要在讓網頁瀏覽器和手機應用程式能夠透過簡單的 JavaScript API 進行即時的聲音影像通訊和數據傳輸。它不僅支持點對點（P2P）的連接，還提供了高質量和低延遲的數據傳輸功能。

WebRTC 主要包括三個核心組件：

1. MediaStream：獲取和操作本地的聲音影像。
2. RTCPeerConnection：建立 P2P 連接並處理聲音影像的傳輸。
3. RTCDataChannel：在 P2P 連接中進行任意數據的傳輸。

WebRTC 的工作流程

WebRTC 的工作流程分為以下幾個主要步驟：

1. 取得本地媒體：使用 MediaStream API 獲取本地聲音影像串流。
2. 建立 RTCPeerConnection：創建一個 RTCPeerConnection 對象，準備進行 P2P 連接。
3. 信令交換（Signaling)：通過 Signaling Server 交換連接資訊（如 SDP 和 ICE Candidates）。
4. 建立 P2P 連接：利用交換的資訊建立 P2P 連接，傳輸聲音影像串流和數據。

以下有一張自製的流程圖，展示了 Peer-to-Peer 連接在建立前通過 Signaling Server 進行的訊息交換過程。
在看圖之前先來了解一下建立連線前所需要的詳細步驟：

範例程式碼可能會略過一些參數的定義，較著重於整體的流程講解

信令交換流程

信令（Signaling）是 WebRTC 中的一個關鍵步驟，負責交換連接設置資訊。雖然 WebRTC 本身不規範信令協議，但通常會使用 WebSocket、XHR 或其他即時通訊技術來實現。

信令交換過程如下：

1. Peer A：創建一個 RTCPeerConnection 對象，並通過 createOffer方法生成 SDP 描述，將 offer 利用 setLocalDescription 方法記錄起來後，將 SDP 描述通過 Signal server 發送給客戶端 B。

const peerA = new RTCPeerConnection(config);
const offer = await peerA.createOffer()
await peerA.setLocalDescription(offer)
// send offer to remote peer
// ex:
sendToServer(offer);

2. Peer B：接收到 SDP 描述後，使用 setRemoteDescription 設置接收到的遠端描述，並生成回應的 SDP 描述（Answer)，將 answer 利用 setLocalDescription 方法記錄起來後，將回應的 SDP 描述通過 Signal server 發送給客戶端 A

const peerB = new RTCPeerConnection(config);
// 透過 Signaling Server 接收到 Offer 後
await peerB.setRemoteDescription(offer)
const answer = await peerB.createAnswer();
await peerB.setLocalDescription(answer)
// send answer to remote peer
sendToServer(answer);

3. Peer A & B：各自詢問 STUN or TURN server 自己的 IP 位置與 ICE candidates。

4. Peer A & B：互相交換 ICE 候選（通過 Signal server），以確定最佳的 P2P 連接路徑。

WebRTC 連線前訊息交換流程

下篇預告

在下一篇文章中，我將運用 Firebase Cloud Store 作為 Signaling Server，並結合 React 手把手實作一個簡單的 WebRTC 應用，實現視訊通話、訊息傳遞的功能。

結語

WebRTC 為現代 Web 應用帶來了無限可能，使得即時音訊影像和數據傳輸變得前所未有的簡單。在理解了 WebRTC 的基本概念和工作流程後，將能夠更好地應用這項技術，開發出強大且靈活的 App。

希望這篇文章能夠幫助你更好地理解 WebRTC 的基礎知識和工作流程。我試著想把整個流程變得容易懂一點，如果流程圖太複雜或哪部分不理解，歡迎留言詢問！我們下一篇文章再見！