无法接收另一个人的视频流，使用 socket.io 和 peer.js答案

【问题标题】：Not able to receive video stream of another person, using socket.io and peer.js无法接收另一个人的视频流，使用 socket.io 和 peer.js
【发布时间】：2021-10-31 06:48:14
【问题描述】：

我正在尝试构建点对点视频聊天功能，但发现自己被困在这里。我正在使用 peer.js 和 sockets.io。我无法从具有相同链接的另一个用户/标签接收视频。我试过 socket.to(roomId).broadcast.emit('user-connected',userId) 但显示错误-“无法读取未定义的属性'emit'” 请帮忙！

//const { SSL_OP_NO_TICKET } = require('constants');
const express=require('express');
const app=express();
const server=require('http').Server(app)
const io=require('socket.io')(server)
const {v4:uuidV4}=require('uuid')

app.set('view engine','ejs')
app.use(express.static('public'))

app.get('/',(req,res)=>{
    res.redirect(`/${uuidV4()}`)
})
app.get('/:room',(req,res)=>{
    res.render('room',{roomId:req.params.room})
})

io.on('connection',socket=>{
    socket.on('join-room',(roomId,userId)=>{
        socket.join(roomId)
        socket.emit('user-connected',userId)    // have tried socket.to(roomId).broadcast.emit('user-connected',userId) but throwing error-'Cannot read property 'emit' of undefined'

        socket.on('disconnect',()=>{
            socket.emit('user-disconnected',userId)
        })
    })
})

server.listen(3050);
//peer server at 2051

const socket=io('/')
const videoGrid=document.getElementById("video-grid")
const myPeer = new Peer(undefined,{
    host:'/',
    port:'3051'
})

const myVideo=document.createElement('video')
myVideo.muted=true;

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

    myPeer.on('call',call=>{
        call.answer(stream)
        const video=document.createElement('video')
        call.on('stream',userVideoStream=>{
            addVideoStream(video,userVideoStream)
        })
    })

    socket.on('user-connected',userId=>{
        connectToNewUser(userId,stream)
    })
})

socket.on('user-disconnected',userId=>{
    console.log(userId)
})

myPeer.on('open',id=>{
    
    socket.emit('join-room',ROOM_ID,id)
})

socket.on('user-connected',userId=>{
    console.log('User Connected: '+ userId)
})

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();
    })
}

function addVideoStream(video,stream){
    video.srcObject=stream;
    video.addEventListener('loadedmetadata',()=>{
        video.play()
    })
    videoGrid.append(video)
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script>
        const ROOM_ID= "<%=roomId%>"
    </script>
    
    <script defer src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
    <script src="/socket.io/socket.io.js" defer></script>
    <script src="script.js" defer></script>
    <title>Zoom_RJ</title>
</head>

<style>
    #video-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill,300px);
        grid-auto-rows: 300px;
    }

    video{
        width:100%;
        height: 100%;
        object-fit: cover;
    }

</style>

<body>
    <div id="video-grid"></div>
</body>
</html>

【问题讨论】：

标签： node.js socket.io peerjs

【解决方案1】：

应该是socket.broadcast.to(roomId).emit('user-connected',userId) 而不是 socket.to(roomId).broadcast.emit('user-connected',userId)

【讨论】：