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

    Function TranscriptionControls

    • TranscriptionControls component - start/stop controls for live transcription.

      Parameters

      Returns ReactElement<any, string | JSXElementConstructor<any>> | null

      Provides start/stop controls for live transcription, typically used by room owners. This is the base component that requires the client and state to be passed as props.

      Use TranscriptionControls (this component) when:

      • You manage transcription state yourself (not using HiyveProvider)
      • You need custom start/stop logic or confirmation dialogs
      • You're integrating with a custom WebRTC implementation
      • You want to control visibility independent of room ownership

      Use ConnectedTranscriptionControls when:

      • You're using HiyveProvider for room/media management
      • You want automatic owner detection and state sync
      • You prefer less boilerplate code
      • Owner-only display: Component returns null when isOwner is false
      • Loading states: Shows spinner during start/stop operations
      • Two variants: Full button with text or icon-only for toolbars
      • Customizable: Labels, colors, and MUI button props supported
      • Error handling: Calls onError callback on failures

      The component calls client.startTranscribing() and client.stopTranscribing() from the Hiyve client. These methods:

      • Start: Launches a transcription bot for the room, returns transcription ID
      • Stop: Terminates the transcription bot

      Transcription is typically a room-owner-only feature because:

      • It incurs cost (bot server + speech-to-text API)
      • It affects all participants (their audio is transcribed)
      • Privacy considerations (transcripts are stored)

      Full button in a control panel:

      function ControlPanel() {
        const [isTranscribing, setIsTranscribing] = useState(false);
        const [transcriptionId, setTranscriptionId] = useState<string | null>(null);

        return (
          <TranscriptionControls
            client={client}
            isOwner={isOwner}
            isTranscribing={isTranscribing}
            onTranscriptionStart={(id) => {
              setTranscriptionId(id);
              setIsTranscribing(true);
              toast.success('Transcription started');
            }}
            onTranscriptionStop={() => {
              setTranscriptionId(null);
              setIsTranscribing(false);
              toast.info('Transcription stopped');
            }}
            onError={(error) => toast.error(error.message)}
          />
        );
      }

      Icon-only button in a toolbar:

      <TranscriptionControls
        client={client}
        isOwner={isOwner}
        isTranscribing={isTranscribing}
        iconOnly
        size="small"
        onTranscriptionStart={handleStart}
        onTranscriptionStop={handleStop}
      />

      With confirmation dialog before starting:

      function TranscriptionButton() {
        const [showConfirm, setShowConfirm] = useState(false);

        const handleStartClick = async () => {
          // Show custom confirmation
          setShowConfirm(true);
        };

        return (
          <>
            <TranscriptionControls
              client={client}
              isOwner={isOwner}
              isTranscribing={isTranscribing}
              disabled={showConfirm}
              onTranscriptionStart={handleStartClick}
              labels={{
                startTranscription: 'Enable Captions',
                stopTranscription: 'Disable Captions',
                tooltip: 'Live captions for all participants',
              }}
              colors={{
                active: '#22c55e',  // Green when active
                idle: '#6366f1',    // Indigo when idle
              }}
            />
            <ConfirmDialog
              open={showConfirm}
              onConfirm={() => {
                client.startTranscribing();
                setShowConfirm(false);
              }}
              onCancel={() => setShowConfirm(false)}
            />
          </>
        );
      }
      • ConnectedTranscriptionControls from @hiyve/transcription/connected - Auto-connected version for HiyveProvider users
      • TranscriptViewer - Component to display the transcription entries

    Settings

    Member Visibility

    On This Page

    When to use TranscriptionControls vs ConnectedTranscriptionControlsKey FeaturesHiyve Client IntegrationPermissions