> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Recording (Beta)

> CometChat Calling SDK v4 - Stable Release - Recording for JavaScript

This section will guide you to implement call recording feature for the voice and video calls.

## Implementation

Once you have decided to implement [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/call-session) calling and followed the steps to implement them. Just few additional listeners and methods will help you quickly implement call recording in your app.

You need to make changes in the CometChat.startCall method and add the required listeners for recording. Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/call-session).

A basic example of how to make changes to implement recording for a call session / a ringing call:

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    // Add listeners onRecordingStarted and onRecordingStopped to the startCall method
    const defaultLayout = true;
    const audioOnly = false;

    const callListener = new CometChatCalls.OngoingCallListener({
      onRecordingStarted: (event) =>
        console.log("Listener => onRecordingStarted", event.user),
      onRecordingStopped: (event) =>
        console.log("Listener => onRecordingStopped", event.user),
    });

    const callSettings = new CometChatCalls.CallSettingsBuilder()
      .enableDefaultLayout(defaultLayout)
      .setIsAudioOnlyCall(audioOnly)
      .setCallListener(callListener)
      .build();

    const htmlElement = document.getElementById("ELEMENT_ID");
    CometChatCalls.startSession(callToken, callSettings, htmlElement);
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    // Add listeners onRecordingStarted and onRecordingStopped to the startCall method
    const defaultLayout = true;
    const audioOnly = false;

    const callListener = new CometChatCalls.OngoingCallListener({
      onRecordingStarted: (event) =>
        console.log("Listener => onRecordingStarted", event.user),
      onRecordingStopped: (event) =>
        console.log("Listener => onRecordingStopped", event.user),
    });

    const callSettings = new CometChatCalls.CallSettingsBuilder()
      .enableDefaultLayout(defaultLayout)
      .setIsAudioOnlyCall(audioOnly)
      .setCallListener(callListener)
      .build();

    const htmlElement = document.getElementById("ELEMENT_ID");
    CometChatCalls.startSession(callToken, callSettings, htmlElement);
    ```
  </Tab>
</Tabs>

## Settings for call recording

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

The options available for recording of calls are:

| Setting                                                         | Description                                                                                                                                                                          |
| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `showRecordingButton(showRecordingButton: boolean)`             | If set to `true` it displays the Recording button in the button Layout. if set to `false` it hides the Recording button in the button Layout. **Default value = false**              |
| `startRecordingOnCallStart(startRecordingOnCallStart: boolean)` | If set to `true` call recording will start as soon as the call is started. if set to `false` call recording will not start as soon as the call is started. **Default value = false** |

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:

### Start Recording

You can use the startRecording() method to start call recording.

<Tabs>
  <Tab title="Start Recording">
    ```javascript theme={null}
    CometChatCalls.startRecording();
    ```
  </Tab>

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

### Stop Recording

You can use the stopRecording() method to stop call recording.

<Tabs>
  <Tab title="Stop Recording">
    ```javascript theme={null}
    CometChatCalls.stopRecording();
    ```
  </Tab>

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

## Downloading Recording

Currently, the call recordings are available on the [CometChat Dashboard](https://app.cometchat.com/signup) under the Calls Section. Recordings can be accessed after clicking on the three dots menu icon to expand the menu and then select "View Recordings". You can refer to the below screenshot. You can refer to the below screenshot.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/Mh-tK73gC5erLrBQ/images/f60b5e59-t4erpygunz9w2oxjn0nyfmez9d38l2ny8qauc33cpkgc9mz1udly2om321yf67wm-5b58e8c9377ee9bac1626a390525d975.png?fit=max&auto=format&n=Mh-tK73gC5erLrBQ&q=85&s=977c1a10fc4dc673bfe936c94904c39c" width="3148" height="2400" data-path="images/f60b5e59-t4erpygunz9w2oxjn0nyfmez9d38l2ny8qauc33cpkgc9mz1udly2om321yf67wm-5b58e8c9377ee9bac1626a390525d975.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/bUk-WwSNpBXF92Yc/images/db32f683-wmlk4h4nnpjz3nwabp3yhjil9u38cu9z27gsf0cdpy4x1ozfpuh6e2pv4apsafr4-4eb5d3cce059b21d7a1add99427296dd.png?fit=max&auto=format&n=bUk-WwSNpBXF92Yc&q=85&s=009b979e75f3b6ba3e8c0b6812716b97" width="3148" height="2400" data-path="images/db32f683-wmlk4h4nnpjz3nwabp3yhjil9u38cu9z27gsf0cdpy4x1ozfpuh6e2pv4apsafr4-4eb5d3cce059b21d7a1add99427296dd.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/KQU96uDrdF-ESW1d/images/31402cdd-fi6v16el19pe29q37izzqopz9k9ur8hz94ju2jxsh4avnmh33fcktwceouu7om2h-aad037f6953c6ba50729c8e00da500ef.png?fit=max&auto=format&n=KQU96uDrdF-ESW1d&q=85&s=3bc07c99dbe6f4906837bb7025f7290f" width="3148" height="2400" data-path="images/31402cdd-fi6v16el19pe29q37izzqopz9k9ur8hz94ju2jxsh4avnmh33fcktwceouu7om2h-aad037f6953c6ba50729c8e00da500ef.png" />
</Frame>
