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

I’m trying to figure out what’s wrong with what I did, but for some reason, completely random, some users won’t establish a connection. I use Xirsys to get dynamic ICE Servers on the server side. This happens in the socket connected method, and it’s async so before i emit the video_users event, i await on receiving the dynamic ICE Servers. But those are not the problem.

    socket.on("connect", () => {
      this.setState({ id: socket.id });
    });

    socket.open();

This function generates the peer:

  generatePeer(id: string, initiator: boolean = false, iceServers: any[] = null) {
    if (!iceServers) return null;
    let peer = new Peer({
      initiator: initiator,
      trickle: false,
      config: {
        iceServers: iceServers
      },
      stream: this.state.stream
    });

    peer.on("signal", (data: any) => {
      if (this.state.id !== id) {
        socket.emit("video_signal", {
          signal: data,
          to: id,
          name: this.state.name,
          host: this.state.host,
          iceServers: iceServers
        });
      }
    });

    peer.on("connect", () => {
      console.log("CONNECTED PEER " + id);
    });

    peer.on("stream", (stream: any) => {
      let partners = this.state.partners;
      if (partners[id] && partners[id].video) {
        if ("srcObject" in partners[id].video) {
          partners[id].video.srcObject = stream;
        } else {
          partners[id].video.src = window.URL.createObjectURL(stream);
        }
        this.setState({ partners });
      }
    });

    peer.on("error", (err: any) => {
      console.error(err);
    });

    peer.on("close", () => {
      console.log("CLOSED PEER " + id);
      delete this.peers[id];
      delete partners[id];
      this.setState({ partners });
    });

    return peer;
  }

This event calls it (video_users is an event called every time someone enters the room)

    this.io.on("video_users", (peers: any) => {
      peers.map((peer: any) => {
        if (!this.peers[peer.id] && peer.id !== this.state.id) {
            this.peers[peer.id] = this.generatePeer(peer.id, true, data.iceServers);
          }
      });
    });

And this event is called when a signal has been sent:

    this.io.on("video_new_signal", async (data: any) => {
      let id = data.from;
      if (id != this.state.id) {
        if (!this.peers[id])
          this.peers[id] = this.generatePeer(id, false, data.iceServers);

        this.peers[id].signal(data.signal);
        let partners = this.state.partners;
        if (!partners[id]) {
          partners[id] = { name: data.name, full: false, host: data.host };
          this.setState({ partners });
        }
      }
    });

This is a multi-video room chat, so full mesh. But the problem happens also when it’s one-on-one video chat. What am I doing wrong? Is there a way to simulate a problem? Because right now it’s completely random and very hard to debug.

[t-mullen]

Ah, that is the “negotiate” signal that’s being incorrectly sent. See: https://github.com/feross/simple-peer/issues/670

We’re working on a fix. In the meantime, you can disable renegotiation by dropping the signal.

peer.on('signal', (data) => {
  if (data. renegotiate || data.transceiverRequest) return
})

This may or may not solve your issues.

[t-mullen]

You’re trying to process an SDP answer when you haven’t generated an offer or have already processed an answer. Basically, your signalling messages are going to the wrong peers or are arriving in the wrong order.

I recommend logging the signalling messages that each peer is receiving and checking the “type” field is “offer” or “answer” as you would expect.