Disconnecting from a video call using react-native-webrtc

Question

I have implemented WebRTC based video calling using react-native-webrtc. Its a one to one calling and works fine, but when I disconnect the call and try to reconnect again then the reconnection takes a lot of time and sometimes hangs the application. Below is the code for disconnecting:

function stopLocalStream() {
  if (friends != null) {
    friends.forEach(friend => {
      leave(friend.socketId)
    })
  }
  if (localStream != null) {
    localStream.getTracks().forEach(t => t.stop())
    localStream.release()
    localStream = null
  }
}

function leave(socketId) {
  console.log('leave', socketId)
  var pc = peerConnections[socketId]
  if (pc) {
    pc.close()
  }
  delete peerConnections[socketId]
  if (onFriendLeftCallback != null) {
    onFriendLeftCallback(socketId)
  }
}

I think that i am not disconnecting the video call correctly. Any Help would be much appreciated thanks.

Answer 1

If you want a really clean shutdown I would suggest first stopping the transceivers so that an RTCP BYE gets sent:

pc.getTransceivers().forEach((transceiver) => {
    transceiver.stop();
});

This should cleanly stop the remote party's received media track:

https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpTransceiver/stop

NOTE : you might need to give the RTCPeerConnection a little time before closing it so that this BYE has time to actually get sent (try a setTimeout).

As to why you are unable to restart another call, it's hard to answer without some further insight into how your code manages this.