Events

Handle CometChat Calls SDK v5 events on JavaScript for call lifecycle, participants, media state, errors, and real-time updates.

Handle call session events to build responsive UIs. The SDK provides event listeners to monitor session status, participant activities, media changes, button clicks, and layout changes.

Adding Event Listeners

Use the addEventListener() method to register event listeners. The method returns an unsubscribe function that you should call to remove the listener when no longer needed.

const unsubscribe = CometChatCalls.addEventListener("eventName", (data) => {
  // Handle the event
});

// Later, to remove the listener:
unsubscribe();

---

Session Events

Monitor the call session lifecycle including join/leave events and connection status.

Session Joined

Fired when you successfully connect to the session.

CometChatCalls.addEventListener("onSessionJoined", () => {
  console.log("Successfully joined the session");
});

Session Left

Fired when you leave the session.

CometChatCalls.addEventListener("onSessionLeft", () => {
  console.log("Left the session");
});

Session Timed Out

Fired when the session ends due to inactivity timeout.

CometChatCalls.addEventListener("onSessionTimedOut", () => {
  console.log("Session timed out");
});

Connection Lost

Fired when the network connection is interrupted.

CometChatCalls.addEventListener("onConnectionLost", () => {
  console.log("Connection lost, attempting to reconnect...");
});

Connection Restored

Fired when the connection is restored after being lost.

CometChatCalls.addEventListener("onConnectionRestored", () => {
  console.log("Connection restored");
});

Connection Closed

Fired when the connection is permanently closed.

CometChatCalls.addEventListener("onConnectionClosed", () => {
  console.log("Connection closed");
});

---

Participant Events

Monitor participant activities including join/leave, audio/video state, hand raise, screen sharing, and recording.

Participant Joined

Fired when a participant joins the call.

CometChatCalls.addEventListener("onParticipantJoined", (participant) => {
  console.log("Participant joined:", participant.name);
});

Participant Left

Fired when a participant leaves the call.

CometChatCalls.addEventListener("onParticipantLeft", (participant) => {
  console.log("Participant left:", participant.name);
});

Participant List Changed

Fired when the participant list is updated.

CometChatCalls.addEventListener("onParticipantListChanged", (participants) => {
  console.log("Participants:", participants.length);
});

Participant Audio Muted

Fired when a participant mutes their microphone.

CometChatCalls.addEventListener("onParticipantAudioMuted", (participant) => {
  console.log("Participant muted:", participant.name);
});

Participant Audio Unmuted

Fired when a participant unmutes their microphone.

CometChatCalls.addEventListener("onParticipantAudioUnmuted", (participant) => {
  console.log("Participant unmuted:", participant.name);
});

Participant Video Paused

Fired when a participant turns off their camera.

CometChatCalls.addEventListener("onParticipantVideoPaused", (participant) => {
  console.log("Participant video paused:", participant.name);
});

Participant Video Resumed

Fired when a participant turns on their camera.

CometChatCalls.addEventListener("onParticipantVideoResumed", (participant) => {
  console.log("Participant video resumed:", participant.name);
});

Participant Hand Raised

Fired when a participant raises their hand.

CometChatCalls.addEventListener("onParticipantHandRaised", (participant) => {
  console.log("Participant raised hand:", participant.name);
});

Participant Hand Lowered

Fired when a participant lowers their hand.

CometChatCalls.addEventListener("onParticipantHandLowered", (participant) => {
  console.log("Participant lowered hand:", participant.name);
});

Participant Started Screen Share

Fired when a participant starts screen sharing.

CometChatCalls.addEventListener("onParticipantStartedScreenShare", (participant) => {
  console.log("Participant started screen share:", participant.name);
});

Participant Stopped Screen Share

Fired when a participant stops screen sharing.

CometChatCalls.addEventListener("onParticipantStoppedScreenShare", (participant) => {
  console.log("Participant stopped screen share:", participant.name);
});

Participant Started Recording

Fired when a participant starts recording.

CometChatCalls.addEventListener("onParticipantStartedRecording", (participant) => {
  console.log("Participant started recording:", participant.name);
});

Participant Stopped Recording

Fired when a participant stops recording.

CometChatCalls.addEventListener("onParticipantStoppedRecording", (participant) => {
  console.log("Participant stopped recording:", participant.name);
});

Dominant Speaker Changed

Fired when the active speaker changes.

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

---

Media Events

Monitor your local media state changes including audio/video status, recording, and device changes.

Audio Muted

Fired when your microphone is muted.

CometChatCalls.addEventListener("onAudioMuted", () => {
  console.log("Your audio is muted");
});

Audio Unmuted

Fired when your microphone is unmuted.

CometChatCalls.addEventListener("onAudioUnMuted", () => {
  console.log("Your audio is unmuted");
});

Video Paused

Fired when your camera is turned off.

CometChatCalls.addEventListener("onVideoPaused", () => {
  console.log("Your video is paused");
});

Video Resumed

Fired when your camera is turned on.

CometChatCalls.addEventListener("onVideoResumed", () => {
  console.log("Your video is resumed");
});

Recording Started

Fired when call recording starts.

CometChatCalls.addEventListener("onRecordingStarted", () => {
  console.log("Recording started");
});

Recording Stopped

Fired when call recording stops.

CometChatCalls.addEventListener("onRecordingStopped", () => {
  console.log("Recording stopped");
});

Screen Share Started

Fired when you start screen sharing.

CometChatCalls.addEventListener("onScreenShareStarted", () => {
  console.log("Screen sharing started");
});

Screen Share Stopped

Fired when you stop screen sharing.

CometChatCalls.addEventListener("onScreenShareStopped", () => {
  console.log("Screen sharing stopped");
});

Audio Input Device Changed

Fired when the audio input device changes.

CometChatCalls.addEventListener("onAudioInputDeviceChanged", (device) => {
  console.log("Audio input device changed:", device);
});

Audio Output Device Changed

Fired when the audio output device changes.

CometChatCalls.addEventListener("onAudioOutputDeviceChanged", (device) => {
  console.log("Audio output device changed:", device);
});

Video Input Device Changed

Fired when the video input device changes.

CometChatCalls.addEventListener("onVideoInputDeviceChanged", (device) => {
  console.log("Video input device changed:", device);
});

Audio Input Devices Changed

Fired when the list of available audio input devices changes.

CometChatCalls.addEventListener("onAudioInputDevicesChanged", (devices) => {
  console.log("Audio input devices updated:", devices);
});

Audio Output Devices Changed

Fired when the list of available audio output devices changes.

CometChatCalls.addEventListener("onAudioOutputDevicesChanged", (devices) => {
  console.log("Audio output devices updated:", devices);
});

Video Input Devices Changed

Fired when the list of available video input devices changes.

CometChatCalls.addEventListener("onVideoInputDevicesChanged", (devices) => {
  console.log("Video input devices updated:", devices);
});

---

Button Click Events

Intercept UI button clicks from the default call interface to add custom behavior or analytics.

Leave Session Button Clicked

Fired when the leave button is clicked.

CometChatCalls.addEventListener("onLeaveSessionButtonClicked", () => {
  console.log("Leave button clicked");
});

Toggle Audio Button Clicked

Fired when the mute/unmute button is clicked.

CometChatCalls.addEventListener("onToggleAudioButtonClicked", () => {
  console.log("Audio toggle button clicked");
});

Toggle Video Button Clicked

Fired when the video on/off button is clicked.

CometChatCalls.addEventListener("onToggleVideoButtonClicked", () => {
  console.log("Video toggle button clicked");
});

Raise Hand Button Clicked

Fired when the raise hand button is clicked.

CometChatCalls.addEventListener("onRaiseHandButtonClicked", () => {
  console.log("Raise hand button clicked");
});

Share Invite Button Clicked

Fired when the share/invite button is clicked.

CometChatCalls.addEventListener("onShareInviteButtonClicked", () => {
  console.log("Share invite button clicked");
});

Change Layout Button Clicked

Fired when the layout change button is clicked.

CometChatCalls.addEventListener("onChangeLayoutButtonClicked", () => {
  console.log("Change layout button clicked");
});

Participant List Button Clicked

Fired when the participant list button is clicked.

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

Chat Button Clicked

Fired when the in-call chat button is clicked.

CometChatCalls.addEventListener("onChatButtonClicked", () => {
  console.log("Chat button clicked");
});

Recording Toggle Button Clicked

Fired when the recording toggle button is clicked.

CometChatCalls.addEventListener("onRecordingToggleButtonClicked", () => {
  console.log("Recording toggle button clicked");
});

Screen Share Button Clicked

Fired when the screen share button is clicked.

CometChatCalls.addEventListener("onScreenShareButtonClicked", () => {
  console.log("Screen share button clicked");
});

---

Layout Events

Monitor layout changes including layout type switches and participant list visibility.

Call Layout Changed

Fired when the call layout changes.

CometChatCalls.addEventListener("onCallLayoutChanged", (layout) => {
  console.log("Layout changed to:", layout);
});

Participant List Visible

Fired when the participant list panel is opened.

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

Participant List Hidden

Fired when the participant list panel is closed.

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

---

Participant Object Reference

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