Actions

Control the active call session programmatically using the static methods on CometChatCalls. These methods allow you to manage audio, video, and other call features.

Audio Controls

Mute Audio

Mute the local user’s microphone:

CometChatCalls.muteAudio();

Unmute Audio

Unmute the local user’s microphone:

CometChatCalls.unmuteAudio();

Video Controls

Pause Video

Stop sending the local user’s video:

CometChatCalls.pauseVideo();

Resume Video

Resume sending the local user’s video:

CometChatCalls.resumeVideo();

Switch Camera

Toggle between front and rear cameras:

CometChatCalls.switchCamera();

Session Control

Leave Session

End the call and leave the session:

CometChatCalls.leaveSession();

The leaveSession() method ends the call for the local user. Other participants will remain in the call unless they also leave.

leaveSession() takes no session ID. CometChatCalls is a singleton that tracks one active session at a time, so this leaves whichever session is currently in progress. The same applies to every action on this page. See Single Active Session.

Transcription

Available since v5.0.5

Start Transcription

Begin server-side transcription of the call. This also enables the live closed captions overlay:

CometChatCalls.startTranscription();

Transcription requires the feature to be enabled for your CometChat app.

Stop Transcription

Stop the current transcription and clear any captions currently on screen. The transcript is saved and can be retrieved with TranscriptRequestBuilder:

CometChatCalls.stopTranscription();

Raise Hand

Signal to other participants that you want attention:

CometChatCalls.raiseHand();

Lower Hand

Lower your raised hand:

CometChatCalls.lowerHand();

Layout Control

Set Layout

Change the call layout programmatically:

// Available layouts: 'TILE', 'SIDEBAR', 'SPOTLIGHT'
CometChatCalls.setLayout('TILE');
CometChatCalls.setLayout('SIDEBAR');
CometChatCalls.setLayout('SPOTLIGHT');

Layout	Description
`TILE`	Grid layout showing all participants equally
`SIDEBAR`	Main video with participants in a sidebar
`SPOTLIGHT`	Focus on one participant with others minimized

Picture-in-Picture

Enable Picture-in-Picture

Enable PiP mode to continue the call in a floating window:

CometChatCalls.enablePictureInPictureLayout();

Disable Picture-in-Picture

Exit PiP mode and return to full-screen:

CometChatCalls.disablePictureInPictureLayout();

Participant Management

Pin Participant

Pin a participant to the main view:

const participantId = 'participant_pid';
const type = 'human'; // 'human' or 'screen-share'

CometChatCalls.pinParticipant(participantId, type);

Parameter	Type	Description
`participantId`	string	The participant’s ID
`type`	string	`'human'` for user video, `'screen-share'` for screen share

Unpin Participant

Remove the pinned participant:

CometChatCalls.unpinParticipant();

Mute Participant

Mute another participant’s audio (requires moderator permissions):

const participantId = 'participant_pid';
CometChatCalls.muteParticipant(participantId);

Pause Participant Video

Pause another participant’s video (requires moderator permissions):

const participantId = 'participant_pid';
CometChatCalls.pauseParticipantVideo(participantId);

Participant List Panel

Show, hide, or toggle the built-in participant list panel programmatically:

CometChatCalls.showParticipantList();
CometChatCalls.hideParticipantList();
CometChatCalls.toggleParticipantList();

Chat Integration

Set Chat Button Unread Count

Update the unread message count on the chat button:

CometChatCalls.setChatButtonUnreadCount(5);

Complete Example

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

function CallControls() {
  const [isAudioMuted, setIsAudioMuted] = useState(false);
  const [isVideoMuted, setIsVideoMuted] = useState(false);
  const [isHandRaised, setIsHandRaised] = useState(false);
  const [currentLayout, setCurrentLayout] = useState<'TILE' | 'SIDEBAR' | 'SPOTLIGHT'>('TILE');

  const toggleAudio = () => {
    if (isAudioMuted) {
      CometChatCalls.unmuteAudio();
    } else {
      CometChatCalls.muteAudio();
    }
    setIsAudioMuted(!isAudioMuted);
  };

  const toggleVideo = () => {
    if (isVideoMuted) {
      CometChatCalls.resumeVideo();
    } else {
      CometChatCalls.pauseVideo();
    }
    setIsVideoMuted(!isVideoMuted);
  };

  const toggleHand = () => {
    if (isHandRaised) {
      CometChatCalls.lowerHand();
    } else {
      CometChatCalls.raiseHand();
    }
    setIsHandRaised(!isHandRaised);
  };

  const cycleLayout = () => {
    const layouts: Array<'TILE' | 'SIDEBAR' | 'SPOTLIGHT'> = ['TILE', 'SIDEBAR', 'SPOTLIGHT'];
    const currentIndex = layouts.indexOf(currentLayout);
    const nextLayout = layouts[(currentIndex + 1) % layouts.length];
    CometChatCalls.setLayout(nextLayout);
    setCurrentLayout(nextLayout);
  };

  const handleSwitchCamera = () => {
    CometChatCalls.switchCamera();
  };

  const handleEndCall = () => {
    CometChatCalls.leaveSession();
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={toggleAudio}>
        <Text style={styles.buttonText}>
          {isAudioMuted ? 'Unmute' : 'Mute'}
        </Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.button} onPress={toggleVideo}>
        <Text style={styles.buttonText}>
          {isVideoMuted ? 'Show Video' : 'Hide Video'}
        </Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.button} onPress={handleSwitchCamera}>
        <Text style={styles.buttonText}>Switch Camera</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.button} onPress={toggleHand}>
        <Text style={styles.buttonText}>
          {isHandRaised ? 'Lower Hand' : 'Raise Hand'}
        </Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.button} onPress={cycleLayout}>
        <Text style={styles.buttonText}>Layout: {currentLayout}</Text>
      </TouchableOpacity>

      <TouchableOpacity style={[styles.button, styles.endButton]} onPress={handleEndCall}>
        <Text style={styles.buttonText}>End Call</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    padding: 16,
    gap: 8,
  },
  button: {
    backgroundColor: '#333',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
  },
  endButton: {
    backgroundColor: '#ff4444',
  },
  buttonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
});

export default CallControls;

Legacy Methods

These methods are deprecated but still available for backward compatibility:

Deprecated Method	Replacement
`endSession()`	`leaveSession()`

Events - Listen for call events
Participant Management - Manage participants
Call Layouts - Layout options
Transcription - Transcription and closed captions

Overview

Getting Started

Call Session

Features

Advanced

Migration Guide

Resources

Audio Controls

Mute Audio

Unmute Audio

Video Controls

Pause Video

Resume Video

Switch Camera

Session Control

Leave Session

Transcription

Start Transcription

Stop Transcription

Raise Hand

Raise Hand

Lower Hand

Layout Control

Set Layout

Picture-in-Picture

Enable Picture-in-Picture

Disable Picture-in-Picture

Participant Management

Pin Participant

Unpin Participant

Mute Participant

Pause Participant Video

Participant List Panel

Chat Integration

Set Chat Button Unread Count

Complete Example

Legacy Methods

​Audio Controls

​Mute Audio

​Unmute Audio

​Video Controls

​Pause Video

​Resume Video

​Switch Camera

​Session Control

​Leave Session

​Transcription

​Start Transcription

​Stop Transcription

​Raise Hand

​Raise Hand

​Lower Hand

​Layout Control

​Set Layout

​Picture-in-Picture

​Enable Picture-in-Picture

​Disable Picture-in-Picture

​Participant Management

​Pin Participant

​Unpin Participant

​Mute Participant

​Pause Participant Video

​Participant List Panel

​Chat Integration

​Set Chat Button Unread Count

​Complete Example

​Legacy Methods

​Related Documentation

Audio Controls

Mute Audio

Unmute Audio

Video Controls

Pause Video

Resume Video

Switch Camera

Session Control

Leave Session

Transcription

Start Transcription

Stop Transcription

Raise Hand

Raise Hand

Lower Hand

Layout Control

Set Layout

Picture-in-Picture

Enable Picture-in-Picture

Disable Picture-in-Picture

Participant Management

Pin Participant

Unpin Participant

Mute Participant

Pause Participant Video

Participant List Panel

Chat Integration

Set Chat Button Unread Count

Complete Example

Legacy Methods

Related Documentation