未捕获的错误：连接失败 rtcpeerconnection.t._pc.onconnectionstatechange

问题描述

这是 Reactjs 组件代码部署到 heroku 后，它在同一浏览器中运行良好，但是当我们从不同的互联网加入房间时，此错误未捕获错误：连接失败。 rtcpeerconnection.t._pc.onconnectionstatechange发生了。如果你帮助我理解这一点，我对转身和眩晕没有任何想法，非常感谢

 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,});

      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: '[e-mail]'
      },]
},stream,});

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

 return peer;
 }

function addPeer(incomingSignal,stream) {
  const peer = new Peer({
  initiator: false,(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;

当我调用不同的电脑或不同的 LAN 网络时，下面是我的 Node Js 服务器端代码未捕获错误：连接失败。 rtcpeerconnection.t._pc.onconnectionstatechange 发生

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',id: 
  socket.id });
  });

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）