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

> CometChat Calling SDK v5 - Recording for React Native

The CometChat Calls SDK supports recording call sessions. Recordings can be started manually or automatically when the call begins.

## Enable Recording Button

Show the recording button in the call UI:

```tsx theme={null}
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

const callSettings = new CometChatCalls.CallSettingsBuilder()
  .showRecordingButton(true)
  .build();
```

## Auto-Start Recording

Start recording automatically when the call begins:

```tsx theme={null}
const callSettings = new CometChatCalls.CallSettingsBuilder()
  .showRecordingButton(true)
  .startRecordingOnCallStart(true)
  .build();
```

## Start Recording Programmatically

Start recording during an active call:

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

## Stop Recording

Stop an active recording:

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

## Recording Events

Listen for recording state changes:

### Using OngoingCallListener

```tsx theme={null}
const callListener = new CometChatCalls.OngoingCallListener({
  onRecordingStarted: (data) => {
    console.log('Recording started:', data);
  },
  onRecordingStopped: (data) => {
    console.log('Recording stopped:', data);
  },
});

const callSettings = new CometChatCalls.CallSettingsBuilder()
  .setCallEventListener(callListener)
  .build();
```

### Using addEventListener

```tsx theme={null}
const unsubscribeStart = CometChatCalls.addEventListener(
  'onRecordingStarted',
  () => {
    console.log('Recording started');
  }
);

const unsubscribeStop = CometChatCalls.addEventListener(
  'onRecordingStopped',
  () => {
    console.log('Recording stopped');
  }
);

// Cleanup
unsubscribeStart();
unsubscribeStop();
```

### Participant Recording Events

Listen when other participants start or stop recording:

```tsx theme={null}
CometChatCalls.addEventListener('onParticipantStartedRecording', (participant) => {
  console.log(`${participant.name} started recording`);
});

CometChatCalls.addEventListener('onParticipantStoppedRecording', (participant) => {
  console.log(`${participant.name} stopped recording`);
});
```

## Recording Button Click Event

Listen for when the recording button is clicked:

```tsx theme={null}
CometChatCalls.addEventListener('onRecordingToggleButtonClicked', () => {
  console.log('Recording button clicked');
});
```

## Access Recordings

Recordings are available through the call logs after the call ends. Use the Chat SDK to retrieve recordings:

```tsx theme={null}
import { CometChat } from '@cometchat/chat-sdk-react-native';

async function getCallRecordings(sessionId: string) {
  const callLogRequest = new CometChat.CallLogRequestBuilder()
    .setLimit(1)
    .build();

  try {
    const callLogs = await callLogRequest.fetchNext();
    const callLog = callLogs.find((log) => log.sessionId === sessionId);
    
    if (callLog && callLog.recordings) {
      console.log('Recordings:', callLog.recordings);
      return callLog.recordings;
    }
    return [];
  } catch (error) {
    console.error('Error fetching recordings:', error);
    throw error;
  }
}
```

## Recording Object

Each recording contains:

| Property       | Type   | Description                   |
| -------------- | ------ | ----------------------------- |
| `rid`          | string | Recording ID                  |
| `recordingUrl` | string | URL to download the recording |
| `startTime`    | number | Recording start timestamp     |
| `endTime`      | number | Recording end timestamp       |
| `duration`     | number | Recording duration in seconds |

## Complete Example

```tsx theme={null}
import React, { useState, useEffect } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

function RecordingControls() {
  const [isRecording, setIsRecording] = useState(false);

  useEffect(() => {
    const unsubscribeStart = CometChatCalls.addEventListener(
      'onRecordingStarted',
      () => {
        setIsRecording(true);
      }
    );

    const unsubscribeStop = CometChatCalls.addEventListener(
      'onRecordingStopped',
      () => {
        setIsRecording(false);
      }
    );

    return () => {
      unsubscribeStart();
      unsubscribeStop();
    };
  }, []);

  const toggleRecording = () => {
    if (isRecording) {
      CometChatCalls.stopRecording();
    } else {
      CometChatCalls.startRecording();
    }
  };

  return (
    <TouchableOpacity
      style={[styles.button, isRecording && styles.recordingButton]}
      onPress={toggleRecording}
    >
      <View style={[styles.indicator, isRecording && styles.recordingIndicator]} />
      <Text style={styles.buttonText}>
        {isRecording ? 'Stop Recording' : 'Start Recording'}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#333',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
    gap: 8,
  },
  recordingButton: {
    backgroundColor: '#ff4444',
  },
  indicator: {
    width: 12,
    height: 12,
    borderRadius: 6,
    backgroundColor: '#666',
  },
  recordingIndicator: {
    backgroundColor: '#fff',
  },
  buttonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
});

export default RecordingControls;
```

## Related Documentation

* [Call Logs](/calls/react-native/call-logs) - Access call history and recordings
* [Session Settings](/calls/react-native/session-settings) - Configure recording options
* [Events](/calls/react-native/events) - Handle recording events