javascript - WebRTC stuck in connecting state when ice servers are included (remote candidates causing issues even over LAN) - S

admin管理员组

文章数量:1356515

I was temporarily creating an RTCPeerConnection without any iceServers while attempting to solve a previous issue.

let peer = new RTCPeerConnection();

This has been working perfectly on my local network.

However device that's not on the same network (for example, a mobile on 4G) would not connect. I remembered that I had to add back some iceServers to the RTCPeerConnection constructor.

let peer = RTCPeerConnection(
  {
    iceServers: [
      {
        urls: [
          "stun:stun1.l.google:19302",
          "stun:stun2.l.google:19302",
        ],
      },
      {
        urls: [
          "stun:global.stun.twilio:3478?transport=udp",
        ],
      },
    ],
    iceCandidatePoolSize: 10,
  }
);

After doing so, my WebRTC connections have been stuck in the connecting state ever since. Not a single connection has succeeded, even on my local network. (no longer the case, see edit 2 below)

Here is the state of the connection:

• The ice candidates are gathered.
• The offer/answer is created.
• The offer/answer and ice candidates are sent successfully through my signaling service.
• I successfully set the remote and local descriptions and add the ice candidates on either end.
• The connection remains in the connecting state.
• After maybe 30 seconds or so the connection times out and fails.

---

EDIT: It appears than when I leave the iceServers blank, the connection still gathers an ice candidate, so I am assuming my browser (chrome) provided a default ice server. In that case, it's only my custom ice servers (shown above) that are causing a problem, and not the browser defaults.

---

EDIT 2: NEW OBSERVATION

I've added loads and loads of logging and I just noticed something whenever I do have the iceServers included:

Whenever peer A initiates a connection with peer B for the first time in a while, peer B gathers two ice candidates: 1 local host candidate and 1 remote candidate. As I've already stated above, the connection fails.

But when I quickly attempt to connect again... peer B only gathers a single ice candidate: a local host candidate. The remote candidate is not gathered. My first assumption is that the STUN server I'm using (in this case it was likely google's) has some form of rate limiting on their service. What's really funny about this scenario, is that the connection is successful!!

There's something mysterious about a remote candidate messing up the connection... and I hope these new details will help. I'm been stuck at this for months! And both devices are on my LAN so I would expect a remote candidate to have absolutely no effect.

---

Peer A code (initiator):

export class WebRTCConnection {
  private _RTCPeerConnection: any;
  private _fetch: any;
  private _crypto: any;

  private _entity: any;
  private _hostAddress: any;
  private _eventHandlers: ConnectionEventHandlers;
  private _peer: any;
  private _peerChannel: any;

  constructor({
    entity,
    hostAddress,
    eventHandlers,
    RTCPeerConnection,
    fetch,
    crypto,
  }: {
    entity: any,
    hostAddress: any,
    eventHandlers: ConnectionEventHandlers,
    RTCPeerConnection: any,
    fetch: any,
    crypto: any,
  }) {
    this._RTCPeerConnection = RTCPeerConnection;
    this._fetch = fetch;
    this._crypto = crypto;

    this._entity = entity;
    this._hostAddress = hostAddress;
    this._eventHandlers = eventHandlers;

    this._initPeer();
  }

  async _initPeer() {
    this._peer = new this._RTCPeerConnection(/* as shown in question */);

    let resolveOfferPromise: (value: any) => void;
    let resolveIceCandidatesPromise: (value: any[]) => void;
    
    let iceCandidatesPromise: Promise<any[]> = new Promise((resolve, _reject) => {
      resolveIceCandidatesPromise = resolve;
    });

    let offerPromise: Promise<any> = new Promise((resolve, _reject) => {
      resolveOfferPromise = resolve;
    });

    this._peer.onnegotiationneeded = async () => {
      let offer = await this._peer.createOffer();
      await this._peer.setLocalDescription(offer);
      resolveOfferPromise(this._peer.localDescription);
    };

    this._peer.onicecandidateerror = () => {
      // log error
    };

    let iceCandidates: any[] = [];

    this._peer.onicecandidate = async (evt: any) => {
      if (evt.candidate) {
        // Save ice candidate
        iceCandidates.push(evt.candidate);
      } else {
        resolveIceCandidatesPromise(iceCandidates);
      }
    };

    (async () => {
      // No more ice candidates, send on over signaling service
      let offer: any = await offerPromise;
      let iceCandidates: any[] = await iceCandidatesPromise;

      let sigData = // reponse after sending offer and iceCandidates over signaling service

      let answer = sigData.answer;
      await this._peer.setRemoteDescription(answer);

      for (let candidate of sigData.iceCandidates) {
        await this._peer.addIceCandidate(candidate);
      }
    })();

    this._peer.onicegatheringstatechange = (evt: any) => {
      // log state
    };

    this._peer.onconnectionstatechange = async () => {
      // log state
    };

    this._peerChannel = this._peer.createDataChannel("...", {
      id: ...,
      ordered: true,
    });

    this._peerChannel.onopen = () => {
      // log this
    };

    this._peerChannel.onmessage = (event: any) => {
      // do something
    };
  }

  send(msg: any) {
    this._peerChannel.send(
      new TextEncoder().encode(JSON.stringify(msg)).buffer,
    );
  }

  close() {
    if (this._peer) {
      this._peer.destroy();
    }
  }
}

Peer B code:

export class WebRTCConnection {
  constructor({ signalData, eventHandlers, RTCPeerConnection }) {
    this._eventHandlers = eventHandlers;

    this._peer = new RTCPeerConnection(/* as seen above */);

    this._isChannelOpen = false;

    this._peer.ondatachannel = (event) => {
      event.channel.onopen = () => {
        this._mainDataChannel = event.channel;
        event.channel.onmessage = async (event) => {
          // do something
        };
        this._isChannelOpen = true;
      };
    };

    this._peer.onicecandidateerror = () => {
      // log error
    };

    this._iceCandidates = [];
    this._isIceCandidatesFinished = false;
    this._iceCandidatesPromise = new Promise((resolve, _reject) => {
      this._resolveIceCandidatesPromise = resolve;
    });
    this._isAnswerFinished = false;
    this._isSignalDataSent = false;

    this._peer.onicecandidate = async (evt) => {
      if (evt.candidate) {
        // Save ice candidate
        this._iceCandidates.push(evt.candidate);
      } else {
        // No more ice candidates, send on over signaling service when ready
        this._isIceCandidatesFinished = true;
        this._resolveIceCandidatesPromise();
        this._sendSignalData();
      }
    };

    (async () => {
      let sigData = JSON.parse(signalData);

      let offer = sigData.offer;
      await this._peer.setRemoteDescription(offer);

      this._answer = await this._peer.createAnswer();
      await this._peer.setLocalDescription(this._answer);

      for (let candidate of sigData.iceCandidates) {
        await this._peer.addIceCandidate(candidate);
      }

      this._isAnswerFinished = true;
      this._sendSignalData();
    })();

    this._peer.onconnectionstatechange = async () => {
      // log state
    };
  }

  _sendSignalData() {
    if (false
      || !this._isIceCandidatesFinished
      || !this._isAnswerFinished
      || this._isSignalDataSent
    ) {
      return;
    }

    this._isSignalDataSent = true;

    this._eventHandlers.onSignal(JSON.stringify({
      answer: {
        type: this._answer.type,
        sdp: this._answer.sdp,
      },
      iceCandidates: this._iceCandidates,
    }));
  }

  send(msg) {
    this._mainDataChannel.send(new TextEncoder().encode(JSON.stringify(msg)));
  }

  close() {
    this._peer.destroy();
  }
}

I was temporarily creating an RTCPeerConnection without any iceServers while attempting to solve a previous issue.

let peer = new RTCPeerConnection();

This has been working perfectly on my local network.

However device that's not on the same network (for example, a mobile on 4G) would not connect. I remembered that I had to add back some iceServers to the RTCPeerConnection constructor.

let peer = RTCPeerConnection(
  {
    iceServers: [
      {
        urls: [
          "stun:stun1.l.google.:19302",
          "stun:stun2.l.google.:19302",
        ],
      },
      {
        urls: [
          "stun:global.stun.twilio.:3478?transport=udp",
        ],
      },
    ],
    iceCandidatePoolSize: 10,
  }
);

After doing so, my WebRTC connections have been stuck in the connecting state ever since. Not a single connection has succeeded, even on my local network. (no longer the case, see edit 2 below)

Here is the state of the connection:

• The ice candidates are gathered.
• The offer/answer is created.
• The offer/answer and ice candidates are sent successfully through my signaling service.
• I successfully set the remote and local descriptions and add the ice candidates on either end.
• The connection remains in the connecting state.
• After maybe 30 seconds or so the connection times out and fails.

---

EDIT: It appears than when I leave the iceServers blank, the connection still gathers an ice candidate, so I am assuming my browser (chrome) provided a default ice server. In that case, it's only my custom ice servers (shown above) that are causing a problem, and not the browser defaults.

---

EDIT 2: NEW OBSERVATION

I've added loads and loads of logging and I just noticed something whenever I do have the iceServers included:

Whenever peer A initiates a connection with peer B for the first time in a while, peer B gathers two ice candidates: 1 local host candidate and 1 remote candidate. As I've already stated above, the connection fails.

But when I quickly attempt to connect again... peer B only gathers a single ice candidate: a local host candidate. The remote candidate is not gathered. My first assumption is that the STUN server I'm using (in this case it was likely google's) has some form of rate limiting on their service. What's really funny about this scenario, is that the connection is successful!!

There's something mysterious about a remote candidate messing up the connection... and I hope these new details will help. I'm been stuck at this for months! And both devices are on my LAN so I would expect a remote candidate to have absolutely no effect.

---

Peer A code (initiator):

export class WebRTCConnection {
  private _RTCPeerConnection: any;
  private _fetch: any;
  private _crypto: any;

  private _entity: any;
  private _hostAddress: any;
  private _eventHandlers: ConnectionEventHandlers;
  private _peer: any;
  private _peerChannel: any;

  constructor({
    entity,
    hostAddress,
    eventHandlers,
    RTCPeerConnection,
    fetch,
    crypto,
  }: {
    entity: any,
    hostAddress: any,
    eventHandlers: ConnectionEventHandlers,
    RTCPeerConnection: any,
    fetch: any,
    crypto: any,
  }) {
    this._RTCPeerConnection = RTCPeerConnection;
    this._fetch = fetch;
    this._crypto = crypto;

    this._entity = entity;
    this._hostAddress = hostAddress;
    this._eventHandlers = eventHandlers;

    this._initPeer();
  }

  async _initPeer() {
    this._peer = new this._RTCPeerConnection(/* as shown in question */);

    let resolveOfferPromise: (value: any) => void;
    let resolveIceCandidatesPromise: (value: any[]) => void;
    
    let iceCandidatesPromise: Promise<any[]> = new Promise((resolve, _reject) => {
      resolveIceCandidatesPromise = resolve;
    });

    let offerPromise: Promise<any> = new Promise((resolve, _reject) => {
      resolveOfferPromise = resolve;
    });

    this._peer.onnegotiationneeded = async () => {
      let offer = await this._peer.createOffer();
      await this._peer.setLocalDescription(offer);
      resolveOfferPromise(this._peer.localDescription);
    };

    this._peer.onicecandidateerror = () => {
      // log error
    };

    let iceCandidates: any[] = [];

    this._peer.onicecandidate = async (evt: any) => {
      if (evt.candidate) {
        // Save ice candidate
        iceCandidates.push(evt.candidate);
      } else {
        resolveIceCandidatesPromise(iceCandidates);
      }
    };

    (async () => {
      // No more ice candidates, send on over signaling service
      let offer: any = await offerPromise;
      let iceCandidates: any[] = await iceCandidatesPromise;

      let sigData = // reponse after sending offer and iceCandidates over signaling service

      let answer = sigData.answer;
      await this._peer.setRemoteDescription(answer);

      for (let candidate of sigData.iceCandidates) {
        await this._peer.addIceCandidate(candidate);
      }
    })();

    this._peer.onicegatheringstatechange = (evt: any) => {
      // log state
    };

    this._peer.onconnectionstatechange = async () => {
      // log state
    };

    this._peerChannel = this._peer.createDataChannel("...", {
      id: ...,
      ordered: true,
    });

    this._peerChannel.onopen = () => {
      // log this
    };

    this._peerChannel.onmessage = (event: any) => {
      // do something
    };
  }

  send(msg: any) {
    this._peerChannel.send(
      new TextEncoder().encode(JSON.stringify(msg)).buffer,
    );
  }

  close() {
    if (this._peer) {
      this._peer.destroy();
    }
  }
}

Peer B code:

export class WebRTCConnection {
  constructor({ signalData, eventHandlers, RTCPeerConnection }) {
    this._eventHandlers = eventHandlers;

    this._peer = new RTCPeerConnection(/* as seen above */);

    this._isChannelOpen = false;

    this._peer.ondatachannel = (event) => {
      event.channel.onopen = () => {
        this._mainDataChannel = event.channel;
        event.channel.onmessage = async (event) => {
          // do something
        };
        this._isChannelOpen = true;
      };
    };

    this._peer.onicecandidateerror = () => {
      // log error
    };

    this._iceCandidates = [];
    this._isIceCandidatesFinished = false;
    this._iceCandidatesPromise = new Promise((resolve, _reject) => {
      this._resolveIceCandidatesPromise = resolve;
    });
    this._isAnswerFinished = false;
    this._isSignalDataSent = false;

    this._peer.onicecandidate = async (evt) => {
      if (evt.candidate) {
        // Save ice candidate
        this._iceCandidates.push(evt.candidate);
      } else {
        // No more ice candidates, send on over signaling service when ready
        this._isIceCandidatesFinished = true;
        this._resolveIceCandidatesPromise();
        this._sendSignalData();
      }
    };

    (async () => {
      let sigData = JSON.parse(signalData);

      let offer = sigData.offer;
      await this._peer.setRemoteDescription(offer);

      this._answer = await this._peer.createAnswer();
      await this._peer.setLocalDescription(this._answer);

      for (let candidate of sigData.iceCandidates) {
        await this._peer.addIceCandidate(candidate);
      }

      this._isAnswerFinished = true;
      this._sendSignalData();
    })();

    this._peer.onconnectionstatechange = async () => {
      // log state
    };
  }

  _sendSignalData() {
    if (false
      || !this._isIceCandidatesFinished
      || !this._isAnswerFinished
      || this._isSignalDataSent
    ) {
      return;
    }

    this._isSignalDataSent = true;

    this._eventHandlers.onSignal(JSON.stringify({
      answer: {
        type: this._answer.type,
        sdp: this._answer.sdp,
      },
      iceCandidates: this._iceCandidates,
    }));
  }

  send(msg) {
    this._mainDataChannel.send(new TextEncoder().encode(JSON.stringify(msg)));
  }

  close() {
    this._peer.destroy();
  }
}

• javascript
• webrtc
• webapi

Share Improve this question Follow edited Jul 9, 2020 at 11:10 David Callanan asked Jul 7, 2020 at 10:09 David CallananDavid Callanan 5,8501515 gold badges7676 silver badges124124 bronze badges 7

• 2 using just stun servers will not work on all networks and will fail the way you're describing. There are no "hidden" default ice servers either, what you see are most likely host candidates, i.e. candidates with a local ip address or a mdns hostname. – Philipp Hancke Commented Jul 7, 2020 at 14:45
• @PhilippHancke Ok thanks for clarifying the host ice candidates. I am fully aware that stun servers will not work on all networks... but I'm yet to see a successful connection after adding them. However, as I said, before I added those ice servers, local connections were working perfectly. But after adding them, local connections are not working, and I'm not sure why the extra ice servers could have caused this, as I would assume it would still use the host candidate... – David Callanan Commented Jul 7, 2020 at 20:08
• @DavidCallanan When I see your previous post, it seems that peer B does not have peer.onicecandidate event, right? Can I see the full code? I think maybe there can be some mistakes in your code. – Gorisanson Commented Jul 9, 2020 at 10:46
• @Gorisanson Those problems have been fixed since. I will try to remove all the unnecessary stuff from the code and then show it here, yes maybe there are still mistakes. – David Callanan Commented Jul 9, 2020 at 10:56
• 1 @DavidCallanan github./pion/stun/tree/master/cmd/stun-nat-behaviour might be helpful. Run that on all your networks and pare the NAT mapping/filtering types. Certain binations will not work together unfortunately. – Sean DuBois Commented Jul 9, 2020 at 16:57

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6 +50

Your code works on LAN without iceServers since STUN servers are not used for gathering host candidates — your puter already knows its local IP address — and host candidates are enough to establish a WebRTC connection on LAN.

The connection may failed since one of the peers were behind a symmetric NAT, over which STUN fails to work. You can check whether the network is behind a symmetric NAT by using the code in this page: Am I behind a Symmetric NAT? (This page also provide a JSFiddle, in which you can check the console message whether it prints "normal nat" or "symmetric nat". If it prints nothing, while the fiddle is working properly, it means you are not getting server reflexive candidates.)

I think you should test your code first on WAN with peers who are checked that they are behind a normal nat. Have you ever tried your code on WAN with both peer connected via Ethernet or WiFi? It seems that 3G/4G networks are often under symmetric NATs.

UPDATE (Thanks to @Sean DuBois for the ment): A "symmetric NAT", an expression I used above and was introduced in RFC 3489 (March 2003), can be better termed by the updated terminology introduced in RFC 4787 (January 2007). STUN only works over a NAT which has an "Endpoint-Independent Mapping" behavior. A "symmetric NAT" (old term) has an "Address-Dependent Mapping" behavior or an "Address and Port-Dependent Mapping" behavior, not an "Endpoint-Independent Mapping" behavior.

The problem was that I was using the Brave browser.

Using Chrome solved all the issues.

本文标签：