Hiyve Components - v1.0.0
    Preparing search index...

    Function RecordingControls

    • RecordingControls provides UI for starting and stopping meeting recordings.

      Parameters

      Returns ReactElement

      The rendered RecordingControls component

      The RecordingControls component offers both full and compact modes for different layout requirements. It includes a dropdown menu for configuring recording options like transcription, auto-composition, and meeting summaries.

      Key Features:

      • Start/stop button: One-click recording control with visual state changes
      • Options menu: Configure transcription, auto-compose, and summary options
      • Duration display: Shows elapsed recording time when active
      • Compact mode: Icon-only display for space-constrained layouts
      • Full customization: Labels (i18n), icons, and styles

      Recording Options:

      • transcribe: Generate live transcription during the recording
      • autoCompose: Automatically combine participant videos into one
      • postMeetingSummary: Generate AI-powered meeting summary afterward

      Basic recording controls:

      import { RecordingControls } from '@hiyve/react-capture';

      function MeetingRecording() {
        const [isRecording, setIsRecording] = useState(false);
        const [duration, setDuration] = useState(0);

        const handleStart = (options?: RecordingOptions) => {
          startRecording(options);
          setIsRecording(true);
        };

        const handleStop = () => {
          stopRecording();
          setIsRecording(false);
        };

        return (
          <RecordingControls
            isRecording={isRecording}
            onStartRecording={handleStart}
            onStopRecording={handleStop}
            duration={duration}
          />
        );
      }

      Compact mode for control bars:

      import { RecordingControls } from '@hiyve/react-capture';

      function CompactRecordButton({ isRecording, duration, onStart, onStop }) {
        return (
          <RecordingControls
            isRecording={isRecording}
            onStartRecording={onStart}
            onStopRecording={onStop}
            duration={duration}
            compact
          />
        );
      }

      With custom labels for internationalization:

      import { RecordingControls, defaultRecordingControlsLabels } from '@hiyve/react-capture';

      function JapaneseRecordingControls() {
        const japaneseLabels = {
          record: '録画',
          stopRecording: '録画停止',
          startRecording: '録画開始',
          recordingOptions: '録画オプション',
          transcribe: '文字起こし',
          transcribeDescription: 'リアルタイム文字起こし',
          autoCompose: '自動編集',
          autoComposeDescription: '単一動画に結合',
          meetingSummary: '会議要約',
          meetingSummaryDescription: 'AI生成要約',
        };

        return (
          <RecordingControls
            isRecording={false}
            onStartRecording={handleStart}
            onStopRecording={handleStop}
            labels={japaneseLabels}
          />
        );
      }

      With custom icons and no options menu:

      import { RecordingControls } from '@hiyve/react-capture';
      import { FaCircle, FaStop } from 'react-icons/fa';

      function SimpleRecordButton() {
        return (
          <RecordingControls
            isRecording={isRecording}
            onStartRecording={handleStart}
            onStopRecording={handleStop}
            showOptions={false}
            icons={{
              record: <FaCircle color="red" />,
              stop: <FaStop />,
            }}
          />
        );
      }

    Settings

    Member Visibility