Manage Participants

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">
  <ul id="participants-list"></ul>

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 ( === return;

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


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);


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-" +

  if (participantNode) {

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

VoxeetSDK.conference.on("streamRemoved", (participant, stream) => {