如何解决当有人加入服务器时,我无法看到其他人的视频
我尝试使用 nodejs 创建缩放克隆我已经成功地在网页中显示了我的视频并为每个加入链接的人创建了 id 但它没有显示加入的人视频
client.js
const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myVideo = document.createElement('video');
myVideo.muted = true;
var peer = new Peer(undefined,{
path : "/peerjs",host : '/',// host either be heroku or whatever
port : '3030'
})
peer.on('open',id => {
socket.emit('join-room',RoomID,id)
})
let myVideoStream
navigator.mediaDevices.getUserMedia({
video : true,audio: false
}).then(stream => {
myVideoStream = stream;
console.log('my video')
addOurVideoStream(myVideo,stream);
peer.on('call',call => {
const video = document.createElement('video')
console.log('working')
call.answer(stream); // Answer the call with an A/V stream.
call.on('stream',userVideoStream => {
console.log('succesfully answer')
addUserVideoStream(video,userVideoStream)
});
});
socket.on('user-connected',(userId)=> {
console.log(userId)
connectToNewUser(userId,stream);
})
});
const connectToNewUser = (userId,stream) => {
console.log('connect to new user')
const call = peer.call(userId,stream);
console.log('sucess')
const video = document.createElement('video')
call.on('stream',userVideoStream => {
console.log('succesfully call')
addUserVideoStream(video,userVideoStream)
})
call.on('close',() => {
video.remove()
})
}
const addOurVideoStream = (video,stream) => {
video.srcObject = stream;
video.addEventListener('loadedMetadata',()=> {
video.play();
})
videoGrid.append(video)
}
const addUserVideoStream = (video,() => {
video.play()
})
videoGrid.append(video)
}
服务器端的app.js
const express = require('express');
const app = express();
const { v4: uuidv4 } = require('uuid') ;
const server = require('http').Server(app);
const io = require('socket.io')(server)
const { ExpresspeerServer } = require('peer');
const peerServer = ExpresspeerServer(server,{
debug: true
});
app.set('view engine','ejs');
app.use(express.static('public'));
app.use('/peerjs',peerServer)
app.get('/',(req,res,next) => {
res.redirect(`/${uuidv4()}`)
})
app.get('/:room',next) => {
const roomId = req.params.room
res.render('room',{
roomId : roomId
})
// console.log(roomId)
})
io.on('connection',socket => {
socket.on('join-room',(roomID,userId) => {
socket.join(roomID)
socket.to(roomID).broadcast.emit('user-connected',userId)
})
socket.on('error',(err) => {
console.log(err)
})
})
server.listen(3030,() => {
console.log('connected')
})
room.ejs
<!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">
<link rel="stylesheet" href="style.css">
<script>
const RoomID = "<%= roomId %> "
</script>
<script src="/socket.io/socket.io.js"></script>
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
<title>Zoom Clone</title>
</head>
<body>
<div id="video-grid">
</div>
<script src="script.js"></script>
</body>
</html>
解决方法
我认为 client.js 文件中缺少两段代码!
var getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
您应该在 Peer 对象创建下方添加此代码,如下所示:(我不确定为什么要添加此代码,但在添加此代码之前,我的代码无法正常工作。)
const peer = new Peer(undefined,{
host:"/",port:"3030",path:"/peerjs"
})
var getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
另外,你必须创建方法来接收调用 到目前为止,您已经创建了只向您显示视频的方法。要创建一个在屏幕上显示其他人视频的方法,请添加以下代码:
peer.on("call",function(call){
getUserMedia({
video:true,audio:true
},function(stream){
call.answer(stream);
const video = document.createElement("video");
call.on("stream",function (remoteStream) {
addVideoStream(video,remoteStream);
});
},function(err){
console.log(err);
})
})
我希望它现在可以工作! 谢谢!
,try and replace
socket.on('user-connected',(userId)=> {
console.log(userId)
connectToNewUser(userId,stream);
})
with
socket.on('user-connected',userId => {
// user is joining`
setTimeout(() => {
// user joined
connectToNewUser(userId,stream)
},1000)
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。