Question

我尝试使用 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>

Answer 1

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

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

Answer 2

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 个答案: