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">
<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);
});
Updated about 2 months ago