Ending a SIP call when clicking the hang up button of jitsi iframe API takes a while

Hello,

When you click on the hang up button in the Jitsi Itrame, the call does not end immediately. It takes about 10/20 seconds. The called number still rings even if I have ended the call via the iframe.
I am using the api.invite function and readyToClose event.
Thanks in advance.

Best Regards,
M.Dhia

Do you have a full example?

From the Jitsi Itrame I call a number xxx via SIP Invite. When it rings, I click the Hang Up button (I did not answer the call).

image

I expect the call to end. But it still rings.

There is no such logic … This needs to be handled in jicofo.
A workaround for it is to listen for the hangup and kick the dialout participant before proceeding.
The only way to hangup dialing out is the kick

Could you give me an example?
I tried the following code where but doesn’t help.

api.addListener('readyToClose', () => {
    //participantsToKick contains all participants who joined the conference.
	participantsToKick.map( participantToKickItem => {
	console.log( "the following participant will be kicked: ", participantToKickItem['id'] );
	api.executeCommand('kickParticipant',
		participantToKickItem['id']
	);
	} )
});

Thanks.

Maybe ready to close is too late, I don’t have ot handy, but you can listen for hangup click

I have not found a hangup event in the documentation.
Could you explain how I listen for the hangup click?
Thanks.

See the example in the following post. It is for a different use case, but should give you an idea of how to listen to hangup click events and act on it.

Note the buttonsWithNotifyClick option which is important – you won’t get events for toolbar button clicks if you don’t specify the items in that option.

1 Like

Thank you for the help.
The buttonsWithNotifyClick do the job but it throws an exception.
Please see the following error.

I am not sure but I think it comes from:
api.executeCommand(‘hangup’);

What do you think?

Sorry, I really can’t tell from that. Is that error happening when the event is triggered or when you are programmatically calling the hangup command?

Can you share a snippet of how you’re implementing the listener?

Does it work if you reduce it to something really simple like:

const api = new JitsiMeetExternalAPI('MEET.DOMAIN.COM', {
    roomName: 'YourRoomName',
    parentNode: document.querySelector('#meet'),
    configOverwrite: {
        buttonsWithNotifyClick: ['hangup']
    }
};);

api.addListener("toolbarButtonClicked", function (e) {
    console.log("toolbarButtonClicked triggered with", e);

    if (e.key === 'hangup') {
      console.log("Before hangup command");  
      api.executeCommand('hangup');
      console.log("After hangup command");
    }
});

yes Sure. The following is the listner which I use:

api.addListener("toolbarButtonClicked", function (e) {
		console.log("toolbarButtonClicked triggered with", e);
		// When hangup button click, kick all participant
		if (e.key === 'hangup') {
			console.log( "participant to kick:", participantsToKick );
			participantsToKick.map( participantsToKickItem => {
				console.log( "the following participant will be kicked: ", participantsToKickItem['id'] );
				if ( participantsToKickItem['id'] ){
					api.executeCommand('kickParticipant',
						participantsToKickItem['id']
					);
				}
			} )
			// Proceed with hangup.
			api.executeCommand('hangup');
		}
});

Do you still get the error if you comment out the kickParticipant command? I suspect the problem isn’t specifically the hangup but what you did before that.

How did you populate participantsToKick? I wonder if the problem might be that you are kicking your own id (assuming that is possible), or if is trying to kick a participant that no longer exist.

The error is gone when I delete api.executeCommand(‘hangup’) or kickParticipant command
I am using the participantJoind event to push data in participantsToKick
I can see in the console that I have only one participant and only one to kicked out. Which is the dialing out.

Do you have a way to get all participants except the owner of the conference?

I suppose you could use participantJoined event to populate a local array, but you need to remember to update the list on participantLeft or you will have stale ids in your array.

And if you’re not careful, you might end up iterating through an array of ids that is being mutated as you kick participants – no idea how Javascript handles that, but in general it is never a good idea have an iteration that mutates the data structure it is iterating through.

Another option is to use api.getParticipantsInfo() – this gives you all participants in the conference including the local user which you will need to filter out. You can get the local participant id on conference join from the videoConferenceJoined event.

Example:

// before join we cannot get participants, so just return empty array.
let getOtherParticipants = () => [];  

api.addListener('videoConferenceJoined', (e) => {
  // once joined, we can retrieve our ID and update the function so it does the right thing.
  const localParticipantId = e.id;
  
  getOtherParticipants = () => {
  	return api.getParticipantsInfo()
       .map((info) => info.participantId)
       .filter((participantId) => (participantId != "local" && participantId != localParticipantId));
  }
})

// Now you can just call getOtherParticipants() to get array of ids for other active participants

Disclaimer: I haven’t full tested the above so cannot guarantee if works in all cases.

2 Likes

Thanks for the help. I wasn’t aware about the api.getParticipantsInfo()
But still the same problem.
You can see in the picture below that I have the right id to kick.

image

and the error appear shortly after.

I am not sure how to update the list of participantLeft properly.

Are you seeing the error on kick or on hangup? Does it still do the right thing, or is either kick or hangup not happening?

I’m afraid I’m not sure how much I can help from just the code snippets you’ve provided since they seem fine and should not raise the error you mentioned. Something else in your code is influencing the participant data, or is the one raising the error.

See working example here based on code we’ve discussed so far – join test page (code). With this example, when hangup button is clicked, all other participants are kicked out before hangup happens.

Thank you for providing your code. Unfortunately, the error is still there. This is strange because I used your code without modification.

That snippet works with no issues when used independently on meet.jit.si, so the error is probably due to some other calls you are making or changes you might have made to your deployment.

Not sure how else I can help. Sorry.

1 Like

Thank you for your help. I think the problem occurs when I invite a participant to the conference via SIP call (api.invite(invitee)). I have tried the same code without inviting a participant via sip call and there is no error.
Perhaps you have an idea about this?