Skip to content

WebRTC

引言

WebRTC（Web Real-Time Communication）是一項革命性的技術，它使得在不需要安裝任何插件或第三方軟件的情況下，直接在瀏覽器跟瀏覽器間實現即時通信成為可能，這包含視訊通話、語音通話以及實時數據共享。

WebRTC 是什麼？

WebRTC（Web Real-Time Communication）是一項開放標準的技術，目的在允許網頁瀏覽器透過簡單的應用程式介面（APIs）進行即時通訊（RTC）。

有誰在背後支持

WebRTC 是一項開放源碼的項目，得到了包括 Google、Mozilla、Apple、Microsoft 等多家主要的網絡技術和瀏覽器開發公司的支持和貢獻。

  • Google 為 WebRTC 項目的主要推動者。
  • Mozilla 是 Firefox 瀏覽器的開發者，也是 WebRTC 的早期支持者之一。
  • Apple 雖然在 WebRTC 的早期階段較少參與，但後來也在其 Safari 瀏覽器中加入了 WebRTC 的支持，標誌著對這一技術的認可和支持。
  • Microsoft 最初推出了一個類似的名為 CU-RTC-Web 的提案，但後來也開始支持 WebRTC，並在其 Edge 瀏覽器中實現了 WebRTC 技術。

瀏覽器支持現況(2024/02/08)

WebRTC browser support

有哪些產品在用

以下產品都在網頁版使用 WebRTC 的技術實現視訊和語音通話的功能

  • Google Meet
  • Zoom
  • Messenger、WhatsApp
  • Teams
  • Discord
  • Twilio
  • Talky
  • Jitsi

WebRTC 發展前景

雖然 WebRTC 冠以 Web 之名，但其實只要 IP 連接可以符合 WebRTC 規範那就可以透過，兩個終端環境就可以互通，像是桌面應用程式、行動裝置和 IOT 裝置…等

WebRTC 的優點

  • Google 開源框架
  • 跨平台：web、Android、iOS、Windows、MacOS、Linux
  • 即時傳輸：延遲低，適合即時性要求較高的應用場景
  • 應用容易：透過 web API 可以快速開發人對人的通訊功能

WebRTC 架構

WebRTC architecture

Reference

WebRTC 底層是用 C++實現的，但以一般網頁的開發者來說，只需透過 JavaScript 使用 web API 即可。WebRTC API 用法與說明可以直接在 MDN 上查詢。

更詳細的說明可以看這篇文章

WebRTC 如何實現端對端資料傳輸

WebRTC data transfer

Reference

WebSocket 是 HTML5 提供的一種網路傳輸協定，是瀏覽器（Client）與伺服器（Server）交換資料的方式之一。

  • HTTP 協定只能由 Client 端「單向」發送請求，無法由 Server 端主動發送請求；WebSocket 協定則允許 Server 端主動向 Client 端推播資料，實現「雙向溝通」機制
  • 透過 HTTP 1.1 持久連接（keep-alive），有效解決 HTTP 輪詢（Polling）產生的效能問題，節省伺服器資源
  • 實際範例：訊息推播、即時聊天室、共同編輯等功能

實務案例：點對點 (Peer-to-Peer) 視訊通話

WebRTC peer-to-peer video call

執行手動傳輸 SDP 來連線

第一步

建立一個點對點雙方都可以訪問的 Signaling Server (WebSocket)，讓雙方可以在傳遞視訊數據之前，雙方需要知道的必要資訊，在 WebRTC 通訊架構下稱為媒體協商和網路協商。

媒體協商傳遞的協定 (數據格式) 稱為 Session Description Protocol (SDP)

而網路協商傳遞的訊息則稱作 candidate。

Session Description Protocol (SDP) 描述了雙方要怎樣建立連接，編解碼器(codec)、媒體類型、加密方式…等。

SDP 描述的資訊由 Session description、Time description、Media description 所組成

Session description
    v=  (protocol version number, currently only 0)
    o=  (originator and session identifier : username, id, version number, network address)
    s=  (session name : mandatory with at least one UTF-8-encoded character)
    i=* (session title or short information)
    u=* (URI of description)
    e=* (zero or more email address with optional name of contacts)
    p=* (zero or more phone number with optional name of contacts)
    c=* (connection information—not required if included in all media)
    b=* (zero or more bandwidth information lines)
    One or more Time descriptions ("t=" and "r=" lines; see below)
    z=* (time zone adjustments)
    k=* (encryption key)
    a=* (zero or more session attribute lines)
    Zero or more Media descriptions (each one starting by an "m=" line; see below)
Time description (mandatory)
    t=  (time the session is active)
    r=* (zero or more repeat times)
Media description (optional)
    m=  (media name and transport address)
    i=* (media title or information field)
    c=* (connection information — optional if included at session level)
    b=* (zero or more bandwidth information lines)
    k=* (encryption key)
    a=* (zero or more media attribute lines — overriding the Session attribute lines)

Reference

第二步

建立瀏覽器數據傳輸的管道。但從架構圖可以看出，兩個瀏覽器連接會遇到兩個問題，分別是 NAT 和防火牆。這時就需要用到 STUN 或 TURN 協定，進行 NAT 穿透，來跨越 NAT 和防火牆。

而在 WebRTC 的架構中有用到一個叫做 ICE 的框架，該框架整合了 STUN 和 TURN。這個框架可以讓瀏覽器可以先去 STUN server (有很多公開服務，無需自己維護) 請求 public IP address 和 NAT 類型，這個資料稱作 ICE candidates，並將這個資料透過 signaling server 送給對方。

補充：NAT (Network Address Translation，網絡地址轉換)

一種網絡協議，主要用於將內網（私有網絡）的 IP 地址轉換為公網（公共網絡）的 IP 地址。目的是為了解決 IPV4 下，IP 位置匱乏的問題，讓多個設備共享一個公網 IP 地址進行上網，又同時能增加了網路的安全性。

NAT 的工作原理

當內網的設備（如家裡的電腦或手機）向外網發送請求時（比如訪問一個網站），NAT 設備（通常是路由器）會將該請求中的源 IP 地址（設備的私有 IP 地址）替換為自己的公網 IP 地址，並修改源端口號，然後將修改後的請求發送到外網。當外網的服務器響應時，NAT 設備再根據之前的映射關係，將響應的目標 IP 地址和端口號替換回內網設備的私有 IP 地址和端口號，完成數據的傳輸。

NAT 的優點
  • 節省 IP 地址: 允許多個設備共享一個公網 IP 地址，減少了對 IPv4 地址的需求。
  • 提高安全性: 內網設備對外只顯示一個公網 IP 地址，隱藏了內網的結構和設備信息，對內部網絡起到一定的保護作用。
  • 靈活性和擴展性: 便於網絡管理，易於內網的擴展。
防火牆 (Firewall)

一個架設在網際網路與內網之間的資安系統，根據持有者預定的策略來監控往來的傳輸。

第三步

根據第二步取得對方的 ICE candidates 後，就可以實現 NAT 穿透，讓瀏覽器互相知道對方的位置在哪，而不會被 NAT 和防火牆阻擋，成功建立端對端連線，直接傳送視訊資料給對方的瀏覽器。

附上我做的網址：（我是用免費的 server 所以會有冷啟動和效能的問題，還請大家不要介意） https://video-chat-with-webrtc-and-websocket.onrender.com/

Reference

深入探討 Server Components 傳遞資料到 Client 端的原理Back-end
© 2024 Eric Tsai