基于Node.js的Zoom克隆：无法显示参会者视频问题求助

Hey there! Let's figure out why other users' videos aren't showing up in your Zoom clone. I went through your code and found a couple of small but critical issues that are probably causing this problem. Let's fix them one by one:

1. PeerJS Port & Path Mismatch #

In your server.js, you've set up the PeerJS server on the same Express server running on port 3035, with the path /peerjs. But in script.js, your Peer instance is pointing to port 3031 and missing the correct path. This means your client can't properly connect to the PeerJS server to handle calls.

Fix in script.js:

// Replace your Peer initialization with this
var peer = new Peer(undefined, {
  host: '/',
  port: '3035', // Match your server's running port
  path: '/peerjs' // Match the path configured in server.js
})

2. Incorrect Socket.io Broadcast Syntax #

In server.js, you're using socket.to(roomId).broadcast.emit which is redundant. The socket.to(roomId) method already sends events to everyone in the room except the current socket. Adding broadcast here breaks the intended event delivery.

Fix in server.js:

io.on('connection', socket => {
  socket.on('join-room' , (roomId,userId) => {
    socket.join(roomId);
    // Remove the extra .broadcast
    socket.to(roomId).emit('user-connected',userId);
  })
})

3. Typo in Function Name (Case Sensitivity) #

You have two versions of the video stream function: addVideostream (lowercase 's') and addVideoStream (uppercase 'S'). JavaScript is case-sensitive, so when you call addVideoStream(video, userVideoStream) in some handlers, it's looking for a function that doesn't exist (since you defined it with a lowercase 's').

Fix in script.js:
Unify the function name to use consistent casing (we'll use addVideoStream here):

// Update the function definition
const addVideoStream = (video,stream) =>{
  video.srcObject = stream;
  video.addEventListener('loadedmetadata',() => {
    video.play();
  })
  videoGrid.append(video);
}

// Update all calls to use the correct name:
// In the getUserMedia handler
addVideoStream(myVideo,stream)

// In the peer.on('call') handler
addVideoStream(video, userVideoStream)

// In the connectToNewUser function
addVideoStream(video, userVideoStream)

Once you apply these fixes, your app should start displaying other users' videos correctly. Here's a quick recap of why these work:

• The corrected PeerJS configuration ensures your client connects to the right server, so call signals can be exchanged properly.
• The fixed socket.io broadcast ensures that when a new user joins, all existing users in the room receive the user-connected event.
• Fixing the function name typo guarantees that remote video streams are actually added to the DOM when received.

内容的提问来源于stack exchange，提问作者ImAlsoAnDeveloper