You have a basic video conference application with which you can video call your friends using a conference room. However, you do not control the conference nor have any information about the conference participants.

This tutorial will take you through some simple steps to follow to have a full participants’ list.

Step 1: Create the participants’ list

Note: The participants’ list is only visible when the user has joined the conference.

Open the index.html file and add a div with the id participants and a ul with the id participants-list in join-panel, right after the actions div:

<div id="actions">...</div>
<!-- Add participants div just after actions div -->
<div id="participants">
    <h3>Participants</h3>
    <ul id="participants-list"></ul>
</div>
...

Step 2: Add a participant to the list

Note: The participants’ list is updated upon receiving the participantJoined and participantLeft events, the same way the participants’ streams were added in the previous tutorial.

Open the ui.js file and create a function named addParticipantNode that will add the participant’s name to the participants-list element.

const addParticipantNode = participant => {
  const participantsList = document.getElementById("participants-list");

  // if the participant is the current session user, don’t add them to the list
  if (participant.id === VoxeetSDK.session.participant.id) return;

  let participantNode = document.createElement("li");
  participantNode.setAttribute("id", "participant-" + participant.id);
  participantNode.innerText = `${participant.info.name}`;

  participantsList.appendChild(participantNode);
}

Then, open client.js file and call the addParticipantNode upon receiving the streamAdded event.

    VoxeetSDK.conference.on("streamAdded", (participant, stream) => {
        ...
        // Call addParticipantNode here
        addParticipantNode(participant);
    })

Step 3: Remove a participant from the list

Open the ui.js file and create a function named removeParticipantNode that removes child nodes of the participants-list based on the participant ID:

const removeParticipantNode = participant => {
    let participantNode = document.getElementById("participant-" + participant.id);

    if (participantNode) {
        participantNode.parentNode.removeChild(participantNode);
    }
}

Then, open client.js file and update the streamRemoved handler by calling the removeParticipantNode:

const main = () => {
    /* Events handlers */
    ...
    VoxeetSDK.conference.on('streamRemoved', (participant, stream) => {
        ...
        removeParticipantNode(participant);
    });
};