NEWDolby Interactivity APIs are now the Communications APIs Learn More >

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

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 ( === 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) => {
        // Call addParticipantNode here

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:

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

Did this page help you?