MException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable (

[kikichen77]

When I upgrade the latest version of react, react-dom, react-routers-dom, the normal previous code has the error of MException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable
(
`client-side
import { useState,useRef,useEffect} from "react";
import io from "socket.io-client";
import SimplePeer from "simple-peer";
import { useParams } from "react-router-dom";

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

useEffect(() => {
  props.peer.on('stream', (stream) => {
    ref.current.srcObject = stream;
  });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return (
<video
style={{ width: "100%", transform: "rotateY(180deg)" }}
ref={ref}
autoPlay
muted
playsInline
>
);
};

const Room=()=>{
const username="wa"
const [peers, setPeers] = useState([]);
const socketRef = useRef();
const userVideo = useRef();
const peersRef = useRef([]);
const { id } = useParams();
const roomID = id;

useEffect(() => {
  socketRef.current = io.connect("http://localhost:8000/");
  navigator.mediaDevices.getUserMedia({ video: true, audio: false }).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);
      if (!item.peer.destroyed) {
        item.peer.signal(payload.signal);
      }
    });
    
})

// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

function createPeer(userToSignal, callerID, stream) {
try {
const peer = new SimplePeer({
initiator: true,
trickle: false,
config: {
iceServers: [
{
urls: "stun:stun.l.google.com:19302",
},
],
},
stream: stream,
});

// Move error event listener to the beginning
peer.on("error", (error) => {
  console.error("Peer error:", error);
});

peer.on('signal', (signal) => {
  console.log("Peer signal:", signal);
  socketRef.current.emit('sending signal', { userToSignal, callerID, signal });
});

return peer;

} catch (error) {
console.log("Peer creation error:", error);
}
}

function addPeer(incomingSignal, callerID, stream) {
const peer = new SimplePeer({
initiator: false,
trickle: false,
config: {
iceServers: [
{
urls: "stun:stun.l.google.com:19302",
}],
},
stream: stream,
});
console.log(1)

// Move error event listener to the beginning
peer.on("error", (error) => {
console.error("Peer error:", error);
});

peer.on('signal', (signal) => {
console.log(2)
socketRef.current.emit('returning signal', { signal, callerID });
});

setTimeout(() => {
console.log(3)
// if (peer._pc.signalingState !== "stable") {
//console.log(4)
peer.signal(incomingSignal);
// }
}, 100);

return peer;
}

return (
  <div className="video-wrap">
    <span style={{ position: "absolute", top: "1px", left: "1px" }}>
      {username}
    </span>
    <video
      style={{ width: "100%", transform: "rotateY(180deg)" }}
      ref={userVideo}
      autoPlay
      muted
      playsInline
    ></video>
    {peers.map((peer, index) => {
      return <Video key={index} peer={peer} />;
    })}
  </div>
);

}
export default Room;
``server-side
require('dotenv').config();
const express = require("express");
const http = require("http");
const app = express();
const server = http.createServer(app);
const socket = require("socket.io");
const io = socket(server);

const users = {};

const socketToRoom = {};

io.on('connection', socket => {
socket.on("join room", roomID => {
// console.log("Join room event triggered for room:", roomID);
if (users[roomID]) {
const length = users[roomID].length;
// console.log(length);
if (length === 8) {
socket.emit("room full");
return;
}
// Check if socket.id is not already in the users[roomID] array before pushing it
if (!users[roomID].includes(socket.id)) {
users[roomID].push(socket.id);
}
} else {
users[roomID] = [socket.id];
}
socketToRoom[socket.id] = roomID;
const usersInThisRoom = users[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 });
});

socket.on('disconnect', () => {
    const roomID = socketToRoom[socket.id];
    let room = users[roomID];
    if (room) {
        room = room.filter(id => id !== socket.id);
        users[roomID] = room;
    }
});

});

server.listen(8000, () => console.log('server is running on port 8000'));
version:
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.10.0",
"react-scripts": "3.4.1",
"simple-peer": "^9.11.1",
"socket.io-client": "^2.3.0",
"styled-components": "^5.1.0",
"uuid": "^7.0.3",
"vite": "^4.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
`

[szcuipeng]

i got the same error, i found i made a mistake:

correct:
create peer1 (initiator) and peer2 -->
send peer1's signal data to peer2 -->
send peer2's signal data to peer1

wrong:
create peer1 (initiator) and peer2 -->
send peer1's signal data to peer2 -->
send peer2's signal data to peer3, then peer3 output a console error:

Failed to execute 'setRemoteDescription' on 'RTCPeerConnection':
Failed to set remote answer sdp: Called in wrong state: stable

to avoid this, i add an uuid property to peer object.
everytime i send/recv/call signal data, i check if peer1(initiator) and peerx has the same uuid.
if not same, restart all.