javascript – Can’t See Video received from other users/tabs in Peer js and WebRTC Video Chat App

So I was Building a Video chat Website using Peer Js and I am able to see my own video but when loggin in from another tab I can’t see the other user’s video stream…
Here is my code. Thanks in advance.
Here’s the client side code…

const socket = io();
const myPeer = new Peer(userID, {
  host: "/",
  port: 3001,
});

myPeer.on("open", (id) => {
  socket.emit("join-room", roomID, userID);
});

// Video wala part
const videoGrid = document.querySelector(".videoGrid");
const myVideo = document.createElement("video");
myVideo.muted = true;
navigator.mediaDevices
  .getUserMedia({
    audio: true,
    video: true,
  })
  .then((stream) => {
    addVideoStream(myVideo, stream);

    myPeer.on("call", (call) => {
      call.answer(stream);
      const userVideo = document.createElement("video");
      call.on("stream", (userVideoStream) => {
        console.log("User Video: ", userVideoStream);
        addVideoStream(userVideo, userVideoStream);
      });
    });
    socket.on("user-connected", (userID) => {
      console.log("user Connected", userID);
      connectToNewUser(userID, stream);
    });
  });

function connectToNewUser(userId, stream) {
  const call = myPeer.call(userId, stream);
  const video = document.createElement("video");
  call.on("stream", (userVideoStream) => {
    console.log("User Video: ", userVideoStream);
    addVideoStream(video, userVideoStream);
  });
  call.on("close", () => {
    video.remove();
  });
}

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

Here’s the server side…

io.on("connection", (socket) => {
  socket.on("join-room", (roomId, userId) => {
    socket.join(roomId);
    socket.broadcast.to(roomId).emit("user-connected", userId);
  });
});

I was following this tutorial: youtu.be/DvlyzDZDEq4

Read more here: Source link