当有人加入服务器时，我无法看到其他人的视频答案

【问题标题】：I am not able to see other person video when someone joins server当有人加入服务器时，我无法看到其他人的视频
【发布时间】：2021-05-21 03:51:55
【问题描述】：

我尝试使用 nodejs 创建缩放克隆我已成功在网页中显示我的视频并为每个加入链接的人创建了 ID，但它没有显示加入的人视频

我正在使用 peerjs 库来调用用户并在网页中显示他

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,stream) => {
        video.srcObject = stream;
        video.addEventListener('loadedmetadata', () => {
            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', (req,res,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>

【问题讨论】：

标签： node.js video stream webrtc peer

【解决方案1】：

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

【讨论】：

请解释您的答案，以便下一位用户知道为什么此解决方案对您有效。

【解决方案2】：

我认为 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);
  })
})

我希望它现在可以工作！谢谢！

【讨论】：

它与网络到网络完美配合，但我无法从手机观看视频？