跳至主要內容
日沐 SunBathe

Appearance

WebRTC 實戰 (6) —— 使用 PeerJS 簡化開發流程 ​

在理解底層原理後，可以用成熟的函式庫降低一對一連線的開發成本。PeerJS 封裝了 Peer ID、信令與常見協商流程，適合原型與小型應用。

一、 PeerJS 解決了什麼問題？ ​

PeerJS 為 WebRTC 提供了一層優雅的抽象，它幫你處理了最頭痛的三件事：

  1. 信令 (Signaling)：內建信令邏輯，甚至提供免費雲端伺服器。
  2. ID 管理：為每個使用者分配唯一 ID，撥號超簡單。
  3. 封裝協商：自動處理 SDP 交換流程。

二、 快速上手：10 行程式碼實現通話 ​

1. 初始化 ​

javascript
const peer = new Peer(); 
peer.on('open', (id) => console.log('我的 ID 是: ' + id));

2. 發起通話 (Caller) ​

javascript
const call = peer.call('recipient-id', localStream);
call.on('stream', (remoteStream) => remoteVideo.srcObject = remoteStream);

3. 接收通話 (Callee) ​

javascript
peer.on('call', (call) => {
  call.answer(localStream); 
  call.on('stream', (remoteStream) => remoteVideo.srcObject = remoteStream);
});

三、 部署自己的信令伺服器 (PeerServer) ​

正式環境通常會自行架設 PeerServer，以控制可用性、網域與連線紀錄。PeerServer 只負責信令，不會取代 TURN：

bash
npm install peer
javascript
const { PeerServer } = require("peer");

PeerServer({
  port: 9000,
  path: "/myapp",
});

客戶端必須指向自架伺服器，並在 config.iceServers 中加入正式的 TURN 設定：

javascript
const peer = new Peer({
  host: "localhost",
  port: 9000,
  path: "/myapp",
  secure: false,
  config: {
    iceServers: [
      { urls: "stun:stun.example.com" },
      {
        urls: "turns:turn.example.com:443",
        username: turnUsername,
        credential: turnCredential,
      },
    ],
  },
});

總結 ​

PeerJS 適合快速完成一對一影音與資料傳輸。下一篇改走另一條路線：不依賴 PeerJS 的 Peer ID 與信令服務，自行設計可驗證、可管理的房間信令協定。

進階挑戰 ​

試著利用 PeerJS 製作一個簡單的「隨機聊天室」。

  1. 使用者進入頁面後，自動獲取一個 ID。
  2. 將此 ID 存放至後端的 List 中。
  3. 當另一個使用者進入時，從 List 中隨機挑選一個 ID 並發起撥號。

延伸閱讀與資源 ​

← 上一章：Data Channel | 返回專題首頁 | 下一章：信令機制的正式封裝