Control the active call session programmatically using the static methods on CometChatCalls. These methods allow you to manage audio, video, screen sharing, 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.
Screen Sharing
Start Screen Sharing
Begin sharing your screen with other participants:
CometChatCalls.startScreenSharing();
Stop Screen Sharing
Stop sharing your screen:
CometChatCalls.stopScreenSharing();
Screen sharing requires additional platform-specific configuration. See Screen Sharing for setup instructions. Raise Hand
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
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 |
|---|
startScreenShare() | startScreenSharing() |
stopScreenShare() | stopScreenSharing() |
endSession() | leaveSession() |
