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 participant list.

Step 1: Create the participant list

Note: The participant 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 participant 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) => {
  if (stream.type === "ScreenShare") return;

  if (stream.getVideoTracks().length) {
    addVideoNode(participant, stream);
  }

  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:

VoxeetSDK.conference.on("streamRemoved", (participant, stream) => {
  removeVideoNode(participant);
  removeParticipantNode(participant);
});