Participant Management

CometChat Calling SDK v5 - Beta Release - Participant Management for JavaScript

Manage call participants including muting, pinning, and monitoring their status during a call.

Participant Actions

Mute Participant

Mute a specific participant’s audio. This is typically a moderator action.

CometChatCalls.muteParticipant(participantId);

Parameter	Type	Description
participantId	String	The participant’s unique identifier

Pause Participant Video

Pause a specific participant’s video. This is typically a moderator action.

CometChatCalls.pauseParticipantVideo(participantId);

Parameter	Type	Description
participantId	String	The participant’s unique identifier

Pin Participant

Pin a participant to keep them prominently displayed regardless of who is speaking.

CometChatCalls.pinParticipant(participantId, type);

Parameter	Type	Description
participantId	String	The participant’s unique identifier
type	String	The participant type

Unpin Participant

Remove the pin, returning to automatic speaker highlighting.

CometChatCalls.unpinParticipant();

Participant Events

Participant Joined

Fired when a participant joins the call:

CometChatCalls.addEventListener("onParticipantJoined", (participant) => {
  console.log(`${participant.name} joined the call`);
});

Participant Left

Fired when a participant leaves the call:

CometChatCalls.addEventListener("onParticipantLeft", (participant) => {
  console.log(`${participant.name} left the call`);
});

Participant List Changed

Fired when the participant list is updated:

CometChatCalls.addEventListener("onParticipantListChanged", (participants) => {
  console.log(`Total participants: ${participants.length}`);
  participants.forEach(p => console.log(p.name));
});

Participant Audio State

Monitor when participants mute or unmute:

CometChatCalls.addEventListener("onParticipantAudioMuted", (participant) => {
  console.log(`${participant.name} muted their audio`);
});

CometChatCalls.addEventListener("onParticipantAudioUnmuted", (participant) => {
  console.log(`${participant.name} unmuted their audio`);
});

Participant Video State

Monitor when participants turn their camera on or off:

CometChatCalls.addEventListener("onParticipantVideoPaused", (participant) => {
  console.log(`${participant.name} turned off their camera`);
});

CometChatCalls.addEventListener("onParticipantVideoResumed", (participant) => {
  console.log(`${participant.name} turned on their camera`);
});

Dominant Speaker Changed

Fired when the active speaker changes:

CometChatCalls.addEventListener("onDominantSpeakerChanged", (participant) => {
  console.log(`Active speaker: ${participant.name}`);
});

Participant List UI

Show/Hide Participant List Button

Control visibility of the participant list button:

const callSettings = {
  hideParticipantListButton: false, // Show the button
  // ... other settings
};

Listen for Participant List Events

Monitor when the participant list panel is opened or closed:

CometChatCalls.addEventListener("onParticipantListVisible", () => {
  console.log("Participant list opened");
});

CometChatCalls.addEventListener("onParticipantListHidden", () => {
  console.log("Participant list closed");
});

Listen for Participant List Button Clicks

Intercept participant list button clicks:

CometChatCalls.addEventListener("onParticipantListButtonClicked", () => {
  console.log("Participant list button clicked");
});

Participant Object

Property	Type	Description
uid	String	Unique identifier (CometChat user ID)
name	String	Display name
avatar	String	URL of avatar image