Javascript peer.js无法连接到视频聊天应用程序中的第一台计算机

我正在尝试创建一个基于使用peer.js的教程的简单视频聊天应用程序。 我在Glitch上主持它：

活动链接： 代码：

peer.js服务器托管在Heroku上…我在运行它时遇到问题

当您跟随主链接并将带有网络摄像头流的视频对象添加到页面时，服务器会创建一个“/room”（生成一个随机的4位数）

如果其他人去同一个房间（），房间里的任何人都应该“呼叫”他们，交换流，并用新的流创建一个新的视频对象-这个get被添加到页面中，并用他们的网络摄像头放置在原始视频元素旁边。从理论上讲，更多的人可以进来，更多的视频元素与每个人的流一起被添加

如果我使用chrome从两个单独的标签页进入页面进行测试，这会非常好…我的视频流会翻倍，翻倍，等等，就像我在和自己聊天一样

如果我尝试连接到具有两台独立计算机的房间，则要连接的第二台计算机不会连接到第一台计算机。但是，如果我将第三台单独的计算机添加到房间中，其他两台计算机将检测到第三台计算机，并成功连接到它并交换视频流

我一直在试图弄明白为什么会发生这种事，我让自己有点疯狂。我希望我能问个更好的问题，但我有点迷路了

服务器js:

const app = express();
const server = require("http").Server(app);
const io = require("socket.io")(server);
const { v4: uuidV4 } = require("uuid");
//const { ExpressPeerServer } = require("peer");

app.set("view engine", "ejs");
app.use(express.static("public"));

app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});

app.get("/", (req, res) => {
  res.redirect("/chat") //+ (Math.random() + 1).toFixed(3) * 1000); //uuidV4()}`)
});

app.get("/favicon.ico", (req, res) => res.status(204));

app.get("/:room", (req, res) => {
  console.log(req.params.room, "<< this is the room");
  res.render("room", { roomId: req.params.room });
});

io.on("connection", socket => {
  socket.on("join-room", (roomId, userId) => {
    socket.join(roomId);
    socket.to(roomId).broadcast.emit("user-connected", userId);
    socket.on("disconnect", () => {
      socket.to(roomId).broadcast.emit("user-disconnected", userId);
    });
    console.log("room ID and new userID: ", roomId, userId);
  });
});

server.listen(3000);

const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined, {
  host: 'sniffen-video-peer.herokuapp.com',
  debug:1
})

const myVideo = document.createElement('video')
myVideo.muted = true
const peers = {}

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
}).then(stream => {
  
  addVideoStream(myVideo, stream)
  console.log('vid stream added...')
  
  myPeer.on('call', call => {
    console.log("SOMEONE CALLED ME!")
    call.answer(stream)
    const video = document.createElement('video')

    call.on('stream', userVideoStream => {
      addVideoStream(video, userVideoStream)
    })
  })
  
  socket.on('user-connected', userId => {
    console.log("user connected: " + userId)
    connectToNewUser(userId, stream)
  })
})

socket.on('user-disconnected', id => {
  if (peers[id]) peers[id].close()
})

myPeer.on('open', id => {
  console.log(id, ' joined the room!')
  socket.emit('join-room', ROOM_ID, id)
})

function connectToNewUser(userId, stream) {
  console.log('preparing to call ', userId)
  const call = myPeer.call(userId, stream)
  const video = document.createElement('video')
  call.on('stream', userVideoStream => {
    console.log('trying to add new video stream....')
    addVideoStream(video, userVideoStream)
  })
  call.on('close', () => {
    video.remove()
  })
  peers[userId] = call
}

function addVideoStream(video,stream) {
  video.srcObject = stream
  video.addEventListener('loadedmetadata', () =>  {
    video.play()
  })
  videoGrid.append(video)
}