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

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: 'webrtc@live.com'
      },
  ]
},
  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}`));