WebRTC 實戰 (6) —— 使用 PeerJS 簡化開發流程
在新理解底層原理後,現在是時候「換上現代化裝備」了。在真實的生產環境中,我們通常會使用成熟的框架來提升開發效率。而 PeerJS 正是其中的佼佼者。
一、 PeerJS 解決了什麼問題?
PeerJS 為 WebRTC 提供了一層優雅的抽象,它幫你處理了最頭痛的三件事:
- 信令 (Signaling):內建信令邏輯,甚至提供免費雲端伺服器。
- ID 管理:為每個使用者分配唯一 ID,撥號超簡單。
- 封裝協商:自動處理 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:
bash
npm install peer -g
peerjs --port 9000 --path /myapp總結
PeerJS 簡化了 WebRTC 的開發負擔,讓你能快速實現一對一影音與數據傳輸。下一篇,我們將針對「信令機制的正式封裝」做更深入的探討。
️ 進階挑戰
試著利用 PeerJS 製作一個簡單的「隨機聊天室」。
- 使用者進入頁面後,自動獲取一個 ID。
- 將此 ID 存放至後端的 List 中。
- 當另一個使用者進入時,從 List 中隨機挑選一個 ID 並發起撥號。
延伸閱讀與資源
- Official Doc: PeerJS Documentation
- GitHub: PeerServer