前幾篇我們處理了 SDP 與 ICE 的交換，已經達成了連線，接下來只要把遠端視訊顯示出來就好🫶

ontrack

此方法接收一個 RTCTrackEvent 類型的 event 對象，物件將在 MediaStreamTrack被建立時或關聯到已新增至接收集合的 RTCRtpReceiver 物件中時被傳送。

• pc.ontrack 是一個事件處理器，當 WebRTC 的連接通道（Peer Connection）接收到新的媒體流時，就會觸發這個事件
• event.streams[0] 是事件中的一個屬性，它表示收到的媒體流中的第一個流（通常是視訊或音訊流）
• 使用 remoteStream.current.addTrack(track) 將這個軌道添加到 remoteStream.current 中。這意味著將接收到的媒體軌道添加到一個媒體流中
• srcObject使用 remoteStream.current
• joinRoom 也加上相同的 function ，當然也可以 refactor 一下✨

async function createRoom() {
    // 略 ....

    collectIceCandidates(roomRef, pc, "calleeCandidates", "callerCandidates");

    // 將 localStream 中的媒體加入至 pc 中
    localStream.current.getTracks().forEach((track) => {
      pc.addTrack(track, localStream.current);
    });

    // 從事件中取得 streams
    // 檢查是否已經存在 remoteStream，如果存在，將媒體軌道添加到其中
    pc.ontrack = (event) => {
      event.streams[0].getTracks().forEach((track) => {
          remoteStream.current.addTrack(track);
    });
		
		// 將 remoteVideoRef 的 srcObject 設定為 remoteStream
      if (remoteVideoRef.current) {
        remoteVideoRef.current.srcObject = remoteStream.current;
      }
    };
	
	// 略...
}

async function joinRoom(roomId) {
    // 略 ...

    // 創建一個新的 RTCPeerConnection
    if (roomSnapshot.exists() === false) {
	    alert('您輸入的聊天室 id 不存在');
	    return;
	  }
      const pc = new RTCPeerConnection(configuration);

      collectIceCandidates(roomRef, pc, "callerCandidates", "calleeCandidates");

      localStream.current.getTracks().forEach((track) => {
        pc.addTrack(track, localStream.current);
      });
			
      pc.ontrack = (event) => {
        event.streams[0].getTracks().forEach((track) => {
          remoteStream.current.addTrack(track);
        });
        if (remoteVideoRef.current) {
          remoteVideoRef.current.srcObject = remoteStream.current;
        }
      };

	// 略...
}

event.streams 👇

接下來就可以照這個步驟實現雙方的通訊啦~

開啟房間的人: openMedia 👉 create Room
加入房間的人: openMedia 👉 輸入 roomId 👉 join Room

實做到這邊了解了通訊原理也完成了通訊，接下來會完成開關影音訊功能、掛電話的功能，也謝謝大家看到這邊。😊