基于PeerJS、Socket.io的Node.js WebRTC聊天应用视频不显示求助

问题排查与修复方案 #

1. 优先修复核心未定义变量问题 #

你提供的代码中存在多处未定义的全局变量，会直接导致JS执行中断，视频逻辑完全无法运行：

• 缺少socket实例初始化，在script.js最开头添加：

const socket = io();

• 缺少视频容器、本地视频元素、用户变量定义，继续在开头添加：

const videoGrid = document.getElementById('video-grid');
// 本地视频默认静音，既避免回声，也符合浏览器自动播放策略要求
const myVideo = document.createElement('video');
myVideo.muted = true;
// 补充user变量定义，可根据你的业务逻辑替换成实际用户昵称获取逻辑
const user = "默认用户名";

2. 修复PeerJS连接配置错误 #

当前前端PeerJS配置写死了127.0.0.1:9000，如果你的Express服务没有运行在9000端口、或者跨设备测试时，会完全连不上Peer服务，修改配置为自动适配当前运行环境：

var peer = new Peer({
   path: "/peerjs",
   host: window.location.hostname,
   port: window.location.port,
});

3. 修复事件监听时序问题 #

当前socket.on('user-connected')监听逻辑写在getUserMedia的异步回调里，如果Peer连接、用户加入房间的速度快于摄像头权限申请和流获取的速度，会直接漏掉新用户加入的通知，导致不会发起视频呼叫。
将监听逻辑移到全局位置，同时判断流是否已经获取成功再执行呼叫：

let myVideoStream;
// 移到getUserMedia外层
socket.on("user-connected", (userId) => {
  if (myVideoStream) {
    connectToNewUser(userId, myVideoStream);
  }
});

navigator.mediaDevices
  .getUserMedia({
    audio: true,
    video: true,
  })
  .then((stream) => {
    myVideoStream = stream;
    addVideoStream(myVideo, stream);

    peer.on("call", (call) => {
      call.answer(stream);
      const video = document.createElement("video");
      call.on("stream", (userVideoStream) => {
        addVideoStream(video, userVideoStream);
      });
    });
  });

4. 补充视频播放异常捕获 #

浏览器自动播放策略可能会阻止非静音视频自动播放，添加异常捕获方便排查问题：

const addVideoStream = (video, stream) => {
  video.srcObject = stream;
  video.addEventListener("loadedmetadata", async () => {
    try {
      await video.play();
      videoGrid.append(video);
    } catch (err) {
      console.error("视频播放失败：", err);
    }
  });
};

5. 常规排查手段 #

如果修改后依旧无法正常显示，打开浏览器控制台查看报错：

• 检查摄像头、麦克风权限是否被用户拒绝
• 检查PeerJS是否成功连接到服务端，有没有404、连接超时报错
• 检查两端呼叫逻辑是否触发，有没有user-connected事件接收日志

内容的提问来源于stack exchange，提问作者Quan Nguyen