无法接收另一个人的视频流，使用 socket.io 和 peer.js
Posted
技术标签:
【中文标题】无法接收另一个人的视频流，使用 socket.io 和 peer.js【英文标题】：Not able to receive video stream of another person, using socket.io and 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 2051const 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>【问题讨论】：
【参考方案1】：应该是socket.broadcast.to(roomId).emit('user-connected',userId) 而不是
socket.to(roomId).broadcast.emit('user-connected',userId)
【讨论】：
以上是关于无法接收另一个人的视频流，使用 socket.io 和 peer.js的主要内容，如果未能解决你的问题，请参考以下文章