iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
0
Software Development

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

[實作篇]WebRTC - Video Chat 之 事件監聽

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

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

目標

上一章節已經完成 一對一視訊聊天室 的功能,
本章會帶點之前沒提到的事件監聽,來更了解整個連線狀態的變化~

RTCPeerConnection 事件

function createPeerConnection() {
  peer = new RTCPeerConnection();
  peer.onicecandidate = /** ... */;
  peer.ontrack = /** ... */;
  peer.onnegotiationneeded = /** ... */;
  peer.onconnectionstatechange = /** ... */;
  peer.oniceconnectionstatechange = /** ... */;
  peer.onicegatheringstatechange = /** ... */;
  peer.onsignalingstatechange = /** ... */;
}
  • onicecandidate: 當查找到相對應的遠端端口時會做onicecandidate,進行網路資訊的共享。

  • ontrack: 當完成連線後,透過該事件能夠在遠端傳輸多媒體檔案時觸發,並處理接收。

  • onnegotiationneeded: 每當 RTCPeerConnection 要進行會話溝通(連線)時,第一次也就是在addTrack後會觸發該事件,
    通常會在此處理createOffer,來通知remote peer與我們連線。

  • onconnectionstatechange: RTCPeerConnection.connectionState 屬性值的變化。

    • 包含了幾個狀態:可參考 MDN
  • oniceconnectionstatechange: RTCPeerConnection.iceConnectionState 屬性值的變化。

    • iceConnectionState:可參考 MDN

    主要就是 ICE agent 作為代理,管理網路連線的狀態。

    當我們先前註冊的 onicecandidate 事件時,會陸續發送經由ICE 查找的 candidate,並傳送給remote peer 匹配,
    匹配中狀態及為 checking,當匹配成功時狀態為 completed,當某方斷線時狀態為 disconnected

  • onicegatheringstatechange: RTCPeerConnection.iceGatheringState 屬性值的變化。

    • iceGatheringState: 可參考 MDN

    主要顯示ICE agent 找尋可用的candidate時的搜尋狀態。

    • gathering: 搜尋中。在此期間找尋到的 candidate 都會透過 onicecandidate 傳送給remote peer去匹配。
    • complete: 結束搜尋,但當有接收到新的 candidate 時,狀態又會改為 gathering
  • onsignalingstatechange: RTCPeerConnection.signalingState 屬性值的變化。

    • signalingState: 可參考 MDN

    主要負責signaling的狀態管理。

    • stable: 當該 RTCPeerConnection 物件中沒有正在逕行的 SDP offer/answer 流程時,代表目前可以進行連線,狀態變更。
    • have-local-offer: 當RTCPeerConnection.setLocalDescription() (透過createOffer() 建立SDP offer)成功時,代表已有offer,狀態變更。

    https://ithelp.ithome.com.tw/upload/images/20201010/20129521dKDrtraOFC.png

    • have-remote-offer: 當remote peer接收到offer並回傳answer,local peer 透過 setRemoteDescription() 成功時,代表已接收到offers,狀態變更。

    https://ithelp.ithome.com.tw/upload/images/20201010/201295218BSw6LSoA2.png

    由此可知,能夠監控該狀態變化來測試整個signaling交換過程有沒有問題~

    來看看實際上狀態變化,以之前的範例來說。

    發送端:

    https://ithelp.ithome.com.tw/upload/images/20201010/20129521h8oBZljqWK.png

    接收端:

    https://ithelp.ithome.com.tw/upload/images/20201010/20129521PHeRKUz2z9.png

其餘上述的事件監聽對流程上或是狀態變化上有疑問,也都可以藉由console來了解哦~

總結

這些事件都是各自負責不同屬性的狀態管理(state machine),
也因此 關閉連線 的功能可以藉由監聽 iceConnectionState 的狀態來響應功能的觸發;
理解這些事件也能更加了解整個WebRTC p2p 連線的步驟~


上一篇
[實作篇]WebRTC - Video Chat
下一篇
[實作篇]WebRTC - Video Chat (data channel)
系列文
菜雞前端邁入網頁即時通訊(WebRTC)之旅30

尚未有邦友留言

立即登入留言