@hiyve/rn-capture

React Native components for recording, live streaming, and transcription display in Hiyve video conferencing.

Provides RecordingControls, StreamingControls, and TranscriptionView -- presentation-only components that pair with hooks from @hiyve/rn-react to manage capture state.

Installation

npm install @hiyve/rn-capture @hiyve/rn-react @hiyve/rn-core react-native-webrtc
Copy

Quick Start

Recording

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

function RecordingPanel() {
  const {
    isRecording,
    isRecordingStarting,
    recordingDuration,
    error,
    startRecording,
    stopRecording,
    clearRecordingError,
  } = useRecording();

  return (
    <RecordingControls
      isRecording={isRecording}
      isRecordingStarting={isRecordingStarting}
      recordingDuration={recordingDuration}
      error={error}
      onStartRecording={startRecording}
      onStopRecording={stopRecording}
      onClearError={clearRecordingError}
      showOptions
    />
  );
}
Copy

Live Streaming

import { StreamingControls } from '@hiyve/rn-capture';
import { useStreaming } from '@hiyve/rn-react';

function StreamingPanel() {
  const { isStreaming, streamingDuration, startStreaming, stopStreaming } = useStreaming();

  return (
    <StreamingControls
      isStreaming={isStreaming}
      streamingDuration={streamingDuration}
      onStartStreaming={startStreaming}
      onStopStreaming={stopStreaming}
      showRtmpInput
    />
  );
}
Copy

Transcription

import { TranscriptionView } from '@hiyve/rn-capture';
import { useTranscription, useParticipants } from '@hiyve/rn-react';

function TranscriptionPanel() {
  const { transcriptions, isTranscribing } = useTranscription();
  const { localUserId } = useParticipants();

  return (
    <TranscriptionView
      transcriptions={transcriptions}
      localUserId={localUserId}
      isTranscribing={isTranscribing}
    />
  );
}
Copy

Components

RecordingControls

Record/stop button with pulsing recording indicator, elapsed time, and optional transcribe/auto-compose toggles.

<RecordingControls
  isRecording={isRecording}
  isRecordingStarting={isRecordingStarting}
  recordingDuration={recordingDuration}
  onStartRecording={(opts) => startRecording(opts)}
  onStopRecording={stopRecording}
  showOptions
/>
Copy

StreamingControls

Go Live/Stop button with pulsing LIVE indicator, elapsed time, and optional RTMP URL input.

<StreamingControls
  isStreaming={isStreaming}
  streamingDuration={streamingDuration}
  onStartStreaming={(opts) => startStreaming(opts)}
  onStopStreaming={stopStreaming}
  showRtmpInput
/>
Copy

TranscriptionView

Scrollable live transcription display. Groups consecutive entries from the same speaker, highlights local user, and auto-scrolls to latest.

<TranscriptionView
  transcriptions={transcriptions}
  localUserId={localUserId}
  isTranscribing={isTranscribing}
  showTimestamps
/>
Copy

Customization

All components accept colors and labels props. Pass partial objects to override only what you need:

<RecordingControls
  colors={{
    recordButton: '#E53935',
    recordingIndicator: '#E53935',
    background: '#1e1e3f',
  }}
  labels={{
    record: 'Aufnahme',
    stop: 'Stopp',
    recording: 'Aufnahme l\u00e4uft',
  }}
  // ... other props
/>
Copy

Requirements

• React 18+
• React Native 0.70+
• @hiyve/rn-core
• @hiyve/rn-react

Related Packages

• @hiyve/rn-react -- Provider, hooks, and core UI components
• @hiyve/rn-collaboration -- Chat, Polls, and Q&A
• @hiyve/rn-meeting -- Alerts, Meeting Summary, and Join Token