iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
Software Development

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列 第 23

[知識篇]WebRTC - Signaling Server

新手入門,如有錯誤,歡迎指正~~~

系列文章同步更新於部落格

What is signaling

WebRTC主要能夠實現即時點對點的數據傳輸,而點對點間在一開始還不知道對方時,是無法互相傳輸的。因此就必須透過signaling告訴彼此對方是誰來達成連線的建立。

https://ithelp.ithome.com.tw/upload/images/20201006/20129521Hxkr9FwDZZ.png

圖中為WebRTC的基礎架構,透過圖示,讓我們更好理解其過程,由兩個端點(Alice & Bob)將各自的裝置資訊(連線位置,port, media format...)傳送到一個中心(也就是Signaling Server)統一做處理,再將彼此資訊交給對方,
而這個過程就稱為signaling,因此透過第三方server,Alice跟Bob可以得知彼此,進而能夠互相傳輸資訊。

在WebRTC中Client端需要傳輸的資訊可能有:

  • 負責通知開啟(open)跟關閉(close)連線的重要機制。
  • Media metadata,傳輸方的多媒體編解碼器設定/頻寬設定...等。
  • Network data,彼此的IP Address/Port等網路連線資訊。
  • 安全性驗證。

也因為 WebRTC APIs 並沒有實作這些;因此在這部分上面,需要自己實作,相對,也能有更大彈性加入自己應用上的安全機制等功能。

Signaling Server

如上所述,Signaling Server主要得作用就是交換端點間的裝置資訊使兩端點的連線能夠順利建立。

而在WebRTC中並沒有明確規定signaling的傳遞機制,也就是說,你可以選擇自己覺得適合的方式,例如Http Request或是WebSocket等的方式來傳輸signaling資訊到端點間。

Signaling Server選擇情境:

  • 如果是Http Request: 那就可能需要利用polling輪詢的方式(不了解輪詢的人可以回顧前面章節),每個端點都要定時主動詢問server是否有新的signaling連線請求。

  • 另外一個方式就是 WebSocket,藉由WebSocket的雙向性,讓server能夠主動傳遞message(訊息)也能支援 signaling 甚至是 ICE 驗證也能夠實作。

平時我們能看到,WebSocket蠻常用來實作聊天室,也因為他就是為此而生的,而現在也發現能夠利用它的特性,來實作視訊聊天室的應用上。

RTCPeerConnection + signaling

使用RTCPeerConnection搭配signaling來實現WebRTC應用建立點對點連線,
其流程會如下:

利用上述Alice 和 Bob 為例

  1. Alice會先建立 RTCPeerConnection 實例

  2. 呼叫createOffer()method建立 offer (Alice's SDP)

  3. Alice 將offer設為自身的 local description

  4. 透過 signaling 將 offer 送到signaling server藉由server送給Bob

  5. Bob 收到通知消息後,呼叫setRemoteDescription()將 Alice的 offer 設為自身的 remote description

  6. Bob 設定完後需要回覆 Answer (Bob's SDP)給Alice (流程一樣)

除了上面SDP的交換外,還需要交換 Network 資訊,而WebRTC是依循 ICE framework 進行 IP 位址與連接埠查找的流程,來找到一個可用且最好的 candidate 來使用。

因此流程如下:

  1. Alice在建立 RTCPeerConnection 時要註冊 onicecandidate 事件。
  2. 當找到能夠使用的candidate時會回呼,並透過回呼將 candidate 資訊藉由 Signaling server 通知 Bob
  3. 當Bob 接收到消息後,會呼叫 addIceCandidate() 將該 candidate 資訊加到 remote description 中。

如此一來,即完成目前RTCPeerConnection + signaling大致上的連線設定流程~

總結

本章了解到:

  • WebRTC還是需要Server來處理以下:
    • Client端交換彼此位置資訊來建立連線。
    • 網路連線轉換(NATs)的處理如ICE framework做的事情。
  • Signaling Server 的選擇:
    • Http request做輪詢
    • WebSocket
      ...(還有其他如XMPP等方式這邊就不一一列舉)

參考


上一篇
[知識篇]網路通訊協定 - WebRTC protocol stack
下一篇
[實作篇]WebRTC Signaling Server - Express x Socket.io
系列文
菜雞前端邁入網頁即時通訊(WebRTC)之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言