Actions - CometChat Docs

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.

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

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

​Audio Controls

​Mute Audio

​Unmute Audio

​Video Controls

​Pause Video

​Resume Video

​Switch Camera

​Session Control

​Leave Session

​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

​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

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

Chat Integration

Set Chat Button Unread Count

Complete Example

Legacy Methods

Related Documentation