我尝试使用nodejs创建缩放克隆，我已成功在网页中显示我的视频，并为每个加入链接的人创建了id，但在主页中显示加入的人时不起作用。
我使用peerjs库来调用用户并将其显示在网页中。
服务器.js
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const {v4:uuidv4} = require('uuid');
const { ExpressPeerServer} = require('peer');
const peerServer = ExpressPeerServer(server, {
debug:true
});
const { response } = require('express');
app.use('/peerjs',peerServer);
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.to(roomId).broadcast.emit('user-connected',userId);
})
})
server.listen(3035);
房间.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom CLone</title>
<script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
const ROOM_ID = "<%= roomId %>"
</script>
<style>
#video-grid{
display: flex;
justify-content: center;
}
video{
height: 300px;
width: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<div id="video-grid"></div>
<script src="script.js"></script>
</body>
</html>
script.js
const socket = io('/')
const videoGrid = document.getElementById('video-grid');
const myVideo=document.createElement('video');
myVideo.muted = true;
var peer = new Peer(undefined, {
host:'/',
port:'3031'
})
// const peer = new Peer(undefined, {
// path: '/peerjs',
// host: '/',
// port: '3001'
// })
peer.on('open',id => {
socket.emit('join-room', ROOM_ID, id);
})
let myVideoStream
navigator.mediaDevices.getUserMedia({
video:true,
audio:true
}).then(stream => {
myVideoStream=stream;
addVideostream(myVideo,stream)
peer.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);
})
})
const connectToNewUser = (userId, stream) => {
const call = peer.call(userId, stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideostream(video, userVideoStream)
})
call.on('close', () => {
video.remove()
})
}
const addVideostream = (video,stream) =>{
video.srcObject = stream;
video.addEventListener('loadedmetadata',() => {
video.play();
})
videoGrid.append(video);
}
代码中也没有错误，我也在控制台中检查过。 唯一的问题是与链接视频相关的人没有显示在主页（主持人）上。
我正在从事同一个项目，我认为当用户加入频道时，他/她的视频不会显示在主机屏幕上的原因是因为 script.js 中的 getUserMedia 中存在
audio: truenavigator.mediaDevices.getUserMedia({
video:true,
audio:true
})
所以如果你把它改成 false，这个问题就解决了，第二个人的视频也会在那里看到，但另一个问题就会出现，那就是你们将无法通过音频进行交流。我还没有找到解决方案，但如果其他人找到了，请告诉我。
您的代码看起来不错，没有错误，但在您的 script.js 中，您需要包含
路径：“/peerjs”
并且端口号应该与正在侦听的服务器相同，因此应该是 3035 而不是 3031，您的代码应该如下所示：
var peer = new Peer(undefined, {
path: "/peerjs",
host: "/",
port: "3035",
});
还可以尝试删除 connectToNewUser 函数中的这一行
call.on('close', () => {
video.remove()
})
有时会因为网络连接不佳而发生这种情况，因此您需要不断刷新浏览器才能看到实时视频的变化。
希望这有帮助。有关 peerjs 库的更多信息，请查看其官方网站。
我创建了类似的项目，其中有相同的代码和额外的功能，您可以参考我的 git 存储库 来比较您的代码。
改变 对端端口：“3031” 到 端口：“443” 或者是其他东西 然后当你将它部署到在线服务器时它就会正常工作
我可能迟到了，但我遇到了同样的问题 尝试改变
socket.on('user-connected',(userId) => {
connectToNewUser(userId, stream);
})
}）
与
socket.on('user-connected', userId => {
// user is joining`
setTimeout(() => {
// user joined
connectToNewUser(userId, stream)
}, 1000)
})
})
这对我有用
https://medium.com/nerd-for-tech/full-stack-zoom-clone-943289af8f7d 这篇文章很好地解释了peerjs和你的问题