Customization

VIDTREO provides multiple ways to customize the recorder's appearance and behavior to match your application's design.

Text Customization

Built-in Languages

VIDTREO supports three languages out of the box:

// English (default)
<VidtreoRecorder lang="en" />

// Spanish
<VidtreoRecorder lang="es" />

// Portuguese
<VidtreoRecorder lang="pt" />

Custom Text Overrides

Override any text in the UI:

<VidtreoRecorder
  lang="en"
  texts={{
    // Recording controls
    record: 'Start Capture',
    stop: 'End Capture',
    pause: 'Hold',
    resume: 'Continue',

    // Audio controls
    mute: 'Silence',
    unmute: 'Sound On',

    // Source switching
    switchSource: 'Toggle View',

    // Status messages
    initializingCamera: 'Setting up camera...',
    grantPermissions: 'Camera access required',
    switchingDevice: 'Changing device...',
    recordingStartsIn: 'Starting in',
    switchingSource: 'Switching view...',
    uploading: 'Sending video...',

    // Labels
    rec: 'LIVE',
    settings: 'Options',
    camera: 'Webcam',
    microphone: 'Mic',
  }}
/>

All Available Text Keys

Key	Default (EN)	Description
`initializingCamera`	Initializing camera...	Camera startup message
`grantPermissions`	Please grant camera permissions	Permission request
`switchingDevice`	Switching device...	Device change status
`recordingStartsIn`	Recording starts in	Countdown prefix
`switchingSource`	Switching source...	Source change status
`rec`	REC	Recording indicator
`settings`	Settings	Settings button label
`record`	Record	Record button
`stop`	Stop	Stop button
`pause`	Pause	Pause button
`resume`	Resume	Resume button
`mute`	Mute	Mute button
`unmute`	Unmute	Unmute button
`switchSource`	Switch Source	Source toggle button
`camera`	Camera	Camera selector label
`microphone`	Microphone	Microphone selector label
`uploading`	Uploading...	Upload status

React Component Styling

Container Styling

<VidtreoRecorder
  className="my-recorder"
  style={{
    width: '100%',
    maxWidth: '640px',
    borderRadius: '12px',
    overflow: 'hidden'
  }}
/>

.my-recorder {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

Wrapper Component

Create a wrapper for consistent styling:

function StyledRecorder(props) {
  return (
    <div className="recorder-wrapper">
      <VidtreoRecorder {...props} />
    </div>
  );
}

.recorder-wrapper {
  padding: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
}

.recorder-wrapper > div {
  border-radius: 12px;
  overflow: hidden;
}

Web Component Styling

External Container Styling

vidtreo-recorder {
  /* Dimensions */
  display: block;
  width: 100%;
  max-width: 640px;
  height: 480px;

  /* Appearance */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Positioning */
  margin: 0 auto;
}

/* Responsive sizing */
@media (max-width: 768px) {
  vidtreo-recorder {
    height: 360px;
  }
}

CSS Custom Properties (Coming Soon)

vidtreo-recorder {
  --vidtreo-primary-color: #3b82f6;
  --vidtreo-primary-hover: #2563eb;
  --vidtreo-background: #1f2937;
  --vidtreo-surface: #374151;
  --vidtreo-text-primary: #ffffff;
  --vidtreo-text-secondary: #9ca3af;
  --vidtreo-border-radius: 8px;
  --vidtreo-font-family: system-ui, sans-serif;
}

Custom UI with Hook

For complete UI control, use the useVidtreoRecorder hook:

import { useVidtreoRecorder } from '@vidtreo/recorder-react';

function CustomRecorder() {
  const { state, actions, audioLevel } = useVidtreoRecorder({
    apiKey: import.meta.env.VITE_VIDTREO_API_KEY,
  });

  return (
    <div className="custom-recorder">
      {/* Custom video preview */}
      <div className="preview">
        <video
          ref={(el) => {
            if (el && state.stream) el.srcObject = state.stream;
          }}
          autoPlay
          muted
          playsInline
        />

        {/* Custom overlay */}
        {state.recordingState === 'recording' && (
          <div className="recording-overlay">
            <span className="rec-dot" />
            <span className="timer">{state.timer}</span>
          </div>
        )}
      </div>

      {/* Custom audio meter */}
      <div className="audio-meter">
        <div
          className="audio-level"
          style={{ width: `${audioLevel * 100}%` }}
        />
      </div>

      {/* Custom controls */}
      <div className="controls">
        {state.recordingState === 'idle' ? (
          <button
            className="record-btn"
            onClick={() => actions.startRecording()}
          >
            Record
          </button>
        ) : (
          <>
            <button
              className="mute-btn"
              onClick={() => actions.toggleMute()}
            >
              {state.isMuted ? 'Unmute' : 'Mute'}
            </button>

            <button
              className="stop-btn"
              onClick={() => actions.stopRecording()}
            >
              Stop
            </button>
          </>
        )}
      </div>
    </div>
  );
}

Responsive Design

Mobile-Friendly Sizing

.recorder-container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* Maintain aspect ratio */
vidtreo-recorder {
  aspect-ratio: 4/3;
  height: auto;
}

/* Stack controls on mobile */
@media (max-width: 480px) {
  .controls {
    flex-direction: column;
    gap: 0.5rem;
  }
}

Touch-Friendly Controls

/* Larger touch targets */
.recorder-button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

Theme Integration

Dark Mode

function ThemedRecorder() {
  const isDark = useTheme().mode === 'dark';

  return (
    <div className={isDark ? 'dark-theme' : 'light-theme'}>
      <VidtreoRecorder
        apiKey="..."
        style={{
          background: isDark ? '#1f2937' : '#ffffff',
          borderColor: isDark ? '#374151' : '#e5e7eb'
        }}
      />
    </div>
  );
}

Brand Colors

.brand-recorder {
  --accent-color: #your-brand-color;
}

.brand-recorder .record-button {
  background-color: var(--accent-color);
}

.brand-recorder .record-button:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
}

Accessibility

The recorder supports full keyboard navigation:

Tab — Navigate between controls
Enter/Space — Activate focused control
Escape — Close settings panel

All controls have appropriate ARIA labels. Custom implementations should maintain accessibility:

<button
  aria-label={isRecording ? 'Stop recording' : 'Start recording'}
  aria-pressed={isRecording}
  onClick={toggleRecording}
>
  {isRecording ? 'Stop' : 'Record'}
</button>

Focus Indicators

.recorder-button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

For complete UI customization, use the useVidtreoRecorder hook with your own components. This gives you full control over the design while leveraging VIDTREO's recording engine.

Next Steps

Custom UI Example — Build custom interfaces
API Reference — Hook documentation
Examples — More examples

Customization

Customization

Text Customization

Built-in Languages

Custom Text Overrides

All Available Text Keys

React Component Styling

Container Styling

Wrapper Component

Web Component Styling

External Container Styling

CSS Custom Properties (Coming Soon)

Custom UI with Hook

Responsive Design

Mobile-Friendly Sizing

Touch-Friendly Controls

Theme Integration

Dark Mode

Brand Colors

Accessibility

Keyboard Navigation

Focus Indicators

Next Steps

On this page