iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 26
0
Software Development

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

[實作篇]WebRTC - Video Chat

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

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

目標

上一章節已經完成 Signaling server 的部分,
本章會實作簡易一對一視訊聊天室作為專案架構更接近實務應用的範例,

user story:

  • 能夠與線上的某人進行一對一視訊

實作

附上完整程式碼 - github

拆分需求後可能有幾個任務:

  • 連接上 socket server
  • 將 p2p SDP offer/answer 及 ICE 透過 socket 來傳遞
  • getUserMedia 獲取本地多媒體數據
  • RTCPeerConnection 處理連線等相關設定

HTML

head 的部分:

<!-- ./public/index.html -->

<!-- .... -->
<head>
  <!-- ... -->
  <title>Video Chat With WebRTC</title>


  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script defer src="./js/main.js"></script>
</head>
<!-- .... -->

head 主要是載入三支 JS

  • adapter.js:由 google 提供的將 WebRTC 封裝並優化過相容性的套件。
  • socket.io.js:好用的 websocket 套件
  • main.js : 該專案的主程式

body 的部分:

<!-- ./public/index.html -->

<!-- ... -->
<body>
  <h1>Video Chat With WebRTC</h1>

  <div id="container">
    <section>
      <h1>Local Tracker</h1>
      <video id="localVideo" autoplay></video>
    </section>
    <section>
      <h1>Remote Receiver</h1>
      <video id="remoteVideo" autoplay></video>
    </section>

    <div class="box">
      <button onclick="connection()">Connection</button>
      <button onclick="calling()">Call</button>
      <button onclick="closing()">Hang Up</button>
    </div>
  </div>
</body>

兩個 Video tag 負責接收本地及遠端的視訊呈現,
三個按鈕分別負責:

  • connection(): 建立 socket 連線及事件綁定
  • calling(): 獲取本機端多媒體數據並建立 p2p connection
  • closing(): 關閉連線

主程式

接下來會實作上述三個主要功能。

  • connection()

    需要處理的:

    • 與 socket server 的連線
    • 加入指定房間
    • 幾個基本應用(新使用者加入/有人離開該房/斷線)
    • SDP offer/answer
    • ICE candidate
    function connection() {
      socket = io.connect("/");
    
      socket.emit("joinRoom", { username: "test" });
    
      // Socket events
      socket.on("newUser", (data) => {
        console.log("歡迎新人加入");
        console.log(data);
      });
    
      socket.on("userLeave", (data) => {
        console.log("有人離開了");
        console.log(data);
      });
    
      socket.on("disconnect", () => {
        console.log("你已經斷線");
      });
    
      socket.on("offer", handleSDPOffer);
      socket.on("answer", handleSDPAnswer);
      socket.on("icecandidate", handleNewIceCandidate);
    }
    
  • 接收SDP offer

    let peer = null; // RTCPeerConnection
    let cacheStream = null; // MediaStreamTrack
    
    // ...略
    
    async function handleSDPOffer(desc) {
      console.log("*** 收到遠端送來的offer");
      try {
        if (!peer) {
          createPeerConnection(); // create RTCPeerConnection instance
        }
    
        console.log(" = 設定 remote description = ");
        await peer.setRemoteDescription(desc);
    
        if (!cacheStream) {
          await addStreamProcess(); // getUserMedia & addTrack
        }
    
        await createAnswer();
      } catch (error) {
        console.log(`Error ${error.name}: ${error.message}`);
      }
    }
    
  • 接收SDP answer

    async function handleSDPAnswer(desc) {
      console.log("*** 遠端接受我們的offer並發送answer回來");
      try {
        await peer.setRemoteDescription(desc)
      } catch (error) {
        console.log(`Error ${error.name}: ${error.message}`);
      }
    }
    
  • 接收ICE candidate

    async function handleNewIceCandidate(candidate) {
      console.log(`*** 加入新取得的 ICE candidate: ${JSON.stringify(candidate)}`);
      try {
        await peer.addIceCandidate(candidate);
      } catch (error) {
        console.log(`Failed to add ICE: ${error.toString()}`);
      }
    }
    
  • 加入多媒體數據到RTCPeerConnection instance

    // Media config
    const mediaConstraints = {
      audio: false,
      video: {
        aspectRatio: {
          ideal: 1.333333, // 3:2 aspect is preferred
        },
      },
    };
    // ...略
    
    async function addStreamProcess() {
      let errMsg = "";
      try {
        console.log("獲取 local media stream 中 ...");
        const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
    
        const localVideo = document.getElementById("localVideo");
        localVideo.srcObject = stream;
        cacheStream = stream;
      } catch (error) {
        errMsg = "getUserStream error ===> " + error.toString();
        throw new Error(errMsg);
      }
    
      try {
        // RTCPeerConnection.addTrack => 加入MediaStreamTrack
        cacheStream
          .getTracks()
          .forEach((track) => peer.addTrack(track, cacheStream));
      } catch (error) {
        errMsg = "Peer addTransceiver error ===> " + error.toString();
        throw new Error(errMsg);
      }
    }
    
  • 開啟 WebRTC 連線

    async function calling() {
      try {
        if (peer) {
          alert("你已經建立連線!");
        } else {
          createPeerConnection(); //建立 RTCPeerConnection
    
          await addStreamProcess(); // 加入多媒體數據到RTCPeerConnection instance
        }
      } catch (error) {
        console.log(`Error ${error.name}: ${error.message}`);
      }
    }
    
  • 建立 RTCPeerConnection

    function createPeerConnection() {
      console.log("create peer connection ...");
      peer = new RTCPeerConnection();
      peer.onicecandidate = handleIceCandidate; // 有新的ICE candidate 時觸發
      peer.ontrack = handleRemoteStream; // connection中發現新的 MediaStreamTrack時觸發
      peer.onnegotiationneeded = handleNegotiationNeeded;
    }
    

    這裡加入了三個event handler:

    • onicecandidate : 當查找到相對應的遠端端口時會透過該事件來處理將 icecandidate 傳輸給 remote peers。
    • ontrack : 完成連線後,透過該事件能夠在發現遠端傳輸的多媒體檔案時觸發,來處理/接收多媒體數據。
    • onnegotiationneeded : 每當 RTCPeerConnection 要進行會話溝通(連線)時,第一次也就是在addTrack後會觸發該事件,
      通常會在此處理createOffer,來通知remote peer與我們連線。
  • 傳送 icecandidate

    function handleIceCandidate(event) {
      socket.emit("icecandidate", event.candidate);
    }
    
  • 獲取新的多媒體數據

    function handleRemoteStream(event) {
      const remoteVideo = document.getElementById("remoteVideo");
      if (remoteVideo.srcObject !== event.streams[0]) {
        remoteVideo.srcObject = event.streams[0];
      }
    }
    
  • 開始交涉(negotiation)

    async function handleNegotiationNeeded() {
      console.log("*** handleNegotiationNeeded fired!");
      try {
        console.log("start createOffer ...");
        await peer.setLocalDescription(await peer.createOffer(offerOptions));
        sendSDPBySignaling("offer", peer.localDescription);
      } catch (error) {
        console.log(`Error ${error.name}: ${error.message}`);
      }
    }
    
  • 關閉連線 closing()

    function closing() {
      console.log("Closing connection call");
      if (!peer) return; // 防呆機制
    
      // 1. 移除事件監聽
      peer.ontrack = null;
      peer.onicecandidate = null;
      peer.onnegotiationneeded = null;
    
      // 2. 停止所有在connection中的多媒體信息
      peer.getSenders().forEach((sender) => {
        peer.removeTrack(sender);
      });
    
      // 3. 暫停video播放,並將儲存在src裡的 MediaStreamTracks 依序停止
      const localVideo = document.getElementById("localVideo");
      if (localVideo.srcObject) {
        localVideo.pause();
        localVideo.srcObject.getTracks().forEach((track) => {
          track.stop();
        });
      }
    
      // 4. cleanup: 關閉RTCPeerConnection連線並釋放記憶體
      peer.close();
      peer = null;
      cacheStream = null;
    }
    

    上述程式用到以下幾個APIs :

總結

搭配Signaling server的整體流程,跟之前單頁式的應用類似,
差別在於,SDP offer/answer以及ICE的溝通方式變動,
以及新認識了一個事件onnegotiationneeded,確保將要進行會話的狀態,幫助我們更順暢的處理RTCPeerConnection連線流程。


上一篇
[實作篇]Signaling Server - Socket.io Events
下一篇
[實作篇]WebRTC - Video Chat 之 事件監聽
系列文
菜雞前端邁入網頁即時通訊(WebRTC)之旅30

尚未有邦友留言

立即登入留言