RecordingPanel

RecordingPanel is the operator-facing surface for recording: start/stop button, current mode (composed / individual / screen-only), elapsed timer, output destination. Composes useRecordingState.

Install

pnpm add @levelchat/react-components @levelchat/web

Basic usage

import { RecordingPanel } from '@levelchat/react-components';

<RecordingPanel defaultMode="composed" />

Recording modes

• composed — server-side mix of all tracks into one MP4. Best for archival.
• individual — one file per track (audio + video per participant). Best for post-production.
• screen-only — captures the active screen-share stream only. Best for demos / tutorials.

Headless hook

import { useRecordingState } from '@levelchat/react-components';

function MyRecorder() {
  const { active, start, stop, elapsedMs, mode } = useRecordingState();
  return active
    ? <button onClick={stop}>Stop · {Math.round(elapsedMs / 1000)}s</button>
    : <button onClick={() => start({ mode: 'composed' })}>Start recording</button>;
}

Props