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.
npm install @hiyve/rn-capture @hiyve/rn-react @hiyve/rn-core react-native-webrtc
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
/>
);
}
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
/>
);
}
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}
/>
);
}
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
/>
| Prop | Type | Default | Description |
|---|---|---|---|
isRecording |
boolean |
-- | Whether a recording is in progress |
isRecordingStarting |
boolean |
-- | Whether recording is starting up |
recordingDuration |
number |
-- | Elapsed time in seconds |
error |
string | null |
-- | Error message to display |
onStartRecording |
(options?) => void |
-- | Start handler. Options: { autoCompose?, transcribe? } |
onStopRecording |
() => void |
-- | Stop handler |
onClearError |
() => void |
-- | Dismiss error handler |
showOptions |
boolean |
false |
Show transcribe/auto-compose switches |
colors |
Partial<RecordingControlsColors> |
-- | Color overrides |
labels |
Partial<RecordingControlsLabels> |
-- | Label overrides |
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
/>
| Prop | Type | Default | Description |
|---|---|---|---|
isStreaming |
boolean |
-- | Whether a live stream is active |
isStreamingStarting |
boolean |
-- | Whether stream is starting up |
streamingDuration |
number |
-- | Elapsed time in seconds |
error |
string | null |
-- | Error message to display |
onStartStreaming |
(options?) => void |
-- | Start handler. Options: { rtmpUrl? } |
onStopStreaming |
() => void |
-- | Stop handler |
onClearError |
() => void |
-- | Dismiss error handler |
showRtmpInput |
boolean |
false |
Show RTMP URL input field |
colors |
Partial<StreamingControlsColors> |
-- | Color overrides |
labels |
Partial<StreamingControlsLabels> |
-- | Label overrides |
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
/>
| Prop | Type | Default | Description |
|---|---|---|---|
transcriptions |
TranscriptionEntry[] |
-- | Transcription entries (chronological) |
localUserId |
string |
-- | Local user ID (highlighted differently) |
isTranscribing |
boolean |
-- | Show active transcribing indicator |
showTimestamps |
boolean |
true |
Show timestamps for each entry |
autoScroll |
boolean |
true |
Auto-scroll to latest entry |
colors |
Partial<TranscriptionViewColors> |
-- | Color overrides |
labels |
Partial<TranscriptionViewLabels> |
-- | Label overrides |
Each component accepts optional colors and labels props for theming. Default values and merge utilities are exported for partial overrides:
| Export | Type | Description |
|---|---|---|
defaultRecordingControlsColors |
RecordingControlsColors |
Default color values |
defaultRecordingControlsLabels |
RecordingControlsLabels |
Default label strings |
mergeRecordingControlsColors(overrides?) |
(user?: Partial<RecordingControlsColors>) => RecordingControlsColors |
Merge partial color overrides with defaults |
mergeRecordingControlsLabels(overrides?) |
(user?: Partial<RecordingControlsLabels>) => RecordingControlsLabels |
Merge partial label overrides with defaults |
| Export | Type | Description |
|---|---|---|
defaultStreamingControlsColors |
StreamingControlsColors |
Default color values |
defaultStreamingControlsLabels |
StreamingControlsLabels |
Default label strings |
mergeStreamingControlsColors(overrides?) |
(user?: Partial<StreamingControlsColors>) => StreamingControlsColors |
Merge partial color overrides with defaults |
mergeStreamingControlsLabels(overrides?) |
(user?: Partial<StreamingControlsLabels>) => StreamingControlsLabels |
Merge partial label overrides with defaults |
| Export | Type | Description |
|---|---|---|
defaultTranscriptionViewColors |
TranscriptionViewColors |
Default color values |
defaultTranscriptionViewLabels |
TranscriptionViewLabels |
Default label strings |
mergeTranscriptionViewColors(overrides?) |
(user?: Partial<TranscriptionViewColors>) => TranscriptionViewColors |
Merge partial color overrides with defaults |
mergeTranscriptionViewLabels(overrides?) |
(user?: Partial<TranscriptionViewLabels>) => TranscriptionViewLabels |
Merge partial label overrides with defaults |
import { RecordingControls, defaultRecordingControlsColors, mergeRecordingControlsColors } from '@hiyve/rn-capture';
const customColors = mergeRecordingControlsColors({
recordButton: '#ff0000',
});
<RecordingControls colors={customColors} /* ...other props */ />
@hiyve/rn-core@hiyve/rn-react@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
@hiyve/rn-capture-- React Native capture components for Hiyve SDK.Provides RecordingControls, StreamingControls, and TranscriptionView components for managing recording, live streaming, and real-time transcription display in React Native applications. All components are presentation-only and receive state via props from
@hiyve/rn-reacthooks.