RTCPeerConnection.iceConnectionState changed from checking to closed

Question

Following the method here I'm trying to answer an audio call initiated with a Chrome browser from an iPhone simulator(with React Native).

A summary of the event sequence:

1. received call signal
2. got local stream
3. sent join call signal
4. received remote description(offer),
5. created PeerConnection
6. added local stream
7. received candidate
8. added candidate
9. 7 and 8 repeated 15 times (that is 16 times in total)
10. onnegotiationneeded triggered
11. signalingState changed into have-remote-offer
12. onaddstream triggered
13. the callback function of setRemoteDescription was triggered, created answer.
14. signalingState changed into stable
15. iceconnectionstate changed into checking
16. onicecandidate triggered for the first time.
17. emited the candidate from 15
18. onicecandidate triggered for the 2nd time. The candidate is null
19. iceconnectionstate changed into closed

Step 7,8,9 may appear at different places after 6 and before 19.

I have been stuck on this problem for quite a while. I don't even know what to debug at this time. What are the possible causes of the closing of connection? I can post more logs if needed.

One observation is that the two RTCEvent corresponding to iceconnectionstatechange has the following properties:

isTrusted:false

The target RTCPeerConnection has

iceConnectionState:"closed"
iceGatheringState:"complete"

Here are my functions to handle remoteOffer and remoteCandidates:

WebRTCClass.prototype.onRemoteOffer = function(data) {
  var ref;
  if (this.active !== true) {
    return;
  }
  var peerConnection = this.getPeerConnection(data.from);
  console.log('onRemoteOffer', data,peerConnection.signalingState);

  if (peerConnection.iceConnectionState !== 'new') {
    return;
  }
  var onSuccess = (function(_this){
    return function(){
      console.log("setRemoteDescription onSuccess function");
      _this.getLocalUserMedia((function(_this) {
          return function(onSuccess,stream) {
            peerConnection.addStream(_this.localStream);
            var onAnswer = (function(_this) {
              return function(answer) {
                var onLocalDescription = function() {
                  return _this.transport.sendDescription({
                    to: data.from,
                    type: 'answer',
                    ts: peerConnection.createdAt,
                    description: {
                      sdp: answer.sdp,
                      type: answer.type
                    }
                  });
                };
                return peerConnection.setLocalDescription(new RTCSessionDescription(answer), onLocalDescription, _this.onError);
              };
            })(_this);
            return peerConnection.createAnswer(onAnswer, _this.onError);
          }
        })(_this)
      );
    }
  })(this);
  return peerConnection.setRemoteDescription(new RTCSessionDescription(data.description),onSuccess,console.warn);
}; 

---

WebRTCClass.prototype.onRemoteCandidate = function(data) {
  var peerConnection, ref;
  if (this.active !== true) {
    return;
  }
  if (data.to !== this.selfId) {
    return;
  }
  console.log('onRemoteCandidate', data);
  peerConnection = this.getPeerConnection(data.from);
  if ((ref = peerConnection.iceConnectionState) !== "closed" && ref !== "failed" && ref !== "disconnected" && ref !== "completed") {
    peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate));
  }
};

Answer 1

I found that if I call the following two functions one by one, then it will work.

peerConnection.setRemoteDescription(new RTCSessionDescription(data.description),onSuccess,console.warn);
(...definition of onAnswer ...)
peerConnection.createAnswer(onAnswer, this.onError); 

My previous codes called createAnswer within the onSuccess callback of setRemoteDescription. That did work for the react-native-webrtc demo, but not with Rocket.Chat. Still don't fully understand it. But my project can move on now.