如何用 PeerJS 快速开发 WebRTC 视频通话从呼叫到接听的完整指南【免费下载链接】peerjsSimple peer-to-peer with WebRTC.项目地址: https://gitcode.com/gh_mirrors/pe/peerjsPeerJS 是一个基于 WebRTC 的点对点库让浏览器之间的视频通话和数据传输变得异常简单。本文将带你一步步学会用 PeerJS 发起呼叫、接听来电并完成一段真实的 WebRTC 视频通话全程代码极少、上手超快非常适合新手。 为什么选择 PeerJS原生 WebRTC 的信令过程非常繁琐需要自己搭建服务器交换 SDP 与 ICE 候选代码动辄上百行。PeerJS 把这一切封装好了一行代码建立连接peer.call(id, stream)即可发起媒体通话自动信令内置 PeerServer 负责注册、查找和转发呼叫信令双通道支持既能传视频/音频流也能发数据消息核心能力实现位于 lib/peer.ts 的call方法与 lib/mediaconnection.ts 的answer方法中。 第一步安装与引入 PeerJS在项目根目录运行npm install peerjs然后在代码中导入import { Peer } from peerjs;安装后你就拥有了完整的 P2P API。官方也提供了 e2e/ 目录下的端到端示例可参考其中的页面结构。 第二步创建 Peer 实例获取你的唯一 ID每位参与者都需要一个唯一 ID 来被对方寻址。创建Peer实例时传入 ID或省略让服务端随机分配const peer new Peer(my-unique-id); peer.on(open, (id) { console.log(我的 ID:, id); });这里的 ID 就是呼叫对方的电话号码。ID 的校验规则可参见 lib/utils/validateId.ts。 第三步发起呼叫呼叫对方呼叫分两小步先拿到自己的摄像头/麦克风画面再用peer.call()发起媒体通话。navigator.mediaDevices.getUserMedia({ video: true, audio: true }, (stream) { // 先把自己画面挂到自己的 video 上本地预览 const localVideo document.querySelector(#localVideo); localVideo.srcObject stream; const call peer.call(对方的ID, stream); // 对方接听后收到对方的视频流 call.on(stream, (remoteStream) { document.querySelector(#remoteVideo).srcObject remoteStream; }); call.on(close, () { alert(通话已挂断); }); }, (err) { console.error(获取本地流失败, err); });peer.call()的实现位于 lib/peer.ts它会创建一个MediaConnection并自动处理全部信令握手。 第四步接听来电被呼叫方只需监听call事件。当有人呼叫时同样先获取本地媒体流再调用call.answer(stream)peer.on(call, (call) { navigator.mediaDevices.getUserMedia({ video: true, audio: true }, (stream) { // 把本地预览显示给自己 document.querySelector(#localVideo).srcObject stream; // 关键一步用本地流应答来电 call.answer(stream); // 收到对方的视频流显示到画面里 call.on(stream, (remoteStream) { document.querySelector(#remoteVideo).srcObject remoteStream; }); }); });call事件的触发逻辑在 lib/peer.ts即服务端将呼叫信令转发到本机后自动emit(call)。answer方法定义于 lib/mediaconnection.ts接受一个可选的本地MediaStream。小技巧来电响铃时建议先用call.peer属性展示谁在呼叫再弹出接听/挂断 UI。 完整流程一图看懂Alice创建Peer拿到 IDBob创建Peer拿到 IDAlice调用peer.call(bobId, aliceStream)发起呼叫Bob的peer.on(call)被触发拿到call对象Bob调用call.answer(bobStream)应答双方通过call.on(stream)拿到对方视频绑定到video元素通话中可通过call.close()挂断⚠️ 常见问题速查现象原因与解决呼叫无反应检查对方 ID 是否正确、对方是否在线peer.on(open)是否已触发提示 Failed to get local stream浏览器未授权摄像头/麦克风需在 HTTPS 或 localhost 下运行视频黑屏但有声音忘记把remoteStream赋值到video.srcObject连接失败报unavailable-idID 冲突换一个唯一 ID 或让服务端随机分配错误类型枚举可参考 lib/peerError.ts。 延伸不只是视频通话PeerJS 同样支持纯数据连接。在拿到视频通话的基础上你还能用peer.connect(id)建立一条DataConnection用于发送文字消息、共享屏幕、文件传输等实现见 lib/dataconnection/DataConnection.ts。总结用new Peer(id)获取自己的唯一身份用peer.call(id, stream)呼叫对方用peer.on(call)call.answer(stream)接听来电双方监听call.on(stream)显示对方画面整个视频通话的核心逻辑不到 30 行代码。现在就去 e2e/ 目录看看官方示例动手跑通你的第一个 P2P 视频通话吧【免费下载链接】peerjsSimple peer-to-peer with WebRTC.项目地址: https://gitcode.com/gh_mirrors/pe/peerjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考