无法接收其他人的视频流，使用套接字.IO和peer.js

我试图建立点对点视频聊天功能，发现自己卡在这里。我使用peer.js和sockets.io。我无法从具有相同链接的另一个用户/选项卡接收视频。我已经尝试了socket.to(roomId).broadcast.emit('user-connected'，userId)但显示错误-无法读取undefined&quot的属性'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>

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

相关内容

最新更新

热门标签：