> ## 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 React Native

<Info>
  **Quick Reference** - Start and stop call recording:

  ```javascript theme={null}
  // Start recording
  CometChatCalls.startRecording();

  // Stop recording
  CometChatCalls.stopRecording();

  // Or enable auto-recording via CallSettings
  new CometChatCalls.CallSettingsBuilder()
    .startRecordingOnCallStart(true)
    .showRecordingButton(true)
    .build();
  ```
</Info>

<Note>
  **Available via:** SDK | UI Kits
</Note>

## Overview

This section guides you through implementing call recording for voice and video calls.

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

You need to make changes in the `CometChatCalls.OngoingCallListener` constructor and add the required listeners for recording. Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/react-native/ringing) or [Call Session](/calls/v4/react-native/call-session).

A basic example of how to make changes to implement recording:

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    const callListener = new CometChatCalls.OngoingCallListener({
      onRecordingStarted: recordingStartedBy => {
          console.log("Listener => onRecordingStarted:", recordingStartedBy);
      },
      onRecordingStopped: recordingStoppedBy => {
          console.log("Listener => onRecordingStopped:", recordingStoppedBy);
      },
    });

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

    return (
      <View style={{height: '100%', width: '100%', position: 'relative'}}>
        <CometChatCalls.Component callSettings={callSettings} callToken={callToken} />
      </View>
    );
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    const callListener = new CometChatCalls.OngoingCallListener({
      onRecordingStarted: recordingStartedBy => {
          console.log("Listener => onRecordingStarted:", recordingStartedBy);
      },
      onRecordingStopped: recordingStoppedBy => {
          console.log("Listener => onRecordingStopped:", recordingStoppedBy);
      },
    });

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

    return (
      <View style={{height: '100%', width: '100%', position: 'relative'}}>
        <CometChatCalls.Component callSettings={callSettings} callToken={callToken} />
      </View>
    );
    ```
  </Tab>
</Tabs>

## Settings for Call Recording

| Setting                                                         | Description                                                                                          |
| --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `showRecordingButton(showRecordingButton: boolean)`             | If set to `true` it displays 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. **Default value = false** |

### Start Recording

```javascript theme={null}
CometChatCalls.startRecording();
```

### Stop Recording

```javascript theme={null}
CometChatCalls.stopRecording();
```

## Downloading Recording

Currently, the call recordings are available on the [CometChat Dashboard](https://app.cometchat.com) under the Calls Section.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/t35Dbaum6Rkuz_d5/images/1599bf3a-zilsopkkkqhmf5w9s698c0il4r48pnpnwohzvy0pwlf2c4zdgyc7vwdwnv8yua1n-5b58e8c9377ee9bac1626a390525d975.png?fit=max&auto=format&n=t35Dbaum6Rkuz_d5&q=85&s=2ba28171b1c0af8abe568cc1c31a736c" width="3148" height="2400" data-path="images/1599bf3a-zilsopkkkqhmf5w9s698c0il4r48pnpnwohzvy0pwlf2c4zdgyc7vwdwnv8yua1n-5b58e8c9377ee9bac1626a390525d975.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/LKT8U_07JOWQgTZK/images/0dbede41-973pm755w3ywers0zxwnyihpqlnnq43tnbmnreqtkm3d3whsowi52iiqsbkbqze1-4eb5d3cce059b21d7a1add99427296dd.png?fit=max&auto=format&n=LKT8U_07JOWQgTZK&q=85&s=1b04ec383581466a4324f11c996b577b" width="3148" height="2400" data-path="images/0dbede41-973pm755w3ywers0zxwnyihpqlnnq43tnbmnreqtkm3d3whsowi52iiqsbkbqze1-4eb5d3cce059b21d7a1add99427296dd.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/2U5tVIzH12dbbFtr/images/aff2fac9-5hk4d3gfcr4kx6wwp93698ocwe5tyfp4owfvidbxczmoeebruiejzdz5zxkd1t47-aad037f6953c6ba50729c8e00da500ef.png?fit=max&auto=format&n=2U5tVIzH12dbbFtr&q=85&s=46b5de138a100124a070774f7830d67f" width="3148" height="2400" data-path="images/aff2fac9-5hk4d3gfcr4kx6wwp93698ocwe5tyfp4owfvidbxczmoeebruiejzdz5zxkd1t47-aad037f6953c6ba50729c8e00da500ef.png" />
</Frame>

<AccordionGroup>
  <Accordion title="Best Practices">
    * The ongoing call component automatically displays a recording badge when recording starts
    * Use auto-recording for compliance use cases with `startRecordingOnCallStart(true)`
    * If using a custom layout, track recording state using `onRecordingStarted` and `onRecordingStopped` listeners
  </Accordion>

  <Accordion title="Troubleshooting">
    * **Recording button not visible:** Ensure `showRecordingButton(true)` is set and `enableDefaultLayout(true)` is enabled
    * **onRecordingStarted / onRecordingStopped not firing:** These listeners require JS SDK v3.0.8 or later
    * **Recording not found on Dashboard:** Recordings may take a few minutes to process after the call ends
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Call Session" icon="video" href="/calls/v4/react-native/call-session">
    Start and manage call sessions with full configuration options
  </Card>

  <Card title="Ringing" icon="phone-volume" href="/calls/v4/react-native/ringing">
    Implement a complete calling experience with incoming and outgoing call UI
  </Card>

  <Card title="Video View Customisation" icon="sliders" href="/calls/v4/react-native/video-view-customisation">
    Customize the main video container and participant tiles
  </Card>

  <Card title="Call Logs" icon="list" href="/calls/v4/react-native/call-logs">
    Retrieve and display call history including duration and participants
  </Card>
</CardGroup>