iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 12
0
Software Development

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

[知識篇]WebRTC APIs - RTCPeerConnection object = Event handlers / methods =

學習目標

  • 了解 RTCPeerConnection 中的Event handlers及methods

延續上一章節的實作,這裡會一一講解每個步驟

RTCPeerConnection 介紹

constructor

pc = new RTCPeerConnection([configuration]);

我們將P2P建立連線分為幾個大方向來一一理解:

  • build RTCPeerConnection instance ( 初始化 )

      function buildPeerConnection () {
        const pc = new RTCPeerConnection();
        pc.onicecandidate = (e) => { /** 略..*/ };
        pc.oniceconnectionstatechange = (e) => { /** 略..*/ };
        pc.ontrack = (e) => { /** 略..*/ };
    
        return pc
      }
    

    第一部也就是初始化 RTCPeerConnection object,這邊先不帶入細部參數設定,
    如果有興趣可以看看:RTCConfiguration_dictionary

    這邊在一開始初始化時,先綁定了以下幾個事件:

    • Event handlers
      • onicecandidate
      • oniceconnectionstatechange
      • ontrack

    onicecandidate: 當查找到相對應的遠端端口時會做onicecandidate,進行網路資訊的共享。

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

  • 加入多媒體數據( MediaStreams object )

      const localStream = await navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true,
      });
      // ....略
    
      localStream.getTracks().forEach((track) => localPeer.addTrack(track, localStream));
      // ...略
    
      remotePeer.ontrack = gotRemoteStream
      function gotRemoteStream(e) {
        if (remoteVideo.srcObject !== e.streams[0]) {
          remoteVideo.srcObject = e.streams[0];
        }
      }
    
    • methods

      • addTrack:加入MediaStream object到RTCPeerconnection中。
    • Event handlers

      • ontrack

總結

統整一下上述用到的apis :

Event handlers

  • onicecandidate
  • oniceconnectionstatechange
  • ontrack

methods

  • addTrack
  • createOffer
  • createAnswer
  • setLocalDescription
  • setRemoteDescription

上一篇
[實作篇]WebRTC APIs - RTCPeerConnection 實作 P2P
下一篇
[知識篇]WebRTC APIs - RTCPeerConnection object (SDP offer/answer)
系列文
菜雞前端邁入網頁即時通訊(WebRTC)之旅30

尚未有邦友留言

立即登入留言