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

# Recording

> Start, stop, and observe call recordings in React with the useRecording hook.

<Badge color="blue">Paid plans only</Badge>

[`useRecording`](/reference/daily-react/use-recording) gives you reactive recording state and start/stop helpers, so you can build recording controls and a "recording" indicator without managing recording events yourself.

## Recording controls

Destructure `isRecording`, `startRecording`, and `stopRecording`:

```jsx theme={null}
import { useRecording } from '@daily-co/daily-react';

function RecordButton() {
  const { isRecording, startRecording, stopRecording } = useRecording();
  return (
    <button onClick={() => (isRecording ? stopRecording() : startRecording())}>
      {isRecording ? 'Stop recording' : 'Start recording'}
    </button>
  );
}
```

`startRecording` accepts the same options as the daily-js [`startRecording()`](/reference/daily-js/instance-methods/start-recording) method, including layout presets:

```jsx theme={null}
startRecording({ layout: { preset: 'active-participant' } });
```

## Gate controls on permission

Only owners and participants with `canAdmin: 'streaming'` can start or stop recordings. Gate your controls with [`usePermissions`](/reference/daily-react/use-permissions):

```jsx theme={null}
import { usePermissions, useRecording } from '@daily-co/daily-react';

function RecordingControls() {
  const { canAdminStreaming } = usePermissions();
  const { isRecording, startRecording, stopRecording } = useRecording();
  if (!canAdminStreaming) return null;
  return (
    <button onClick={() => (isRecording ? stopRecording() : startRecording())}>
      {isRecording ? 'Stop' : 'Record'}
    </button>
  );
}
```

See the [Permissions guide](/docs/daily-react/docs/permissions) for how to grant `canAdmin` rights.

## Show a recording indicator

Every participant can read recording state, so anyone can show that the call is being recorded. `isLocalParticipantRecorded` tells the current user whether they are in the recording:

```jsx theme={null}
import { useRecording } from '@daily-co/daily-react';

function RecordingIndicator() {
  const { isRecording, isLocalParticipantRecorded, recordingStartedDate, startedBy } =
    useRecording();
  if (!isRecording) return null;
  return (
    <div role="status">
      🔴 Recording {isLocalParticipantRecorded ? '(you are recorded)' : ''}
      {recordingStartedDate && ` since ${recordingStartedDate.toLocaleTimeString()}`}
    </div>
  );
}
```

## React to recording events

Pass callbacks to run side effects when recording state changes:

```jsx theme={null}
import { useCallback } from 'react';
import { useRecording } from '@daily-co/daily-react';

useRecording({
  onRecordingStarted: useCallback((event) => console.log('Started', event), []),
  onRecordingStopped: useCallback(() => console.log('Stopped'), []),
  onRecordingError: useCallback((event) => console.error(event), []),
});
```

## Multiple concurrent recordings

When several recordings run at once, pass an `instanceId` (a valid UUID) to scope the hook to one recording. Without it, the hook returns aggregate state, where `isRecording` is true if any instance is active and the scalar fields reflect the first active instance:

```jsx theme={null}
const { isRecording } = useRecording();                 // aggregate: any active?
const portrait = useRecording({ instanceId: PORTRAIT_UUID }); // one instance
```

To list every active instance, use [`useRecordingInstances`](/reference/daily-react/use-recording-instances), which returns an array of per-instance state. See the [multi-instance recording and live streaming guide](/docs/guides/features/live-streaming/multi-instance) for the full pattern.

## Next steps

<CardGroup cols={2}>
  <Card title="Live streaming" icon="signal-stream" href="/docs/daily-react/docs/live-streaming">
    The same model, for RTMP output.
  </Card>

  <Card title="Permissions" icon="lock" href="/docs/daily-react/docs/permissions">
    Grant the rights to start recordings.
  </Card>
</CardGroup>