Express+React开发WebRTC音视频项目抛Object prototype类型错误如何解决

错误原因与修复方案 #

你遇到的TypeError: Object prototype may only be an Object or null错误，结合代码和配置，触发原因和修复步骤如下：

1. 核心原因：Socket.IO前后端版本不兼容

你服务端依赖的socket.io版本为2.3.0，而前端未指定socket.io-client版本，默认安装的3.x/4.x版本与2.x服务端协议不兼容，是触发该原型错误的最常见诱因。
修复方式：在前端项目目录执行命令安装匹配版本的客户端

npm install socket.io-client@2.3.0

2. 硬编码连接地址错误

代码中写死了io.connect("localhost:8080")，部署到Heroku后前端无法连接本地地址，会连带触发Peer实例初始化异常。
修复方式：改用动态地址适配开发/线上环境

// 替换原socket连接代码
const socketUrl = process.env.NODE_ENV === 'production' ? window.location.origin : 'http://localhost:8080';
socketRef.current = io.connect(socketUrl);

3. 代码语法错误

你编写的音视频控制函数存在引用错误，也可能连带触发实例异常：

• userVideo是useRef创建的引用对象，需要通过.current访问DOM节点对应的媒体流
• 关闭视频函数错误引用了isAudio变量
  修复方式：替换对应函数代码，暂不使用也可以直接删除

function muteAudio() {
  isAudio = !isAudio;
  userVideo.current.srcObject.getAudioTracks()[0].enabled = isAudio;
}

function muteVideo() {
  isVideo = !isVideo;
  userVideo.current.srcObject.getVideoTracks()[0].enabled = isVideo;
}

4. 其他潜在问题

• 若使用React Router v6，原代码中props.match.params.roomID已失效，需要改用useParams()钩子获取路由参数，参数为undefined会触发房间加入逻辑异常
• 服务端需要配置Socket.IO跨域规则，避免前端连接被拦截：

// 服务端socket初始化时添加CORS配置
const io = require('socket.io')(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

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