PeerJS视频通话对方视频无法显示及SourceMap加载404错误问题求助

Hey there! Let's work through your two issues step by step—first the annoying source map warning, then the actual problem of missing remote video feeds.

That warning is totally harmless and won't break your video call functionality. It just means Chrome DevTools can't find the source map file (used for debugging minified code) for the PeerJS library you're loading from unpkg.

If you want to get rid of it, you have two options:

• Download PeerJS locally: Grab the peerjs.min.js and corresponding peerjs.min.js.map file from the PeerJS GitHub repo (match the version you're using, 1.3.1), put them in your public folder, and update the script tag in room.ejs to reference the local file instead of the unpkg URL.
• Ignore it: Since it doesn't affect your app's performance or functionality, you can just leave it be—most developers don't sweat these kinds of warnings unless they're actively debugging the library itself.

This is the real blocker, and there are two key fixes you need to make:

Fix 1: Correct the Socket.io Broadcast Event #

In your server.js, the line that sends the user-connected event has an extra broadcast that's breaking things:

socket.to(roomId).broadcast.emit('user-connected', userId)

In Socket.io, socket.to(roomId).emit() already sends the event to everyone in the room except the current user. Adding broadcast here is redundant and causes the event to not reach the other client at all. Change it to:

socket.to(roomId).emit('user-connected', userId)

Fix 2: Start the PeerJS Signaling Server #

Your frontend code is configured to connect to a PeerJS server on port 3001, but you only started your Express server (on port 3000). PeerJS needs a separate signaling server to handle peer-to-peer connections.

Option A: Run a standalone PeerJS server #

Open a new terminal window and run:

npx peerjs --port 3001

Keep this running alongside your Express server, and your peer connections should start working.

Option B: Integrate PeerJS into your Express server #

If you don't want to run two separate servers, you can embed PeerJS into your existing Express app. Here's how:

1. Install the PeerJS Express package:

   npm install peer
   

2. Update your server.js to include the PeerJS server:

   const express = require('express')
   const app = express()
   const server = require('http').Server(app)
   const io = require('socket.io')(server)
   const { v4: uuidV4 } = require('uuid')
   // Add these lines
   const { ExpressPeerServer } = require('peer')
   const peerServer = ExpressPeerServer(server, {
     debug: true
   })
   
   app.set('view engine', 'ejs')
   app.use(express.static('public'))
   // Mount the PeerJS endpoint
   app.use('/peerjs', peerServer)
   
   // The rest of your server code stays the same...
   

3. Update your script.js to use the integrated PeerJS server:

   const myPeer = new Peer(undefined, {
     host: '/',
     port: '3000',
     path: '/peerjs'
   })
   

Now you only need to run your Express server (node server.js) and PeerJS will work alongside it.

Quick Additional Checks #

• Make sure both clients are using the same room ID (your app redirects to a random UUID on load, so share the exact URL between the two users)
• Verify that both browsers have granted camera/microphone permissions
• Check the browser console for any other errors (like failed Peer connections) to confirm everything is connecting properly

Once you make these changes, your remote video feeds should start showing up as expected!

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