@hiyve/react-capture

Recording, streaming, and transcription components for Hiyve.

Installation

npx @hiyve/cli login
npm install @hiyve/react-capture
Copy

Quick Start

import {
  RecordingControls,
  RecordingIndicator,
  StreamingControls,
  TranscriptViewer,
  TranscriptionControls,
} from '@hiyve/react-capture';
import { HiyveProvider } from '@hiyve/react';

function MeetingRoom() {
  return (
    <HiyveProvider generateRoomToken={generateRoomToken}>
      <RecordingIndicator size="medium" />
      <RecordingControls
        onRecordingStarted={(id) => console.log('Recording:', id)}
        onRecordingStopped={() => console.log('Stopped')}
      />
      <StreamingControls
        onStreamingStart={() => console.log('Live')}
        onStreamingStop={() => console.log('Off air')}
      />
      <TranscriptionControls />
      <TranscriptViewer maxHeight={400} />
    </HiyveProvider>
  );
}
Copy

Components

Recording

Streaming

Transcription

Hooks

Utilities

Key Types

Recording

Streaming

Transcription

Customization

Every component supports customization through labels, icons, colors, and styles props. Pass a partial object to override only the values you need -- unspecified keys use defaults.

Recording

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

// Localize labels
<RecordingControls
  labels={{
    record: 'Grabar',
    stopRecording: 'Detener',
    startRecording: 'Iniciar',
  }}
/>

// Custom indicator colors
<RecordingIndicator
  isRecording={true}
  colors={{
    background: 'rgba(0, 0, 0, 0.5)',
    indicator: '#ffffff',
    text: '#ffffff',
  }}
  size="large"
/>
Copy

Recording defaults and merge functions:

Streaming

import {
  StreamingControls,
  StreamingSettingsDialog,
} from '@hiyve/react-capture';

// Localize streaming controls
<StreamingControls
  labels={{
    goLive: 'En direct',
    stopStreaming: 'Couper',
  }}
  icons={{
    live: <MyLiveIcon />,
  }}
/>

// Custom streaming settings dialog labels
<StreamingSettingsDialog
  open={open}
  onClose={() => setOpen(false)}
  labels={{
    title: 'Options de diffusion',
    cloudStreaming: 'Cloud',
    customRtmp: 'RTMP personnalise',
  }}
/>
Copy

Streaming defaults and merge functions:

Transcription

import {
  TranscriptViewer,
  TranscriptionControls,
  defaultTranscriptionColors,
} from '@hiyve/react-capture';

// Light theme transcript viewer
<TranscriptViewer
  colors={{
    background: '#ffffff',
    text: '#212121',
    localUser: '#1565c0',
  }}
  styles={{
    padding: 20,
    fontSize: '1rem',
  }}
  maxHeight={500}
/>

// Custom control labels
<TranscriptionControls
  labels={{
    startTranscription: 'Begin',
    stopTranscription: 'End',
    transcribing: 'Active...',
  }}
/>
Copy

Transcription defaults and merge functions:

Requirements

• @hiyve/react (^2.0.0) -- components must be rendered inside HiyveProvider
• @hiyve/rtc-client -- WebRTC client (provided by HiyveProvider)
• @hiyve/utilities (^1.0.0)
• @mui/material (^5.0.0 || ^6.0.0) and @mui/icons-material
• @emotion/react (>=11) and @emotion/styled (>=11)
• react (^18.0.0)

License

Proprietary - Hiyve SDK