WebRTC（Web Real-Time Communication）可以實現瀏覽器之間的即時音視訊通信，但對於初學者來說，有一定的學習曲線。 特別是在處理 SDP 交換和 ICE 候選資訊收集等過程，可能會覺得複雜，但 Peer.js 透過封裝 WebRTC 的API 簡化了開發的門檻!

Peer.js 介紹

在 MDN **Building an Internet-Connected Phone with PeerJS** 說到 WebRTC 主要問題之一是使用和開發起來非常複雜 - 處理 SDP 並知道何時調用正確的端點可能會令人困惑。而 Peer.js 封裝了 SDP 交換、ICE 候選資訊等底層細節，讓開發人員更專注於應用程式本身的邏輯，而不必深入研究WebRTC的內部機制。

• peer.connect： 建立點對點的連接，讓兩個瀏覽器之間可以直接通信。
• peer.call： 向另一個Peer端發起音視頻即時通訊。 Peer.js會自動處理音視訊串流的傳輸。
• peer.on： Peer 物件支援各種事件的監控回調，包括連線建立、訊息接收等。
• peer.disconnect： 用於斷開連接。
• peer.reconnect： 處理通話中斷，重新建立連接。
• peer.destroy： 完全銷毀Peer對象，釋放所有資源並終止連線。

範例

1. 創建 Peer

   const peer = new Peer(); // 創建 Peer 對象
   

2. 設定 Peer 事件監聽器

   peer.on("open", (id) => {
     // 當 Peer 成功打開時
     console.log(`Your peer ID is: ${id}`);
   });
   
   peer.on("connection", (connection) => {
     // 當有端建立連接時
     console.log("Connected to a peer!");
   });
   

3. 建立連接

   // 創建一個連接到對等端的 connection 對象
   const connection = peer.connect("目標對等端的ID");
   
   // 監聽連接的事件
   connection.on("open", () => {
     // 當連接打開時，可以進行數據傳輸
     console.log("Connection opened!");
   });
   
   // 傳送數據到其他對等端
   connection.send("Hello, peer!");
   

4. 接受連接請求

   // 監聽連接請求
   peer.on("connection", (connection) => {
     // 接受連接請求
     connection.on("data", (data) => {
       // 接收來自其他對等端的數據
       console.log("Received data: " + data);
     });
   
     // 回覆數據到其他對等端
     connection.send("Hello back!");
   });
   

有興趣實作可以參考MDN上的教學

Connect Peers

1. Get Microphone Permission
2. Showing and hiding HTML
3. Create a Peer Connection
4. Creating a Call
5. Answer a Call
6. End a Call

參考資料
用 Peer.js 愉快上手 P2P 通信 - 掘金 (juejin.cn)
PeerJS - Simple peer-to-peer with WebRTC
利用peerjs轻松玩转webrtc - 菩提树下的杨过 - 博客园 (cnblogs.com)