> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Direct Calling ## Overview This guide demonstrates how to start call using Cometchat's calling sdk. Before you begin, we strongly recommend you read the calling setup guide. ## Generate Call Token Prior to starting the call session, it is necessary to have a call token. A call token can be generated using the `generateToken` method of `CometChatCalls` class. ```javascript theme={null} const loggedInUser = await CometChat.getLoggedinUser(); if (loggedInUser) { const authToken = loggedInUser.getAuthToken(); const sessionID = "SESSION_ID_HERE"; CometChatCalls.generateToken(sessionID, authToken).then( (res) => { console.log("Call token fetched: ", res.token); }, (err) => { console.log("Generating call token failed with error: ", err); } ); } ``` ```typescript theme={null} const loggedInUser: CometChat.User | null = await CometChat.getLoggedinUser(); if (loggedInUser) { const authToken: string = loggedInUser.getAuthToken(); const sessionID: string = "SESSION_ID_HERE"; CometChatCalls.generateToken(sessionID, authToken).then( (res: { token: string }) => { console.log("Call token fetched: ", res.token); }, (err: CometChat.CometChatException) => { console.log("Generating call token failed with error: ", err); } ); } ``` | Parameter | Description | | --------- | --------------------------------------------------------------------------------------------------------------------------------------- | | sessionID | A unique random session ID. In case you are using default call then session ID is available in the `Call` object. | | authToken | The user auth token is logged in user auth token which you can get by calling CometChat's Chat SDK method `CometChat.getLoggedinUser()` | | Error Code | Error Message | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | INVALID\_ARGUMENT\_EXCEPTION | If you pass invalid param to a function or you don't pass the required params. Example: Authtoken and session are required, Invalid callToken passed, please verify. | On success of `generateToken` method you will get the response object containing call token with key named `token`. ## Start Call Session The most important class that will be used in the implementation is the `CallSettings` class. This class allows you to set the various parameters for the call/conference. In order to set the various parameters of the `CallSettings` class, you need to use the `CallSettingsBuilder` class. Below are the various options available with the `CallSettings` class. The **mandatory** parameters that are required to be present for any call/conference to work are: 1. **callToken:** The unique token for the call/conference session. 2. **callSettings:** The object of CallSettings class. A basic example of how to start a call session: ```javascript theme={null} import { CometChatCalls } from '@cometchat/calls-sdk-ionic'; let audioOnly = false; let defaultLayout = true; let callListener = new CometChatCalls.OngoingCallListener({ onUserListUpdated: (userList) => { console.log("user list:", userList); }, onCallEnded: () => { console.log("Call ended"); }, onError: (error) => { console.log("Error :", error); }, onMediaDeviceListUpdated: (deviceList) => { console.log("Device List:", deviceList); }, onUserMuted: (event) => { console.log("Listener => onUserMuted:", { userMuted: event.userMuted, userMutedBy: event.userMutedBy, }); }, onCallSwitchedToVideo: (event) => { console.log("call switched to video:", { sessionId: event.sessionId, callSwitchInitiatedBy: event.initiator, callSwitchAcceptedBy: event.acceptor, }); }, onUserJoined: (user) => console.log("event => onUserJoined", user), onUserLeft: (user) => console.log("event => onUserLeft", user), }); let callSettings = new CometChatCalls.CallSettingsBuilder() .enableDefaultLayout(defaultLayout) .setIsAudioOnlyCall(audioOnly) .setCallEventListener(callListener) .build(); CometChatCalls.startSession(callsettings, callToken); ``` ```typescript theme={null} import { CometChatCalls } from '@cometchat/calls-sdk-ionic'; import { CallSettings } from '@cometchat/calls-sdk-ionic/dist/models/CallSettings'; import { OngoingCallListener } from '@cometchat/calls-sdk-ionic/dist/models/Listner'; let audioOnly = false; let defaultLayout = true; let callListener: OngoingCallListener = new CometChatCalls.OngoingCallListener({ onUserListUpdated: (userList) => { console.log("user list:", userList); }, onCallEnded: () => { console.log("Call ended"); }, onError: (error) => { console.log("Error :", error); }, onMediaDeviceListUpdated: (deviceList) => { console.log("Device List:", deviceList); }, onUserMuted: (event) => { console.log("Listener => onUserMuted:", { userMuted: event.userMuted, userMutedBy: event.userMutedBy, }); }, onCallSwitchedToVideo: (event) => { console.log("call switched to video:", { sessionId: event.sessionId, callSwitchInitiatedBy: event.initiator, callSwitchAcceptedBy: event.acceptor, }); }, onUserJoined: (user) => console.log("event => onUserJoined", user), onUserLeft: (user) => console.log("event => onUserLeft", user), }); let callSettings: CallSettings = new CometChatCalls.CallSettingsBuilder() .enableDefaultLayout(defaultLayout) .setIsAudioOnlyCall(audioOnly) .setCallEventListener(callListener) .build(); CometChatCalls.startSession(callsettings, callToken); ``` The `setIsAudioOnlyCall()` method allows you to set if the call is supposed to be an audio call or an audio-video call. If set to true, the call will be an audio-only call else when set to false the call will be an audio-video call. The default is false, so if not set, the call will be an audio-video call. | Parameter | Description | | -------------- | ---------------------------------------------------------------------------------------------------------------------------- | | `callToken` | An authorization token used to start the call session, received by calling `generateToken` method of `CometChatCalls` class. | | `callSettings` | Object of `CallSettings` class. | | Error Code | Error Message | | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | INVALID\_PROP\_EXCEPTION | If you pass an invalid prop to a functional component or you don't pass the required prop. Example: Component requires valid call settings. | | API\_ERROR | If there is some error thrown by the API server. For example, unauthorized. | | UNKNOWN\_API\_ERROR | If there is some API error but it didn't come from the server. For example, if the internet is not available and API is called. | | AUTH\_ERR\_TOKEN\_INVALID\_SIGNATURE | If token is invalid. | The `OngoingCallListener` listener provides you with the below callback methods: | Callback Method | Description | | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `onUserJoined(user)` | This method is called when any other user joins the call. The user details can be obtained from the `user` object provided. | | `onUserLeft(user)` | This method is called when a user leaves the call. The details of the user can be obtained from the provided `user` object. | | `onCallEnded()` | This method is called when the call is successfully ended. | | `onUserListUpdated(userList)` | This method is triggered every time a participant joins or leaves the call providing the list of users active in the call. | | `onAudioModesUpdated(audioModes)` | This callback is triggered if any new audio output source is available or becomes unavailable. | | `onCallSwitchedToVideo(event)` | This callback is triggered when an audio call is converted into a video call. The event object contains three keys named `sessionId`, `initiator` and `responder`. | | `onUserMuted(event)` | This callback is triggered when a user is muted in the call. | ## Listeners Listeners can be added in two ways the first one is to use .setCallEventListener(listeners : OngoingCallListener) method in CallSettingsBuilder or PresenterSettingsBuilder class. The second way is to use CometChatCalls.addCallEventListener(name: string, callListener: OngoingCallListener) by this you can add multiple listeners and remove the specific listener by their name CometChatCalls.removeCallEventListener(name: string) ```javascript theme={null} useEffect(() => { CometChatCalls.addCallEventListener("UNIQUE_ID", { onUserJoined: (user) => { console.log("user joined:", user); }, onUserLeft: (user) => { console.log("user left:", user); }, onUserListUpdated: (userList) => { console.log("user list:", userList); }, onCallEnded: (call) => { console.log("Call ended:", call); }, onCallEndButtonPressed: (call) => { console.log("End Call button pressed:", call); }, onError: (error) => { console.log("Call Error: ", error); }, onAudioModesUpdated: (audioModes) => { console.log("audio modes:", audioModes); }, onCallSwitchedToVideo: (data) => { console.log("call switched to video:", data); }, onUserMuted: (data) => { console.log("user muted:", data); }, }); return () => CometChatCalls.removeCallEventListener("UNIQUE_ID"); }, []); ``` ## Settings The `CallSettings` class is the most important class when it comes to the implementation of the Calling feature. This is the class that allows you to customize the overall calling experience. The properties for the call/conference can be set using the `CallSettingsBuilder` class. This will eventually give you and object of the `CallSettings` class which you can pass to the `startSession()` method to start the call. The options available for customization of calls are: | Setting | Description | | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `enableDefaultLayout(defaultLayout: boolean)` | If set to `true` enables the default layout for handling the call operations. If set to `false` it hides the button layout and just displays the Call View. **Default value = true** | | `showEndCallButton(showEndCallButton: boolean)` | If set to `true` it displays the EndCallButton in Button Layout. if set to `false` it hides the EndCallButton in Button Layout. **Default value = true** | | `showPauseVideoButton(showPauseVideoButton: boolean)` | If set to `true` it displays the PauseVideoButton in Button Layout. if set to `false` it hides the PauseVideoButton in Button Layout. **Default value = true** | | `showMuteAudioButton(showMuteAudioButton: boolean)` | If set to `true` it displays the MuteAudioButton in Button Layout. if set to `false` it hides the MuteAudioButton in Button Layout. **Default value = true** | | `showSwitchCameraButton(showSwitchCameraButton: boolean)` | If set to `true` it displays the SwitchCameraButton in Button Layout. if set to `false` it hides the SwitchCameraButton in Button Layout. **Default value = true** | | `showAudioModeButton(showAudioModeButton: boolean)` | If set to `true` it displays the AudioModeButton in Button Layout. if set to `false` it hides the AudioModeButton in Button Layout. **Default value = true** | | `setIsAudioOnlyCall(audioOnly: boolean)` | If set to true, the call will be strictly an audio call. If set to false, the call will be an audio-video call. **Default value = false** | | `setMode(mode: string)` | CometChat provides 2 options for the calling UI. 1. CometChatCalls.CALL\_MODE.DEFAULT 2. CometChatCalls.CALL\_MODE.SPOTLIGHT **Default value = CometChatCalls.CALL\_MODE.DEFAULT** | | `startWithAudioMuted(audioMuted: boolean)` | This ensures the call is started with the audio muted if set to true. **Default value = false** | | `startWithVideoMuted(videoMuted: boolean)` | This ensures the call is started with the video paused if set to true. **Default value = false** | | `setDefaultAudioMode(audioMode: string)` | This method can be used if you wish to start the call with a specific audio mode. The available options are
1. CometChatCalls.AUDIO\_MODE.SPEAKER = "SPEAKER"
2. CometChatCalls.AUDIO\_MODE.EARPIECE = "EARPIECE"
3. CometChatCalls.AUDIO\_MODE.BLUETOOTH = "BLUETOOTH"
4. CometChatCalls.AUDIO\_MODE.HEADPHONES = "HEADPHONES" | | `showSwitchToVideoCallButton(switchCall: boolean)` | This method shows/hides the switch to video call button. If set to true it will display the switch to video call button. If set to false it will hide the switch to video call button. **Default value = true** | | `setAvatarMode(avatarMode: string)` | This method sets the mode of avatar. The avatar mode can be `circle`, `square` or `fullscreen`. **Default value = circle** | | `setMainVideoContainerSetting(containerSettings: MainVideoContainerSetting)` | This method can be used to customize the main video container. You can read more about this [here](/sdk/ionic/video-view-customisation). | | `enableVideoTileClick(enableVideoTileClick: boolean)` | This method can be used to enable/disable video tile click functionality in **Spotlight** mode. **Default value = true** | | `enableVideoTileDrag(enableVideoTileDrag: boolean)` | This method can be used to enable/disable video tile drag functionality in **Spotlight** mode. **Default value = true** |