问题
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.com:19302",
"stun:stun2.l.google.com:19302",
],
},
{
urls: [
"stun:global.stun.twilio.com: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();
}
}
回答1:
Your code works on LAN without iceServers since STUN servers are not used for gathering host candidates — your computer 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.
回答2:
The problem was that I was using the Brave browser.
Using Chrome solved all the issues.
来源：https://stackoverflow.com/questions/62772851/webrtc-stuck-in-connecting-state-when-ice-servers-are-included-remote-candidate