Custom Control Panel

CometChat Calling SDK v5 - Beta Release - Custom Control Panel for JavaScript

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();
  }
}

Screen Sharing

// 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.