> ## 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 Call ## Overview This guide demonstrates how to start call in to an web. 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. ```js 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 = 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); } ); } ``` | 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. 3. **htmlElement:** A unique DOM element inside which call UI will be loaded. A basic example of how to start a call session: ```js theme={null} const defaultLayout = true; const audioOnly = false; const callSettings = new CometChatCalls.CallSettingsBuilder() .enableDefaultLayout(defaultLayout) .setIsAudioOnlyCall(audioOnly) .setCallListener( new CometChatCalls.OngoingCallListener({ onUserListUpdated: (userList) => { console.log("user list:", userList); }, onCallEnded: () => { console.log("Call ended"); }, onSessionTimeout: () => { console.log("Call ended due to session timeout"); }, onError: (error) => { console.log("Error :", error); }, onMediaDeviceListUpdated: (deviceList) => { console.log("Device List:", deviceList); }, onUserMuted: (event) => { // This event will work in JS SDK v3.0.2-beta1 & later. console.log("Listener => onUserMuted:", { userMuted: event.muted, userMutedBy: event.mutedBy, }); }, onScreenShareStarted: () => { // This event will work in JS SDK v3.0.3 & later. console.log("Screen sharing started."); }, onScreenShareStopped: () => { // This event will work in JS SDK v3.0.3 & later. console.log("Screen sharing stopped."); }, onCallSwitchedToVideo: (event) => { // This event will work in JS SDK v3.0.8 & later. console.log("call switched to video:", { sessionId: event.sessionId, callSwitchInitiatedBy: event.initiator, callSwitchAcceptedBy: event.responder, }); }, onUserJoined: (user) => console.log("event => onUserJoined", user), onUserLeft: (user) => console.log("event => onUserLeft", user), }) ) .build(); const htmlElement = document.getElementById("ELEMENT_ID"); CometChatCalls.startSession(callToken, callSettings, htmlElement); ``` ```typescript theme={null} const defaultLayout = true; const audioOnly = false; const callSettings = new CometChatCalls.CallSettingsBuilder() .enableDefaultLayout(defaultLayout) .setIsAudioOnlyCall(audioOnly) .setCallListener( new CometChatCalls.OngoingCallListener({ onUserListUpdated: (userList) => { console.log("user list:", userList); }, onCallEnded: () => { console.log("Call ended"); }, onSessionTimeout: () => { console.log("Call ended due to session timeout"); } onError: (error) => { console.log("Error :", error); }, onMediaDeviceListUpdated: (deviceList) => { console.log("Device List:", deviceList); }, onUserMuted: (event) => { // This event will work in JS SDK v3.0.2-beta1 & later. console.log("Listener => onUserMuted:", { userMuted: event.muted, userMutedBy: event.mutedBy, }); }, onScreenShareStarted: () => { // This event will work in JS SDK v3.0.3 & later. console.log("Screen sharing started."); }, onScreenShareStopped: () => { // This event will work in JS SDK v3.0.3 & later. console.log("Screen sharing stopped."); }, onCallSwitchedToVideo: (event) => { // This event will work in JS SDK v3.0.8 & later. console.log("call switched to video:", { sessionId: event.sessionId, callSwitchInitiatedBy: event.initiator, callSwitchAcceptedBy: event.responder, }); }, onUserJoined: (user) => console.log("event => onUserJoined", user), onUserLeft: (user) => console.log("event => onUserLeft", user), }) ) .build(); const htmlElement = document.getElementById("ELEMENT_ID"); CometChatCalls.startSession(callToken, callSettings, htmlElement); ``` 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. | | `htmlElement` | DOM element inside which the call UI wll be rendered. | | Error Code | Error Messages | | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | | 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 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. | | `onError()` | This method is called when there is some error in establishing the call. | | `onCallEnded()` | This method is called when the call is successfully ended. The call details can be obtained from the `Call` object provided. | | `onSessionTimeout()` Available since v4.1.0 | This method is called when the call is ended due to session timeout. | | `onUserListUpdated(userList)` | This method is triggered every time a participant joins or leaves the call providing the list of users active in the call. | | `onMediaDeviceListUpdated(deviceList)` | This method is triggered if any new audio output source is available or becomes unavailable. | | `onUserMuted(event)` | This method is triggered when a user is muted in the ongoing call. The event object contains two keys named `muted` and `mutedBy` | | `onScreenShareStarted()` | This method is triggered when the local user starts sharing a screen. | | `onScreenShareStopped()` | This method is triggered when the local user stops sharing a screen. | | `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` | ## Listener 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)` ```js 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: () => { console.log("Call ended"); }, onCallEndButtonPressed: () => { console.log("End Call button pressed"); }, onError: (error) => { console.log("Call Error: ", error); }, onAudioModesUpdated: (audioModes) => { console.log("audio modes:", audioModes); }, onUserMuted: (event) => { console.log("user muted:", event); }, }); return () => CometChatCalls.removeCallEventListener("UNIQUE_ID"); }, []); ``` ## End Call Session To release the acquired calling resource and end the call, the end call session must be called. For Default Call You only need to call the end call method of the chat SDK for default calling flows. Direct calling flows do not require it. To end a call in the default call flow, you must call the CometChat.endCall() method, which belongs to the CometChat Chat SDK, and the CometChatCalls.endSession() method, which belongs to the CometChat Calls SDK. The user who pressed the end call button will call the CometChat.endCall() method, and the another user how was on call will call the two methods which is CometChat.clearActiveCall() and CometChatCalls.endSession() methods to release the calling resources The user who ended the call ```js theme={null} CometChat.endCall(); ``` ```typescript theme={null} CometChat.endCall(); ``` The another user who was on call ```js theme={null} CometChat.clearActiveCall(); CometChatCalls.endSession(); ``` ```typescript theme={null} CometChat.clearActiveCall(); CometChatCalls.endSession(); ``` ### For Direct Call ```js theme={null} CometChatCalls.endSession(); ``` ```typescript theme={null} CometChatCalls.endSession(); ``` ## 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 customise the overall calling experience. The properties for the call/conference can be set using the `CallSettingsBuilder` class. This will eventually give you an object of the `CallSettings` class which you can pass to the `startSession()` method to start the call. The options available for customisation 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** | | `showScreenShareButton(showScreenShareButton: boolean)` | If set to `true` it displays the ShareScreenButton in Button Layout. if set to `false` it hides the ShareScreenButton in Button Layout. **Default value = true** | | `showModeButton(showModeButton: boolean)` | If set to `true` it displays the ShowModeButton in Button Layout. if set to `false` it hides the ShowModeButton 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. `CometChat.CALL_MODE.DEFAULT`
2. `CometChat.CALL_MODE.SPOTLIGHT`
**Default value = CometChat.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** | | `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** | | `setMainVideoContainerSetting(containerSettings: MainVideoContainerSetting)` | This method can be used to customize the main video container. You can read more about this [here](/sdk/javascript/video-view-customisation). | | `setIdleTimeoutPeriod(idleTimeoutPeriod: number)` Available since v4.1.0 | Sets the idle timeout duration for the call. If the user remains the only participant for the specified time, a prompt will appear 60 seconds before the call is automatically ended. **Default value = 180 seconds** | In case you wish to achieve a completely customized UI for the Calling experience, you can do so by embedding default android buttons to the screen as per your requirement and then use the below methods to achieve different functionalities for the embedded buttons. For the use case where you wish to align your own custom buttons and not use the default layout provided by CometChat, you can embed the buttons in your layout and use the below methods to perform the corresponding operations: ### Mute Audio You can call the `muteAudio(mute: boolean)` method to mute/unmute your audio stream. ```js theme={null} CometChatCalls.muteAudio(true); ``` ```typescript theme={null} CometChatCalls.muteAudio(true); ``` If set to `true` the audio stream will be muted and if set to `false` the audio stream will be unmuted. ### Switch Camera **Available since:** `v4.2.0` This method is only supported on mobile browsers, it has no effect on desktop browsers. Use the switchCamera() method to toggle between the front and rear cameras. ```js theme={null} CometChatCalls.switchCamera(); ``` ```typescript theme={null} CometChatCalls.switchCamera(); ``` ### Pause Video You can call the `pauseVideo(pause: boolean)` method to pause/unpause video stream. ```js theme={null} CometChatCalls.pauseVideo(true); ``` ```typescript theme={null} CometChatCalls.pauseVideo(true); ``` If set to `true` the video stream will be paused and if set to `false` the video stream will be unpaused. ### Start Screen Share You can call `startScreenShare()` to start the screen share. ```js theme={null} CometChatCalls.startScreenShare(); ``` ```typescript theme={null} CometChatCalls.startScreenShare(); ``` ### Stop Screen Share You can call `stopScreenShare()` to stop the screen share. ```js theme={null} CometChatCalls.stopScreenShare(); ``` ```typescript theme={null} CometChatCalls.stopScreenShare(); ``` ### Set Mode You can use the `setMode(mode: string)` method to set the mode. ```js theme={null} let mode = CometChat.CALL_MODE.SPOTLIGHT; CometChatCalls.setMode(mode); ``` ```typescript theme={null} let mode = CometChat.CALL_MODE.SPOTLIGHT; CometChatCalls.setMode(mode); ``` ### Get Audio Input Devices You can use the `getAudioInputDevices()` method to get all the available audio input devices. ```js theme={null} let audioInputDevices = CometChatCalls.getAudioInputDevices(); ``` ```typescript theme={null} let audioInputDevices = CometChatCalls.getAudioInputDevices(); ``` ### Get Audio Output Devices You can use the `getAudioOutputDevices()` method to get all the available audio output devices. ```js theme={null} let audioOutputDevices = CometChatCalls.getAudioOutputDevices(); ``` ```typescript theme={null} let audioOutputDevices = CometChatCalls.getAudioOutputDevices(); ``` ### Get Video Input Devices You can use the `getVideoInputDevices()` method to get all the available video input devices. ```js theme={null} let videoInputDevices = CometChatCalls.getVideoInputDevices(); ``` ```typescript theme={null} let videoInputDevices = CometChatCalls.getVideoInputDevices(); ``` ### Set Audio Input Device You can use the `setAudioInputDevice(deviceId)` method to set the active audio input device. ```js theme={null} CometChatCalls.setAudioInputDevice(deviceId); ``` ```typescript theme={null} CometChatCalls.setAudioInputDevice(deviceId); ``` ### Set Audio Output Device You can use the `setAudioOutputDevice(deviceId)` method to set the active audio output device. ```js theme={null} CometChatCalls.setAudioOutputDevice(deviceId); ``` ```typescript theme={null} CometChatCalls.setAudioOutputDevice(deviceId); ``` ### Set Video Input Device You can use the `setVideoInputDevice(deviceId)` method to set the active video input device. ```js theme={null} CometChatCalls.setVideoInputDevice(deviceId); ``` ```typescript theme={null} CometChatCalls.setVideoInputDevice(deviceId); ``` ### Switch To Video Call You can use the `switchToVideoCall()` method to switch from audio call to video call.