WebRTC 即時通訊實戰
WebRTC 讓瀏覽器與原生應用能建立低延遲的影音與資料通道。媒體可能直接在端點間傳輸，也可能經過 TURN、SFU 或其他媒體伺服器。
本專題從瀏覽器媒體 API 出發，逐步介紹信令、SDP、ICE、DataChannel、品質診斷與多人通訊架構。完成後，你會具備繼續實作產品級系統的基礎，但仍需要依真實需求補上安全、監控、容量與故障測試。
適合誰閱讀
- 熟悉 JavaScript、Promise 與瀏覽器事件。
- 知道基本的 HTTP、WebSocket 與前後端概念。
- 想理解 WebRTC 為什麼能連線，而不只想複製框架範例。
你會學到什麼
- 取得、切換並釋放攝影機、麥克風與螢幕串流。
- 用一致的信令格式交換 SDP 與 ICE Candidate。
- 診斷連線路徑、丟包、RTT、碼率與畫質限制。
- 理解 Mesh、MCU、SFU、Simulcast 與 SVC 的取捨。
學習路徑圖
章節清單
第一階段：底層原理手寫實戰 (Low-Level)
這部分適合想徹底理解 WebRTC 運作機制的開發者。
WebRTC 的故事：從 Flash 到瀏覽器即時通訊的革命 - 從 GIPS 到 W3C 標準化。
瀏覽器影音採集 - 掌握
MediaDevicesAPI 與螢幕分享。信令伺服器與連線中心 - 使用 Node.js 建立通報機制。
SDP 交換與媒體協商 - 深度解析 Offer/Answer 與會話描述。
ICE 候補者與 NAT 穿越 - 穿透防火牆與 STUN/TURN 運作。
Data Channel：不只是傳影音 - 高速 P2P 資料傳輸。
第二階段：框架與工程化 (Engineering)
先用 PeerJS 理解框架封裝，再切換到自建信令與品質監控。第 6、7 篇是兩種不同實作路線，不是同一套程式碼的連續擴充。
- 使用 PeerJS 簡化流程 - 5 分鐘搭建視訊通話。
- 信令機制的正式封裝 - 設計房間系統與成員管理。
- WebRTC-Internals 除錯監控 - 專業的效能偵測技巧。
第三階段：多人與規模化 (Scale)
當通訊對象變成多人時，你需要的架構視野。
- 多人通訊架構概論 - Mesh、MCU 與 SFU 的抉擇。
- 邁向 SFU：框架探索 - 認識 Mediasoup 與 Janus。
TIP
建議導讀順序：先完成第 01–05 篇，掌握媒體、協商、ICE 與 DataChannel，再依需求選擇 PeerJS 或自建房間信令路線。