使用socket.io与peer.js开发视频通话无法接收对方视频流求助

报错原因 #

你出现Cannot read property 'emit' of undefined报错是因为socket.io的广播语法使用错误：socket.to(roomId).broadcast.emit不符合API规范，socket.to(roomId)返回的对象不存在broadcast属性，因此调用emit时会抛出undefined错误。

同时你当前的代码存在两个逻辑问题，也会导致收不到其他用户的视频：

• 你直接使用socket.emit('user-connected',userId)只会将事件发送给当前连接的用户自身，房间内其他用户收不到新用户加入的通知，不会发起peer连接拉取视频流
• 下线通知的emit同样只发给了自己，其他用户感知不到有人退出
• 前端peer初始化端口和你注释标注的peer服务端口不一致，如果实际peer服务跑在2051，前端写的3051会导致peer连接失败

修复方案 #

1. 修正服务端socket逻辑 #

将服务端的连接事件逻辑替换为以下代码：

io.on('connection',socket=>{
    socket.on('join-room',(roomId,userId)=>{
        socket.join(roomId)
        // 给房间内除当前用户外的所有人广播新用户加入事件
        socket.broadcast.to(roomId).emit('user-connected',userId)

        socket.on('disconnect',()=>{
            // 给房间内除当前用户外的所有人广播用户下线事件
            socket.broadcast.to(roomId).emit('user-disconnected',userId)
        })
    })
})

2. 校验peer服务端口 #

确认你启动的peer server实际端口，和前端myPeer初始化的port参数保持一致：

const myPeer = new Peer(undefined,{
    host:'/',
    port:'2051' // 和实际peer服务端口对应即可
})

修复完成后重启服务，打开两个标签页进入同一个房间链接，即可正常显示双方的视频画面。

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