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

# Standalone Calling

> Implement video and audio calling using only the CometChat Calls SDK without the Chat SDK. Covers authentication, token generation, session management, and call controls.

<Accordion title="AI Integration Quick Reference">
  ```javascript theme={null}
  let sessionId = "SESSION_ID";
  let userAuthToken = "USER_AUTH_TOKEN";
  let htmlElement = document.getElementById("call-screen");
  let callListener = {
    onCallEnded: () => console.log("Call ended"),
    onUserJoined: (user) => console.log("User joined:", user),
    onUserLeft: (user) => console.log("User left:", user),
  };

  // Generate call token (requires user auth token from REST API)
  const callToken = await CometChatCalls.generateToken(sessionId, userAuthToken);

  // Start call session
  const callSettings = new CometChatCalls.CallSettingsBuilder()
    .enableDefaultLayout(true)
    .setIsAudioOnlyCall(false)
    .setCallListener(callListener)
    .build();
  CometChatCalls.startSession(callToken.token, callSettings, htmlElement);

  // End session
  CometChatCalls.endSession();
  ```
</Accordion>

Standalone Calling lets you add voice and video calls using only the CometChat Calls SDK — no Chat SDK required. This is ideal when you already have your own messaging system and just need calling, or when you want the smallest possible SDK footprint.

The key difference from the regular [Call Session](/sdk/javascript/direct-call) flow is authentication: instead of using `CometChat.getLoggedinUser()`, you obtain auth tokens directly from the CometChat REST API.

<Note>
  Before you begin, ensure you have completed the [Calls SDK setup](/sdk/javascript/calling-setup).
</Note>

## User Authentication

To start a call session, you need a user auth token. Since this implementation doesn't use the Chat SDK, you'll need to obtain the auth token via the CometChat REST API.

<Note>
  To understand user authentication in CometChat, see the [User Auth](/fundamentals/user-auth) documentation.
</Note>

You can obtain the auth token using one of these REST API endpoints:

* [Create Auth Token](/rest-api/auth-tokens/create) — Creates a new auth token for a user
* [Get Auth Token](/rest-api/auth-tokens/get) — Retrieves an existing auth token

<Note>
  For testing or POC purposes, you can create an auth token directly from the [CometChat Dashboard](https://app.cometchat.com). Navigate to **Users & Groups → Users**, select a user, and click **+ Create Auth Token**.
</Note>

Store the auth token securely in your application for use when generating call tokens.

## Generate Call Token

A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call.

You can generate the token just before starting the call, or generate and store it ahead of time based on your use case.

Use the `generateToken()` method to create a call token:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const sessionId: string = "UNIQUE_SESSION_ID"; // Generate a unique session ID
    const userAuthToken: string = "USER_AUTH_TOKEN"; // Obtained from REST API

    CometChatCalls.generateToken(sessionId, userAuthToken).then(
      (callToken: any) => {
        console.log("Call token generated:", callToken.token);
        // Use callToken to start the session
      },
      (error: any) => {
        console.log("Token generation failed:", error);
      }
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const sessionId = "UNIQUE_SESSION_ID"; // Generate a unique session ID
    const userAuthToken = "USER_AUTH_TOKEN"; // Obtained from REST API

    CometChatCalls.generateToken(sessionId, userAuthToken).then(
      (callToken) => {
        console.log("Call token generated:", callToken.token);
        // Use callToken to start the session
      },
      (error) => {
        console.log("Token generation failed:", error);
      }
    );
    ```
  </Tab>
</Tabs>

| Parameter       | Description                                                                                                         |
| --------------- | ------------------------------------------------------------------------------------------------------------------- |
| `sessionId`     | A unique session ID for the call. Generate this yourself or use a shared ID for participants to join the same call. |
| `userAuthToken` | The user auth token obtained from the CometChat REST API.                                                           |

The `Promise` resolves with an object containing a `token` property (string) that you pass to `startSession()`.

## Start Call Session

Use the `startSession()` method to join a call session. This method requires:

1. A call token (generated in the previous step)
2. A `CallSettings` object that configures the call UI and behavior
3. An HTML element where the call UI will be rendered

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const callListener = new CometChatCalls.OngoingCallListener({
      onUserJoined: (user: any) => {
        console.log("User joined:", user);
      },
      onUserLeft: (user: any) => {
        console.log("User left:", user);
      },
      onUserListUpdated: (userList: any[]) => {
        console.log("User list updated:", userList);
      },
      onCallEnded: () => {
        console.log("Call ended");
        CometChatCalls.endSession();
        // Close calling screen
      },
      onCallEndButtonPressed: () => {
        console.log("End call button pressed");
        CometChatCalls.endSession();
        // Close calling screen
      },
      onError: (error: any) => {
        console.log("Call error:", error);
      },
      onMediaDeviceListUpdated: (deviceList: any[]) => {
        console.log("Device list updated:", deviceList);
      },
      onUserMuted: (event: any) => {
        console.log("User muted:", event);
      },
      onScreenShareStarted: () => {
        console.log("Screen sharing started");
      },
      onScreenShareStopped: () => {
        console.log("Screen sharing stopped");
      },
      onCallSwitchedToVideo: (event: any) => {
        console.log("Call switched to video:", event);
      },
      onSessionTimeout: () => {
        console.log("Session timed out");
      }
    });

    const callSettings = new CometChatCalls.CallSettingsBuilder()
      .enableDefaultLayout(true)
      .setIsAudioOnlyCall(false)
      .setCallListener(callListener)
      .build();

    const htmlElement = document.getElementById("call-container") as HTMLElement;
    CometChatCalls.startSession(callToken, callSettings, htmlElement);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const callListener = new CometChatCalls.OngoingCallListener({
     onUserJoined: (user) => {
     console.log("User joined:", user);
     },
     onUserLeft: (user) => {
     console.log("User left:", user);
     },
     onUserListUpdated: (userList) => {
     console.log("User list updated:", userList);
     },
     onCallEnded: () => {
     console.log("Call ended");
     CometChatCalls.endSession();
     // Close calling screen
     },
     onCallEndButtonPressed: () => {
     console.log("End call button pressed");
     CometChatCalls.endSession();
     // Close calling screen
     },
     onError: (error) => {
     console.log("Call error:", error);
     },
     onMediaDeviceListUpdated: (deviceList) => {
     console.log("Device list updated:", deviceList);
     },
     onUserMuted: (event) => {
     console.log("User muted:", event);
     },
     onScreenShareStarted: () => {
     console.log("Screen sharing started");
     },
     onScreenShareStopped: () => {
     console.log("Screen sharing stopped");
     },
     onCallSwitchedToVideo: (event) => {
     console.log("Call switched to video:", event);
     },
     onSessionTimeout: () => {
     console.log("Session timed out");
     }
    });

    const callSettings = new CometChatCalls.CallSettingsBuilder()
     .enableDefaultLayout(true)
     .setIsAudioOnlyCall(false)
     .setCallListener(callListener)
     .build();

    const htmlElement = document.getElementById("call-container") as HTMLElement;
    CometChatCalls.startSession(callToken, callSettings, htmlElement);
    ```
  </Tab>
</Tabs>

| Parameter      | Description                                                         |
| -------------- | ------------------------------------------------------------------- |
| `callToken`    | The token received from `generateToken()` onSuccess                 |
| `callSettings` | Object of `CallSettings` class configured via `CallSettingsBuilder` |
| `htmlElement`  | DOM element where the call UI will be rendered                      |

`startSession()` renders the call UI inside the provided HTML element and joins the user into the active call session.

### Call Settings

Configure the call experience using the following `CallSettingsBuilder` methods:

| Method                                                    | Description                                                                                                                                              |
| --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `enableDefaultLayout(boolean)`                            | Enables or disables the default call UI layout with built-in controls. `true` shows the default layout. `false` hides the button layout. Default: `true` |
| `setIsAudioOnlyCall(boolean)`                             | Sets whether the call is audio-only or audio-video. `true` for audio-only, `false` for audio-video. Default: `false`                                     |
| `setCallListener(OngoingCallListener)`                    | Sets the listener to receive call events. See [Call Listeners](#call-listeners).                                                                         |
| `setMode(string)`                                         | Sets the call UI layout mode. Available: `CometChat.CALL_MODE.DEFAULT`, `CometChat.CALL_MODE.SPOTLIGHT`. Default: `DEFAULT`                              |
| `startWithAudioMuted(boolean)`                            | Starts the call with the microphone muted. Default: `false`                                                                                              |
| `startWithVideoMuted(boolean)`                            | Starts the call with the camera turned off. Default: `false`                                                                                             |
| `showEndCallButton(boolean)`                              | Shows or hides the end call button in the default layout. Default: `true`                                                                                |
| `showMuteAudioButton(boolean)`                            | Shows or hides the mute audio button. Default: `true`                                                                                                    |
| `showPauseVideoButton(boolean)`                           | Shows or hides the pause video button. Default: `true`                                                                                                   |
| `showScreenShareButton(boolean)`                          | Shows or hides the screen share button. Default: `true`                                                                                                  |
| `showModeButton(boolean)`                                 | Shows or hides the mode toggle button (switch between DEFAULT and SPOTLIGHT). Default: `true`                                                            |
| `showSwitchToVideoCallButton(boolean)`                    | Shows or hides the button to upgrade an audio call to video. Default: `true`                                                                             |
| `setMainVideoContainerSetting(MainVideoContainerSetting)` | Customizes the main video container. See [Video View Customization](/sdk/javascript/video-view-customisation).                                           |
| `setIdleTimeoutPeriod(number)`                            | Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: `180` seconds. *v4.1.0+*                                      |

## End Call Session

To end the call session and release all media resources (camera, microphone, network connections), call `CometChatCalls.endSession()` in the `onCallEndButtonPressed()` callback.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    onCallEndButtonPressed: () => {
      CometChatCalls.endSession();
      // Close the calling screen
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    onCallEndButtonPressed: () => {
      CometChatCalls.endSession();
      // Close the calling screen
    }
    ```
  </Tab>
</Tabs>

## Call Listeners

The `OngoingCallListener` provides real-time callbacks for call session events, including participant changes, call state updates, and error conditions.

You can register listeners in two ways:

1. **Via CallSettingsBuilder:** Use `.setCallListener(listener)` when building call settings
2. **Via addCallEventListener:** Use `CometChatCalls.addCallEventListener(listenerId, listener)` to add multiple listeners

Each listener requires a unique `listenerId` string. This ID is used to:

* **Prevent duplicate registrations** — Re-registering with the same ID replaces the existing listener
* **Enable targeted removal** — Remove specific listeners without affecting others

<Warning>
  Always remove listeners when they're no longer needed (e.g., on component unmount or page navigation). Failing to remove listeners can cause memory leaks and duplicate event handling.
</Warning>

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const listenerId: string = "UNIQUE_LISTENER_ID";

    CometChatCalls.addCallEventListener(listenerId, {
      onUserJoined: (user: any) => {
        console.log("User joined:", user);
      },
      onUserLeft: (user: any) => {
        console.log("User left:", user);
      },
      onUserListUpdated: (userList: any[]) => {
        console.log("User list updated:", userList);
      },
      onCallEnded: () => {
        console.log("Call ended");
        CometChatCalls.endSession();
        // Close calling screen
      },
      onCallEndButtonPressed: () => {
        console.log("End call button pressed");
        CometChatCalls.endSession();
        // Close calling screen
      },
      onError: (error: any) => {
        console.log("Call error:", error);
      },
      onMediaDeviceListUpdated: (deviceList: any[]) => {
        console.log("Device list updated:", deviceList);
      },
      onUserMuted: (event: any) => {
        console.log("User muted:", event);
      },
      onScreenShareStarted: () => {
        console.log("Screen sharing started");
      },
      onScreenShareStopped: () => {
        console.log("Screen sharing stopped");
      },
      onCallSwitchedToVideo: (event: any) => {
        console.log("Call switched to video:", event);
      },
      onSessionTimeout: () => {
        console.log("Session timed out");
      }
    });

    // Remove listener when done
    CometChatCalls.removeCallEventListener(listenerId);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const listenerId = "UNIQUE_LISTENER_ID";

    CometChatCalls.addCallEventListener(listenerId, {
      onUserJoined: (user) => {
        console.log("User joined:", user);
      },
      onUserLeft: (user) => {
        console.log("User left:", user);
      },
      onUserListUpdated: (userList) => {
        console.log("User list updated:", userList);
      },
      onCallEnded: () => {
        console.log("Call ended");
        CometChatCalls.endSession();
        // Close calling screen
      },
      onCallEndButtonPressed: () => {
        console.log("End call button pressed");
        CometChatCalls.endSession();
        // Close calling screen
      },
      onError: (error) => {
        console.log("Call error:", error);
      },
      onMediaDeviceListUpdated: (deviceList) => {
        console.log("Device list updated:", deviceList);
      },
      onUserMuted: (event) => {
        console.log("User muted:", event);
      },
      onScreenShareStarted: () => {
        console.log("Screen sharing started");
      },
      onScreenShareStopped: () => {
        console.log("Screen sharing stopped");
      },
      onCallSwitchedToVideo: (event) => {
        console.log("Call switched to video:", event);
      },
      onSessionTimeout: () => {
        console.log("Session timed out");
      }
    });

    // Remove listener when done
    CometChatCalls.removeCallEventListener(listenerId);
    ```
  </Tab>
</Tabs>

### Events

For the full list of callbacks, their descriptions, and parameter shapes, see the [`OngoingCallListener`](/sdk/javascript/all-real-time-listeners#ongoing-call-listener-calls-sdk) reference.

## In-Call Methods

These methods are available for performing custom actions during an active call session. Use them to build custom UI controls or implement specific behaviors based on your use case.

<Note>
  These methods can only be called when a call session is active.
</Note>

### Switch Camera

Toggles between the front and rear camera during a video call. Only supported on mobile browsers.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChatCalls.switchCamera();
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatCalls.switchCamera();
    ```
  </Tab>
</Tabs>

<Note>
  This method is only supported on mobile browsers. It has no effect on desktop browsers. *Available since v4.2.0*
</Note>

### Mute Audio

Controls the local audio stream transmission. When muted, other participants cannot hear the local user.

* `true` — Mutes the microphone, stops transmitting audio
* `false` — Unmutes the microphone, resumes audio transmission

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChatCalls.muteAudio(true);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatCalls.muteAudio(true);
    ```
  </Tab>
</Tabs>

### Pause Video

Controls the local video stream transmission. When paused, other participants see a frozen frame or placeholder instead of live video.

* `true` — Pauses the camera, stops transmitting video
* `false` — Resumes the camera, continues video transmission

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChatCalls.pauseVideo(true);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatCalls.pauseVideo(true);
    ```
  </Tab>
</Tabs>

### Start Screen Share

Starts sharing your screen or a specific application window with other participants.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChatCalls.startScreenShare();
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatCalls.startScreenShare();
    ```
  </Tab>
</Tabs>

### Stop Screen Share

Stops the current screen sharing session.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChatCalls.stopScreenShare();
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatCalls.stopScreenShare();
    ```
  </Tab>
</Tabs>

### Set Mode

Changes the call UI layout mode dynamically during the call.

**Available modes:**

* `CometChat.CALL_MODE.DEFAULT` — Grid layout showing all participants
* `CometChat.CALL_MODE.SPOTLIGHT` — Focus on the active speaker

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChatCalls.setMode(CometChat.CALL_MODE.SPOTLIGHT);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatCalls.setMode(CometChat.CALL_MODE.SPOTLIGHT);
    ```
  </Tab>
</Tabs>

### Get Audio Input Devices

Returns a list of available audio input devices (microphones). Each item is a [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) object with `deviceId`, `label`, and `kind` properties.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const audioInputDevices = CometChatCalls.getAudioInputDevices();
    console.log("Available microphones:", audioInputDevices);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const audioInputDevices = CometChatCalls.getAudioInputDevices();
    console.log("Available microphones:", audioInputDevices);
    ```
  </Tab>
</Tabs>

### Get Audio Output Devices

Returns a list of available audio output devices (speakers/headphones). Each item is a [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) object.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const audioOutputDevices = CometChatCalls.getAudioOutputDevices();
    console.log("Available speakers:", audioOutputDevices);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const audioOutputDevices = CometChatCalls.getAudioOutputDevices();
    console.log("Available speakers:", audioOutputDevices);
    ```
  </Tab>
</Tabs>

### Get Video Input Devices

Returns a list of available video input devices (cameras). Each item is a [`MediaDeviceInfo`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo) object.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const videoInputDevices = CometChatCalls.getVideoInputDevices();
    console.log("Available cameras:", videoInputDevices);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const videoInputDevices = CometChatCalls.getVideoInputDevices();
    console.log("Available cameras:", videoInputDevices);
    ```
  </Tab>
</Tabs>

### Set Audio Input Device

Sets the active audio input device (microphone) by device ID.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChatCalls.setAudioInputDevice(deviceId);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatCalls.setAudioInputDevice(deviceId);
    ```
  </Tab>
</Tabs>

### Set Audio Output Device

Sets the active audio output device (speaker/headphones) by device ID.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChatCalls.setAudioOutputDevice(deviceId);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatCalls.setAudioOutputDevice(deviceId);
    ```
  </Tab>
</Tabs>

### Set Video Input Device

Sets the active video input device (camera) by device ID.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChatCalls.setVideoInputDevice(deviceId);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatCalls.setVideoInputDevice(deviceId);
    ```
  </Tab>
</Tabs>

### Switch To Video Call

Upgrades an ongoing audio call to a video call. This enables the camera and starts transmitting video to other participants. The remote participant receives the `onCallSwitchedToVideo()` callback.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChatCalls.switchToVideoCall();
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatCalls.switchToVideoCall();
    ```
  </Tab>
</Tabs>

### End Call

Terminates the current call session and releases all media resources (camera, microphone, network connections). After calling this method, the call view should be closed.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChatCalls.endSession();
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatCalls.endSession();
    ```
  </Tab>
</Tabs>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Default Calling" icon="phone" href="/sdk/javascript/default-call">
    Implement ringing call flows using the Chat SDK
  </Card>

  <Card title="Recording" icon="circle-dot" href="/sdk/javascript/recording">
    Add call recording to your voice and video calls
  </Card>
</CardGroup>