Manage Participants

Suggest Edits

This tutorial guides how to add a participant list to your conferencing application. The list may be available to participants only after joining a conference.

In this guide, the participant list is updated upon receiving the streamAdded and streamRemoved events that contain information about participants' streams. If you do not need this information in your application, you can also use the participantAdded and participantUpdated events.

Open the index.html file and navigate to join-panel, which should be located right after the actions div. In this location, add a div tag with the participants ID and an ul tag with the participants-list ID.

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

Open the ui.js file and create an addParticipantNode function responsible for adding participants' names to the participants-list element.

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

  // If the participant is the current session user, do not 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);
};

Open the client.js file and call 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);
});

In the ui.js file, create a removeParticipantNode function responsible for removing child nodes of participants-list based on the participant ID.

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

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

In the client.js file, update the streamRemoved handler by calling removeParticipantNode.

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

Updated 5 months ago

What’s Next

Implement Screen Sharing