> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-card-builder.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Direct Calling

> Direct Calling — CometChat documentation.

This section will guide you to start the call/conference directly with the session id of your choice. The session id is the most important parameter as all the users joining the same session id will be connected to the same call/conference.

## Implementation

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 parameter is the sessionId for the call/conference. You can use the `setSessionId()` method of the `CallSettingsBuilder` to set the session Id of the call.

A basic example of how to start a direct call:

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    let sessionID = "SESSION_ID";
    let audioOnly = false;
    let deafaultLayout = true;

    let callSettings = new CometChat.CallSettingsBuilder()
                      .enableDefaultLayout(deafaultLayout)
                      .setSessionID(sessionID)
                      .setIsAudioOnlyCall(audioOnly)
                      .build();

    CometChat.startCall(
    callSettings,
    document.getElementById("callScreen"),
    new CometChat.OngoingCallListener({
      	onUserListUpdated: userList => {
      		console.log("user list:", userList);
      },
      onCallEnded: call => {
        console.log("Call ended:", call);
      },
      onError: error => {
        console.log("Error :", error);
      },
      onMediaDeviceListUpdated: deviceList => {
        console.log("Device List:", deviceList);
      },
      onUserMuted: (userMuted, userMutedBy) => {
        // This event will work in JS SDK v2.4.1-beta1 & later.
        console.log("Listener => onUserMuted:", userMuted, userMutedBy);
      },
      onScreenShareStarted: () => {
        // This event will work in JS SDK v2.4.1 & later.
        console.log("Screen sharing started.");
      },
      onScreenShareStopped: () => {
        // This event will work in JS SDK v2.4.1 & later.
        console.log("Screen sharing stopped.");
      }
    })
    );
    ```
  </Tab>
</Tabs>

The `setAudioOnlyCall()` 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.

## 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 an object of the `CallSettings` class which you can pass to the `startCall()` method to start the call.

The **mandatory** parameters that are required to be present for any call/conference to work are:

1. sessionId - The unique session Id for the call/conference session.

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**                                                                           |
| `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 ser to false, the call will be an audio-video call. **Default value = false**                                                                                              |
| `setMode(mode: string)`                                 | CometChat provides 4 options for the calling UI. 1. CometChat.CALL\_MODE.DEFAULT 2. CometChat.CALL\_MODE.SPOTLIGHT 3. CometChat.CALL\_MODE.SINGLE 4. CometChat.CALL\_MODE.GRID **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**                                                                                                                                       |
| `setCustomCSS(customCSS: string)`                       | This will apply the given CSS on the Calling UI. For example: let customCSS = ".main-container\{border: 1px solid yellow}"; setCustomCSS(customCSS) You can read more about custom CSS [here](/sdk/javascript/2.0/calling-custom-css). |
| `forceLegacyUI(legacyUI: boolean)`                      | This ensures that the legacy UI is used. **Default value = true**                                                                                                                                                                      |

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.

<Tabs>
  <Tab title="Mute Audio">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    callController.muteAudio(true);
    ```
  </Tab>
</Tabs>

If set to `true` the audio stream will be muted and if set to `false` the audio stream will be unmuted.

### Pause Video

You can call the `pauseVideo(pause: boolean)` method to pause/unpause video stream.

<Tabs>
  <Tab title="Pause Video">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    callController.pauseVideo(true);   
    ```
  </Tab>
</Tabs>

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.

<Tabs>
  <Tab title="Start Screen Share">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    callController.startScreenShare();
    ```
  </Tab>
</Tabs>

### Stop Screen Share

You can call `stopScreenShare()` to stop the screen share.

<Tabs>
  <Tab title="Stop Screen Share">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    callController.stopScreenShare();
    ```
  </Tab>
</Tabs>

### Set Mode

You can use the `setMode(mode: string)` method to set the mode.

<Tabs>
  <Tab title="Set Mode">
    ```javascript theme={null}
    let mode = CometChat.CALL_MODE.SPOTLIGHT;
    let callController = CometChat.CallController.getInstance();
    callController.setMode(mode);
    ```
  </Tab>
</Tabs>

### Get Audio Input Devices

You can use the `getAudioInputDevices()` method to get all the available audio input devices.

<Tabs>
  <Tab title="Get Audio Input Devices">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    let audioInputDevices = callController.getAudioInputDevices();
    ```
  </Tab>
</Tabs>

### Get Audio Output Devices

You can use the `getAudioOutputDevices()` method to get all the available audio output devices.

<Tabs>
  <Tab title="Get Audio Output Devices">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    let audioOutputDevices = callController.getAudioOutputDevices();
    ```
  </Tab>
</Tabs>

### Get Video Input Devices

You can use the `getVideoInputDevices()` method to get all the available video input devices.

<Tabs>
  <Tab title="Get Video Input Devices">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    let videoInputDevices = callController.getVideoInputDevices();
    ```
  </Tab>
</Tabs>

### Set Audio Input Device

You can use the `setAudioInputDevice(deviceId)` method to set the active audio input device.

<Tabs>
  <Tab title="Set Audio Input Devices">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    callController.setAudioInputDevice(deviceId);
    ```
  </Tab>
</Tabs>

### Set Audio Output Device

You can use the `setAudioOutputDevice(deviceId)` method to set the active audio output device.

<Tabs>
  <Tab title="Set Audio Output Devices">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    callController.setAudioOutputDevice(deviceId);
    ```
  </Tab>
</Tabs>

### Set Video Input Device

You can use the `setVideoInputDevice(deviceId)` method to set the active video input device.

<Tabs>
  <Tab title="Set Video Input Devices">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    callController.setVideoInputDevice(deviceId);
    ```
  </Tab>
</Tabs>

### End Call

You can use the `CometChat.endCall()` method of the `CometChat` class to end the call.

<Tabs>
  <Tab title="End Call">
    ```javascript theme={null}
    CometChat.endCall("SESSION_ID_FOR_THE_CALL").then(
      call => {
      	console.log('call ended', call);
      }, error => {
      	console.log('error', error);
      }
    );
    ```
  </Tab>
</Tabs>

<Warning>
  The `CometChat.getActiveCall()` method in case of Direct Calling will return null and all the details related to the call session will have to be saved and maintained at your end.
</Warning>

## Call Participant Count

In order to get the number of participants in any call, you can use the `getCallParticipantCount()` method. This method takes the session id for the call and returns the number or participants that are active in the call

<Tabs>
  <Tab title="Call Participant Count">
    ```javascript theme={null}
    let sessionId = "CALL_SESSION_ID";
    let callType = "DIRECT";

    CometChat.getCallParticipantCount(sessionId, callType).then(
      count => {
      	console.log("Participants count =", count);
      }, error => {
      	console.log("Some error occurred =", error);
      }
    );
    ```
  </Tab>
</Tabs>