CALL GET'S DISCONNECTED

I’m using this package to build a productional level one, well I’m having issues with the implementation probably the call automatically gets disconnected after random short periods of time well here it’s my implementation

import {
    RTCPeerConnection,
    RTCIceCandidate,
    RTCSessionDescription,
    mediaDevices,
  } from 'react-native-webrtc';
  import React from 'react';
    const TURN_SERVER_URL = 'XX.XX.XX:3478';
    const TURN_SERVER_USERNAME = 'username';
    const TURN_SERVER_CREDENTIAL = 'credential';
    const PC_CONFIG = {
    iceServers: [
        {
        urls: 'turn:' + TURN_SERVER_URL + '?transport=tcp',
        username: TURN_SERVER_USERNAME,
        credential: TURN_SERVER_CREDENTIAL
        },
        {
        urls: 'turn:' + TURN_SERVER_URL + '?transport=udp',
        username: TURN_SERVER_USERNAME,
        credential: TURN_SERVER_CREDENTIAL
        }
    ]
    };
    const URL = "wss://XX.XX.XXX.XX.amazonaws.com/production"

  





export default class WebRTC {
  socket;
  pc;
  localStream;
  yourId;
  partnerConnectionId;

      constructor(args) {
      this.socket = new WebSocket(URL)
      this.yourData = 'args.yourData' 
      this.socket.onmessage = (event) => {
        let eventMessage = JSON.parse(event.data)
        console.log(eventMessage)
        if(eventMessage.message){
          if (eventMessage.message == 'Internal server error'){
                if (this.remoteStream == null){
                      //  this.getUser()
                }
                else if(this.remoteStream!=null) {
                       console.log('nothing ')
                }
          }
     }

        switch (eventMessage.type) {
          case 'ready':
            this.yourId = eventMessage.yourID;
            this.partnerConnectionId = eventMessage.partnerConnectionId;
            this.createPeerConnection();
            this.sendOffer();
            // this.onStatusChanged("Sending Offer");
            break;
          case 'byAnotherUser':
            this.yourId = eventMessage.yourID;
            this.partnerConnectionId = eventMessage.partnerConnectionId;
            break;
          case "data":
            this.handleSignalingData(eventMessage.data.sd);
            if(eventMessage.data.userData){
            this.onRecievedAnotherUserData(eventMessage.data.userData);
            }
        
          }
      }

}

  // connect = () => {
  //   this.getLocalStream();
  // }

  getUser = () =>{
    this.socket.send(JSON.stringify({
      action:"default",
      connectedUsersArray:[]
    }))
  }
  // Signaling methods
 


  // WebRTC methods
  getLocalStream = () => {
    mediaDevices.getUserMedia({
      audio: true, video: {facingMode: 'user'},
    }).then((stream) => {
      console.log('Stream found');
      this.localStream = stream;
      this.socket.onopen =  () => {
        console.log("socket opened")
        this.getUser()
        
  }
      
    }).catch(error => {
      console.error('Stream not found: ', error);
    });
  }

  sendData = (data) => {
    this.socket.send(JSON.stringify({
          action:"connecTo",
          target:this.partnerConnectionId,
          data:data,
        
        }))
  };

  createPeerConnection = () => {
    try {
      this.pc = new RTCPeerConnection(PC_CONFIG);
      this.pc.onicecandidate = this.onIceCandidate;
      // In web version, this was replaced by ontrack.
      // However, react-native-webrtc doesn't support it yet
      this.pc.onaddstream = this.onAddStream;
      this.pc.addStream(this.localStream);
      console.log('PeerConnection created');
    } catch (error) {
      console.error('PeerConnection failed: ', error);
    }
  };

  sendOffer = () => {
    console.log('Send offer');
    this.pc.createOffer({}).then(
      this.setAndSendLocalDescription,
      (error) => { console.error('Send offer failed: ', error); }
    );
  };

  sendAnswer = () => {
    console.log('Send answer');
    this.pc.createAnswer().then(
      this.setAndSendLocalDescription,
      (error) => { console.error('Send answer failed: ', error); }
    );
  };

  setAndSendLocalDescription = (sessionDescription) => {
    this.pc.setLocalDescription(sessionDescription);
    console.log('Local description set');
    this.sendData({sd: sessionDescription,userData:this.yourData});
  };

  onIceCandidate = (event) => {
    if (event.candidate) {
      console.log('ICE candidate');
      this.sendData({sd:{
        type: 'candidate',
        candidate: event.candidate
      }});
    }
  };

  onAddStream = (event) => {
    console.log('Add stream');
    this.onRemoteStreamObtained(event.stream);
  };

  handleSignalingData = (data) => {
    switch (data.type) {
      case 'offer':
        this.createPeerConnection();
        this.pc.setRemoteDescription(new RTCSessionDescription(data));
        this.sendAnswer();
        break;
      case 'answer':
        this.pc.setRemoteDescription(new RTCSessionDescription(data));
        break;
      case 'candidate':
        this.pc.addIceCandidate(new RTCIceCandidate(data.candidate));
        break;
    }
  };
};

For signaling purposes I’m using AWS WebSocket APIs any help would be appreciated I can offer to buy me a coffee, please…

[8BallBomBom]

All you’ve managed to do is sum up the fact that some users might not have implemented certain key elements of the module correctly in their react components.

Common mistake and yes that will lead to issues. But that isn’t exactly an issue with the module itself. I will make sure to address the issue with better guides and examples soon.

But in a general sense, we are talking on a core level. If performance issues with the module itself exist then you are welcome to point them out. But bare in mind great experiences aren’t typically expected with weaker older devices.

There has been some issues related to creating EGL contexts which was mainly triggered by having large amounts of streams open or after creating tons of streams over time. That on the other hand was addressed and fixed a while ago.

[Yogesh-Dubey-Ayesavi]

I can’t clearly say where the problem lies without seeing your architecture and your client side as well server side implementation also one more thing problem in the case was mainly with mobile devices. The major reason why this happens is due to the misconfigured server so you would need to configure your servers accordingly as per your use case also one problem i noticed while working with this was many people don’t know how many pixels they are sending and recievingwhether their network is capable for that or not. if everything is fine from there. A common mistake i have seen people doing is improper use cases of hooks with webrtc so while using it like useState to set local or remote streams be careful so that it doesnt rebuilds every utility function youve made for the call i hope it clarifies all of your doubts.

This is happening due to the garbage collection so better to improve your codebase.

We’re willing to review anything if you can point us in the right direction. After-all contributing towards improving the module is welcomed. Otherwise you’re not exactly being useful.

Actually right now im working on a separate project with flutter so can’t do right now.