Get participant name that left (iFrame)

How do I get the name of the participant that ended the call?

api.addListener('participantLeft', (id, displayName) => {

                console.log(id);

                console.log(displayName);

            });

This however does not work. What is the right way?

Listen to event participantJoined and store the participants yourself. Then when the participant leaves check the local array for display name.

let participants = [];

api.addListener('participantJoined', (data) => {
	// data includes id and displayName
	participants.push(data);
});

api.addListener('participantLeft', ({ id }) => {
	const participant = participants.find(p => p.id === id);
	// You can use participant.displayName here
	
	participants = participants.filter(p => p.id !== id);
});
2 Likes

Hello all. I used the solution given by @izakgl . What I am doing is using the CDN directly and not installing server while using IFrame. I used the same code using IFrame API but I cant get the events running. Is there something which is required before using IFrame API or any installation? Thanks in advance. Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://meet.jit.si/libs/lib-jitsi-meet.min.js"></script>
    <title>Video Conf</title>
</head>
<body>
    <div id="meet" style="    display: block;
    width: 100%;
    height: 100vh"></div>
  <div size="middle" type="primary" class="mr-1" danger  onClick="api.executeCommand('toggleAudio')">End Meeting For All</div>    
    <script src="https://meet.jit.si/external_api.js"></script>
    <script>
        var domain = "meet.jit.si";

        var charlist = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'.split('')
        var rname = ""
        for (let i = 0; i < 12; i++) {
            rname = rname+charlist[Math.floor(Math.random() * charlist.length)];
        }
        console.log(rname)
        var options = {
            roomName: "ahhaa_coach_meet",
            width: '100%',
            height: '100%',
            parentNode: document.querySelector('#meet')
        }
        var api = new JitsiMeetExternalAPI(domain, options);
        
        let participants = [];
        api.addListener('participantJoined', (data) => {
            // data includes id and displayName
            participants.push(data);
            console.log(participants);
        });

        api.addListener('participantLeft', ({ id }) => {
            const participant = participants.find(p => p.id === id);
            // You can use participant.displayName here
            
            participants = participants.filter(p => p.id !== id);
            console.log(participants);
        });

        api.executeCommand('subject', 'New Room 2');
        
        
        
    </script>
</body>
</html>