CODEWITHSUNDEEP
javascriptgoogle-chromewebrtc
Luckner Jr. Jean-Baptiste
Luckner Jr. Jean-Baptiste

Reputation: 323

RTCPeerConnection connectionState never moves from "new" to "checking"/"connected"

I have taken over a WebRTC project from someone and though I'm starting to wrap my head around the concepts, I continue to be stumped by a specific problem: getting the WebRTC connection to move from new to checking/completed, etc...

Here is the extent of the output from chrome://webrtc-internals:

enter image description here

Our code calls connect():

connect(mediaStream, interviewUid, applicantUid) {
    return new Promise((resolve, reject) => {
      this.connectRtcPeerConnection()
        .then(() => {
          this.connectionState = Socket.CONNECTION_STATES.connected;
          this.rtcPeer.addStream(mediaStream);
          return this.rtcPeer.createOffer({ offerToReceiveAudio: 1, offerToReceiveVideo: 1 });
        }).then((offer) => {
          console.log('offer created', offer);
          return this.rtcPeer.setLocalDescription(offer);
        }).then(() => {
          const message = {
            id: SENDABLE_MESSAGES.connect,
            sdpOffer: this.rtcPeer.localDescription,
            interviewUid,
            applicantUid,
          };
          this.sendMessageToServer(message);
          resolve();
        })
        .catch((error) => {
          console.error(error);
          reject();
        });
    });
  }

which in turns calls connectRtcPeerConnection():

connectRtcPeerConnection(

) {
    return new Promise((resolve, reject) => {
      if (this.rtcPeer) {
        resolve();
      }
      console.log('started connecting');

      const rtcPeerOptions = {
        iceServers: [TRUNCATED],
      };

      console.log('rtcPeerOptions', rtcPeerOptions);
      this.rtcPeer = new RTCPeerConnection(rtcPeerOptions);
      console.log('rtcPeer object: ', this.rtcPeer);
      this.rtcPeer.onerror = reject;
      this.rtcPeer.onicecandidate = (candidate) => { this.handleIceCandidateEvent(candidate); };
      this.rtcPeer.oniceconnectionstatechange = () => {
        this.handleIceConnectionStateChangeEvent();
      };
      this.rtcPeer.onaddstream = () => { console.log('handleAddStreamEvent'); };
      this.rtcPeer.onremovestream = () => { console.log('handleRemoveStreamEvent'); };
      this.rtcPeer.onicegatheringstatechange = () => { console.log('handleIceGatheringStateChangeEvent'); };
      this.rtcPeer.onsignalingstatechange = () => { console.log('handleSignalingStateChangeEvent'); };
      this.rtcPeer.onnegotiationneeded = () => { console.log('handleNegotiationNeededEvent'); };
      resolve();
    });
  }

This chunk of code never gets executed:

this.rtcPeer.oniceconnectionstatechange = () => {
  this.handleIceConnectionStateChangeEvent();
};

I've followed every conditional and code path and don't currently see what the issue might be. Has anyone encountered this and is able to shed some light on potential things to look at/consider?

Thanks!

Upvotes: 5

Views: 3189

Answers (2)

NeverHopeless
NeverHopeless

Reputation: 11233

When I was implementing Kurento library for iOS, tried something like this:

Generated SDPOffer

Set LocalDescription at our end

WebRTC started generating IceCandidate

Sent Ice Candidate through WebSocket

At this point, other party sent SDPAnswer.

Processed SDPAnswer at our end.

Set RemoteDescription at our end.

Server started sending IceCandidate gathered at their end.

Added these IceCandidate in array at our end.

Here received change in connection state to "Checking"

Received RemoteStream at this point.

Here received change in connection state to "Connected"

Hope it helps!

Upvotes: 1

Philipp Hancke
Philipp Hancke

Reputation: 17360

well, you never call setRemoteDescription or add a remote ice candidate via addIceCandidate. Without that there is no-one to talk to

Upvotes: 0

Related Questions