Uncaught Error: Connection failed. rtcpeerconnection.t._pc.onconnectionstatechange

Question

Here Is the Reactjs Component code It works fine in the same browser after deploying to heroku but when we join room from different internets this error Uncaught Error: Connection failed. rtcpeerconnection.t._pc.onconnectionstatechange occured.I don't have any idea about turn and stun if u help me out in understanding of this am very thankfull

 import React, { useEffect, useRef, useState } from "react";
 import io from "socket.io-client";
 import Peer from "simple-peer";
 import "./room.css";


const Video = (props) => {
         const ref = useRef();

             useEffect(() => {
              props.peer.on("stream", (stream) => {
               ref.current.srcObject = stream;
            });
    }, []);

   return <video className={"mini-video"} playsInline autoPlay ref={ref} />;
 };

  const Room = (props) => {
       const [peers, setPeers] = useState([]);
       const socketRef = useRef();
      const userVideo = useRef();
      const peersRef = useRef([]);
   const roomID = props.match.params.roomID;
   console.log(roomID);
   useEffect(() => {
   socketRef.current = io("https://videogroup.herokuapp.com/");
   navigator.mediaDevices
  .getUserMedia({ video: true, audio: true })
  .then((stream) => {
    userVideo.current.srcObject = stream;
    socketRef.current.emit("join room", roomID);
    socketRef.current.on("all users", (users) => {
      const peers = [];
      users.forEach((userID) => {
        const peer = createPeer(userID, socketRef.current.id, stream);
        peersRef.current.push({
          peerID: userID,
          peer,
        });
        peers.push(peer);
      });
      setPeers(peers);
    });

    socketRef.current.on("user joined", (payload) => {
      const peer = addPeer(payload.signal, payload.callerID, stream);
      peersRef.current.push({
        peerID: payload.callerID,
        peer,
      });

      setPeers((users) => [...users, peer]);
    });

    socketRef.current.on("receiving returned signal", (payload) => {
      const item = peersRef.current.find((p) => p.peerID === payload.id);
      item.peer.signal(payload.signal);
    });
  });
}, []);

function createPeer(userToSignal, callerID, stream) {
  const peer = new Peer({
   initiator: true,
   trickle: false,
   config: {

    iceServers: [
      {
          urls: "stun:stun.stunprotocol.org"
      },
      {
          urls: 'turn:numb.viagenie.ca',
          credential: 'muazkh',
          username: '[email protected]'
      },
  ]
},
  stream,
});

peer.on("signal", (signal) => {
  socketRef.current.emit("sending signal", {
    userToSignal,
    callerID,
    signal,
  });
});

 return peer;
 }

function addPeer(incomingSignal, callerID, stream) {
  const peer = new Peer({
  initiator: false,
  trickle: false,
  stream,
});

peer.on("signal", (signal) => {
  socketRef.current.emit("returning signal", { signal, callerID });
});

peer.signal(incomingSignal);

return peer;
}

 return (
  <div>
   <div className={"video-container"}>
    <video  ref={userVideo} autoPlay playsInline />
   </div>
  <div className={"mini-video-container"}>
    {peers.map((peer, index) => {
      return (
       
          <Video key={index} peer={peer} />
      
      );
    })}
    </div>
  </div>
 );
};

export default Room;

Below Is my Node Js Server Side Code after deploying when I call on different pcs or different LAN networks Uncaught Error: Connection failed. rtcpeerconnection.t._pc.onconnectionstatechange occured

require('dotenv').config();
const http = require('http');
const express = require('express');
const socketio = require('socket.io');
const cors = require('cors');
const { addUser, removeUser, getUser, getUsersInRoom } = require('./users');

const router = require('./router');

const app = express();
const server = http.createServer(app);
const io = socketio(server);
let Userss={};
let VideoRoomUsers={};
const socketToRoom = {};
app.use(cors());
app.use(router);

io.on('connect', (socket) => {

  socket.on('disconnect', () => {

console.log(`socket is disconnected socket id is:${socket.id}`);
//video Group call Disconnect
const roomID = socketToRoom[socket.id];
let room = VideoRoomUsers[roomID];
if (room) {
    room = room.filter(id => id !== socket.id);
    VideoRoomUsers[roomID] = room;
}
})

//=======================Video Group Calling Room Server Side Code==========================
socket.on("join room", roomID => {
  if (VideoRoomUsers[roomID]) {
      const length = VideoRoomUsers[roomID].length;
      if (length === 4) {
          socket.emit("room full");
           return;
     }
      VideoRoomUsers[roomID].push(socket.id);
   } else {
       VideoRoomUsers[roomID] = [socket.id];
  }
  socketToRoom[socket.id] = roomID;
   const usersInThisRoom = VideoRoomUsers[roomID].filter(id => id !== socket.id);
  console.log(usersInThisRoom);
   socket.emit("all users", usersInThisRoom);
 });

socket.on("sending signal", payload => {
  io.to(payload.userToSignal).emit('user joined', { signal: payload.signal, callerID: 
payload.callerID });
});

 socket.on("returning signal", payload => {
  io.to(payload.callerID).emit('receiving returned signal', { signal: payload.signal, id: 
  socket.id });
  });

});
const port=process.env.PORT || 5000
server.listen(port, () => console.log(`Server has started. on port ${port}`));