Not able to manage multiple jssip phone session request in react

Question

Working one react project based on functional components only.

Project contains Audio Call functions using JSSIP. Calling functions working fine with single call.

When multiple call happens I can able to display multiple calling popup at bottom of app like below screenshot

Component loads multiple times when NewRTCSession called so I used useRef for storing all sesison.

Till now everything working fine.

Now when I press End Call from browser endCall() methods and terminate() session.

Now when call ends at that time session of JSSIP calls failed event calls.

Adding code now.

const messageHandler = (message, participants, setParticipants) => {
    setParticipants({
        ...participants,
        [message.request.call_id]: message
    });
    const session = message.session;
    session.on('failed', (e) => {
        try {
            delete participants[message.request.call_id];
            setParticipants(participants);
        } catch(ex) {
        }
    });
};

function IncomingCall() {
    const [participants, setParticipants] = React.useState({});
    const participantsRef = React.useRef(participants);

    React.useEffect(() => {
        participantsRef.current = participants;
    });
  
    React.useEffect(() => {
        const handler = (message) => {messageHandler(message, participantsRef.current, setParticipants)};
        const phone = JsSipHelper.ua();
        phone.on("newRTCSession", handler);
    }, []);

    const endCall = (id) => {
        participants[id].session.terminate();
    };

    return (
        <div id="meetingRoom">
            {Object.keys(participants).map((participant, index) => (
                <div>
                    <h1>Call From: {participants[participant].session.remote_identity.display_name}</h1>
                    <button onClick={() => endCall()}>End Call</button>
                    <button>Answer Call</button>
                </div>
            ))}
        </div>
    );
}

export default IncomingCall;

When endCall() calls from first call section, Call in mobile gets end successfully. Now failed event calls and I am trying to update state variable of participants but it that variable clear completely.

But now I am waiting for call ends in mobile after timeout so it's happens and again that popup comes in ui.

So, I am confused here. How state and useRef going to work with multiple.

Reference

UseEffect hook with socket.io state is not persistent in socket handlers

Answer 1

You may want to have a look at https://github.com/OpenTelecom/react-sip-phone

It's a react webphone using SIP.js which supports several sessions.