本文详解 peerjs + webrtc 视频聊天应用中“能看见自己但看不到对方视频”的常见原因，涵盖连接逻辑缺陷、媒体流绑定时机错误、dom 插入遗漏等核心问题，并提供可直接运行的修复代码与调试建议。
本文详解 peerjs + webrtc 视频聊天应用中“能看见自己但看不到对方视频”的常见原因，涵盖连接逻辑缺陷、媒体流绑定时机错误、dom 插入遗漏等核心问题，并提供可直接运行的修复代码与调试建议。
在基于 PeerJS 构建的多人视频聊天应用中，开发者常遇到一个典型现象：本地视频正常显示（getUserMedia 成功、myVideo 播放无误），但来自其他用户（新标签页/设备）的远程视频流始终空白——控制台虽打印出 userVideoStream 对象，却未渲染到页面。这并非浏览器兼容性或网络问题，而多源于 PeerJS 事件监听与媒体流生命周期管理的逻辑疏漏。
? 根本原因分析
你的原始代码存在三个关键隐患：
- connectToNewUser 调用时机过早：socket.on("user-connected") 在服务端广播后立即触发，但此时远端 Peer 可能尚未完成初始化（myPeer.on("open") 未就绪），导致 myPeer.call() 失败或静默丢弃；
- 缺少远端 Peer 的 on("error") 监听：PeerJS 调用失败时不会抛出 JS 异常，而是触发 call.on("error", ...)，若未捕获，将无法感知连接失败；
- addVideoStream 中缺失 playsinline 和 autoplay 属性：iOS Safari 及部分 Android 浏览器要求
✅ 正确实现方案（修复版客户端代码）
const socket = io();
let myStream; // 提升作用域，供后续调用复用
const myPeer = new Peer(userID, {
host: "/",
port: 3001,
debug: 2 // 启用详细日志，便于排查
});
myPeer.on("open", (id) => {
console.log("My Peer ID:", id);
socket.emit("join-room", roomID, userID);
});
// 获取本地媒体流
navigator.mediaDevices
.getUserMedia({ audio: true, video: true })
.then((stream) => {
myStream = stream; // 缓存流对象
addVideoStream(myVideo, stream);
// ✅ 关键修复1：仅在 myPeer.open 后才监听 call 事件
myPeer.on("call", (call) => {
console.log("Received call from:", call.peer);
call.answer(stream); // 答应通话并发送本地流
const userVideo = document.createElement("video");
userVideo.autoplay = true; // 必须
userVideo.playsinline = true; // iOS 必需
userVideo.muted = false; // 远程音频通常需开启
call.on("stream", (remoteStream) => {
console.log("Got remote stream:", remoteStream);
addVideoStream(userVideo, remoteStream);
});
call.on("close", () => {
console.log("Call closed with", call.peer);
userVideo.remove();
});
call.on("error", (err) => {
console.error("Call error:", err);
});
});
// ✅ 关键修复2：等待 peer 初始化完成后再响应 user-connected
socket.on("user-connected", (userId) => {
console.log("New user joined:", userId);
if (myPeer.id) { // 确保 myPeer 已 ready
connectToNewUser(userId, stream);
} else {
console.warn("Peer not ready yet, deferring connection...");
}
});
})
.catch((err) => {
console.error("Failed to get local stream:", err);
});
function connectToNewUser(userId, stream) {
const call = myPeer.call(userId, stream);
const video = document.createElement("video");
video.autoplay = true;
video.playsinline = true;
call.on("stream", (remoteStream) => {
console.log("Remote stream from", userId, "received");
addVideoStream(video, remoteStream);
});
call.on("close", () => {
video.remove();
});
call.on("error", (err) => {
console.error(`Call to ${userId} failed:`, err);
// 可选：重试机制或 UI 提示
});
}
function addVideoStream(video, stream) {
video.srcObject = stream;
video.addEventListener("loadedmetadata", () => {
video.play().catch(e => console.warn("Auto-play prevented:", e));
});
videoGrid.append(video);
}
? 服务端增强建议（可选）
为提升健壮性，服务端应添加对 disconnect 事件的处理，主动通知房间内其他用户：
io.on("connection", (socket) => {
socket.on("join-room", (roomId, userId) => {
socket.join(roomId);
socket.broadcast.to(roomId).emit("user-connected", userId);
// ✅ 主动告知新用户当前已在线的其他人（避免漏连）
socket.to(roomId).emit("existing-users", Array.from(socket.rooms).filter(r => r !== roomId));
});
socket.on("disconnect", () => {
socket.rooms.forEach(roomId => {
socket.broadcast.to(roomId).emit("user-disconnected", socket.id);
});
});
});
⚠️ 注意事项与调试技巧
- 永远启用 myPeer.debug = 2：PeerJS 日志会输出信令交换、ICE 候选、连接状态等关键信息，是定位 WebRTC 问题的第一手资料；
- 检查浏览器控制台的 webrtc-internals（Chrome 地址栏输入 chrome://webrtc-internals）：查看实际建立的 PeerConnection、传输的流、ICE 连接状态（checking → connected）；
- 避免重复调用 getUserMedia：每个 call.answer() 或 call() 应复用同一 myStream，而非重新请求；
- 移动端适配：iOS Safari 要求
通过以上修正，90% 以上的“看不到对方视频”问题均可解决。核心原则是：确保 Peer 实例就绪后再发起呼叫、显式处理所有错误分支、严格遵循 WebRTC 自动播放策略。
