PeerJS开发视频通话无法加载对方音视频且WebSocket报错求助

开发者阿泽

2026-10-19

问题根因

Socket.IO前后端版本不匹配、配置缺失导致WebSocket握手失败，出现Invalid frame header报错，信令传输中断，无法通知房间内其他用户有新用户加入，所以不会触发拉取对方视频流的逻辑。
PeerJS旧版本存在已知连接bug，加上初始化配置不严谨，导致P2P连接无法正常建立。

修复方案

1. 修复服务端Socket.IO配置

修改server.js中Socket.IO的初始化代码，添加兼容配置：

const io = require('socket.io')(server, {
  // 本地测试可直接开放跨域，生产环境替换为实际业务域名
  cors: {
    origin: "*"
  },
  // 兼容旧版EIO协议，直接解决帧头错误问题
  allowEIO3: true
});

2. 升级PeerJS版本并修正前端配置

把room.ejs中的PeerJS引入地址替换为最新稳定版，修复1.3.1版本的已知连接bug：

<script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>

修正script.js中Peer实例的初始化配置：

const myPeer = new Peer(undefined, {
  host: 'localhost', // 替换原有的'/'，明确指定服务端地址
  port: 3000,
  path: '/peerjs',
});

给Socket.IO初始化添加传输方式兜底，避免连接失败：

const socket = io('/', {
  transports: ['websocket', 'polling']
});

3. 可选：添加异常日志方便排查

在script.js的connectToNewUser函数中添加错误监听，方便定位P2P连接问题：

function connectToNewUser(userId, stream) {
  const call = myPeer.call(userId, stream);
  const video = document.createElement('video');
  call.on('stream', (userVideoStream) => {
    addVideoStream(video, userVideoStream);
  });
  call.on('close', () => {
    video.remove();
  });
  // 新增错误监听
  call.on('error', (err) => {
    console.log('通话连接错误:', err);
  });
}