Custom Control Panel - CometChat Docs

Build a custom control panel by hiding the default UI and using the SDK’s action methods to control call functionality.

Hide Default Control Panel

Hide the built-in control panel when joining a session:

const callSettings = {
  hideControlPanel: true,
  // ... other settings
};

await CometChatCalls.joinSession(callToken, callSettings, container);

Build Custom Controls

With the control panel hidden, use the SDK’s action methods to build your own UI:

Audio Controls

// Mute/unmute microphone
function toggleAudio(isMuted) {
  if (isMuted) {
    CometChatCalls.unMuteAudio();
  } else {
    CometChatCalls.muteAudio();
  }
}

Video Controls

// Toggle camera
function toggleVideo(isPaused) {
  if (isPaused) {
    CometChatCalls.resumeVideo();
  } else {
    CometChatCalls.pauseVideo();
  }
}

// Toggle screen share
function toggleScreenShare(isSharing) {
  if (isSharing) {
    CometChatCalls.stopScreenSharing();
  } else {
    CometChatCalls.startScreenSharing();
  }
}

Leave Session

function leaveCall() {
  CometChatCalls.leaveSession();
}

Track State with Events

Listen to events to keep your custom UI in sync:

let isAudioMuted = false;
let isVideoPaused = false;
let isScreenSharing = false;

CometChatCalls.addEventListener("onAudioMuted", () => {
  isAudioMuted = true;
  updateUI();
});

CometChatCalls.addEventListener("onAudioUnMuted", () => {
  isAudioMuted = false;
  updateUI();
});

CometChatCalls.addEventListener("onVideoPaused", () => {
  isVideoPaused = true;
  updateUI();
});

CometChatCalls.addEventListener("onVideoResumed", () => {
  isVideoPaused = false;
  updateUI();
});

CometChatCalls.addEventListener("onScreenShareStarted", () => {
  isScreenSharing = true;
  updateUI();
});

CometChatCalls.addEventListener("onScreenShareStopped", () => {
  isScreenSharing = false;
  updateUI();
});

Hide Individual Buttons

Instead of hiding the entire control panel, you can hide specific buttons:

const callSettings = {
  hideControlPanel: false,
  hideLeaveSessionButton: false,
  hideToggleAudioButton: false,
  hideToggleVideoButton: false,
  hideScreenSharingButton: true,
  hideRecordingButton: true,
  hideRaiseHandButton: true,
  hideShareInviteButton: true,
  hideChangeLayoutButton: true,
  hideParticipantListButton: true,
  hideChatButton: true,
  hideVirtualBackgroundButton: true,
  // ... other settings
};

Complete Example

<div id="call-container"></div>

<div id="custom-controls">
  <button id="audio-btn">Mute</button>
  <button id="video-btn">Stop Video</button>
  <button id="screen-btn">Share Screen</button>
  <button id="leave-btn">Leave</button>
</div>

<script>
let isAudioMuted = false;
let isVideoPaused = false;

// Set up event listeners
CometChatCalls.addEventListener("onAudioMuted", () => {
  isAudioMuted = true;
  document.getElementById("audio-btn").textContent = "Unmute";
});

CometChatCalls.addEventListener("onAudioUnMuted", () => {
  isAudioMuted = false;
  document.getElementById("audio-btn").textContent = "Mute";
});

CometChatCalls.addEventListener("onVideoPaused", () => {
  isVideoPaused = true;
  document.getElementById("video-btn").textContent = "Start Video";
});

CometChatCalls.addEventListener("onVideoResumed", () => {
  isVideoPaused = false;
  document.getElementById("video-btn").textContent = "Stop Video";
});

// Button handlers
document.getElementById("audio-btn").onclick = () => {
  isAudioMuted ? CometChatCalls.unMuteAudio() : CometChatCalls.muteAudio();
};

document.getElementById("video-btn").onclick = () => {
  isVideoPaused ? CometChatCalls.resumeVideo() : CometChatCalls.pauseVideo();
};

document.getElementById("screen-btn").onclick = () => {
  CometChatCalls.startScreenSharing();
};

document.getElementById("leave-btn").onclick = () => {
  CometChatCalls.leaveSession();
};
</script>

Available Actions

All these methods can be used to build custom controls:

Action	Method
Mute audio	`CometChatCalls.muteAudio()`
Unmute audio	`CometChatCalls.unMuteAudio()`
Pause video	`CometChatCalls.pauseVideo()`
Resume video	`CometChatCalls.resumeVideo()`
Start screen share	`CometChatCalls.startScreenSharing()`
Stop screen share	`CometChatCalls.stopScreenSharing()`
Start recording	`CometChatCalls.startRecording()`
Stop recording	`CometChatCalls.stopRecording()`
Raise hand	`CometChatCalls.raiseHand()`
Lower hand	`CometChatCalls.lowerHand()`
Change layout	`CometChatCalls.setLayout(layout)`
Leave session	`CometChatCalls.leaveSession()`

See Actions for the complete list of available methods.

​Hide Default Control Panel

​Build Custom Controls

​Audio Controls

​Video Controls

​Screen Sharing

​Leave Session

​Track State with Events

​Hide Individual Buttons

​Complete Example

​Available Actions