I am getting this error can someone help

[anonymous887]

I am getting two errors

The connection to ws://localhost:3000/socket.io/?EIO=4&transport=websocket&sid=MZ-83rZca70hU-pAAAAG was interrupted while the page was loading.

Uncaught TypeError: video is null
addVideoStream http://localhost:3000/client.js:54
http://localhost:3000/client.js:30
emit http://localhost:3000/peerjs.min.js:46
addStream http://localhost:3000/peerjs.min.js:58
_addStreamToMediaConnection http://localhost:3000/peerjs.min.js:54
ontrack http://localhost:3000/peerjs.min.js:54

Also, the video is not loading on the second tab when i go to the same link again
Please help

client.js

const socket = io("/");

const myVideo = document.createElement("video");
myVideo.muted = true;

const videoGrid = document.getElementById("video-grid");

let myVideoStream;

var peer = new Peer(undefined, {
  path: "/peerjs",
  host: "/",
  port: "3000",
});

navigator.mediaDevices
  .getUserMedia({
    video: true,
    audio: false,
  })
  .then((stream) => {
    myVideoStream = stream;
    addVideoStream(myVideo, stream);

    peer.on("call", (call) => {
      call.answer(stream);
      const video = document.getElementById("video");

      call.on("stream", (userVideoStream) => {
        addVideoStream(video, userVideoStream);
      });
    });

    socket.on("user-connected", (userId) => {
      connectToNewUser(userId, stream);
    });
  });

// Peer
peer.on("open", (id) => {
  socket.emit("join-room", ROOM_ID, id);
});

const connectToNewUser = (userId, stream) => {
  const call = peer.call(userId, stream);
  const video = document.createElement("video");

  call.on("stream", (useVideoStream) => {
    addVideoStream(video, useVideoStream);
  });
};

const addVideoStream = (video, stream) => {
  video.srcObject = stream;
  video.addEventListener("loadedmetadata", () => {
    video.play();
  });
  videoGrid.append(video);
  let child = videoGrid.childElementCount;
  console.log("Child of VideoGrid: ", child);
};

server.js

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

const PORT = process.env.PORT || 3000;

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

app.get("/", (req, res) => {
  res.redirect(`/${uuidV4()}`);
});

app.get("/:room", (req, res) => {
  res.render("room", { roomId: req.params.room });
});

io.on("connection", (socket) => {
  socket.on("join-room", (roomId, userId) => {
    socket.join(roomId);

    socket.broadcast.to(roomId).emit("user-connected", userId);
  });
});

server.listen(PORT, () => {
  console.log("Server started at PORT : ", PORT);
});