2

这是 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,
        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;

下面是我在不同的电脑或不同的 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', { signal: payload.signal, id: 
  socket.id });
  });

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

0 回答 0