Recording

Paid plans only useRecording 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:

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() method, including layout presets:

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:

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

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:

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:

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

To list every active instance, use useRecordingInstances, which returns an array of per-instance state. See the multi-instance recording and live streaming guide for the full pattern.

Recording controls

Gate controls on permission

Show a recording indicator

React to recording events

Multiple concurrent recordings

Next steps

Live streaming

Permissions

​Recording controls

​Gate controls on permission

​Show a recording indicator

​React to recording events

​Multiple concurrent recordings

​Next steps

Live streaming

Permissions

Recording controls

Gate controls on permission

Show a recording indicator

React to recording events

Multiple concurrent recordings

Next steps