Personalización

VIDTREO proporciona múltiples formas de personalizar la apariencia y comportamiento del grabador para que coincida con el diseño de tu aplicación.

Personalización de Texto

Idiomas Incorporados

VIDTREO soporta tres idiomas por defecto:

// Inglés (por defecto)
<VidtreoRecorder lang="en" />

// Español
<VidtreoRecorder lang="es" />

// Portugués
<VidtreoRecorder lang="pt" />

Textos Personalizados

Sobrescribe cualquier texto de la UI:

<VidtreoRecorder
  lang="es"
  texts={{
    // Controles de grabación
    record: 'Iniciar Captura',
    stop: 'Finalizar Captura',
    pause: 'Esperar',
    resume: 'Continuar',

    // Controles de audio
    mute: 'Silencio',
    unmute: 'Con Sonido',

    // Cambio de fuente
    switchSource: 'Cambiar Vista',

    // Mensajes de estado
    initializingCamera: 'Configurando cámara...',
    grantPermissions: 'Se requiere acceso a la cámara',
    switchingDevice: 'Cambiando dispositivo...',
    recordingStartsIn: 'Comienza en',
    switchingSource: 'Cambiando vista...',
    uploading: 'Enviando video...',

    // Etiquetas
    rec: 'EN VIVO',
    settings: 'Opciones',
    camera: 'Webcam',
    microphone: 'Mic',
  }}
/>

Todas las Claves de Texto Disponibles

Clave	Por Defecto (ES)	Descripción
`initializingCamera`	Inicializando cámara...	Mensaje de inicio de cámara
`grantPermissions`	Por favor concede permisos	Solicitud de permisos
`switchingDevice`	Cambiando dispositivo...	Estado de cambio de dispositivo
`recordingStartsIn`	La grabación comienza en	Prefijo de cuenta regresiva
`switchingSource`	Cambiando fuente...	Estado de cambio de fuente
`rec`	REC	Indicador de grabación
`settings`	Configuración	Etiqueta del botón de configuración
`record`	Grabar	Botón de grabar
`stop`	Detener	Botón de detener
`pause`	Pausar	Botón de pausar
`resume`	Reanudar	Botón de reanudar
`mute`	Silenciar	Botón de silenciar
`unmute`	Activar Audio	Botón de activar audio
`switchSource`	Cambiar Fuente	Botón de cambio de fuente
`camera`	Cámara	Etiqueta del selector de cámara
`microphone`	Micrófono	Etiqueta del selector de micrófono
`uploading`	Subiendo...	Estado de subida

Estilos del Componente React

Estilo del Contenedor

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

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

Componente Wrapper

Crea un wrapper para estilos consistentes:

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;
}

Estilos del Web Component

Estilo del Contenedor Externo

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

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

  /* Posicionamiento */
  margin: 0 auto;
}

/* Tamaño responsivo */
@media (max-width: 768px) {
  vidtreo-recorder {
    height: 360px;
  }
}

Propiedades CSS Personalizadas (Próximamente)

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;
}

UI Personalizada con Hook

Para control completo de la UI, usa el hook useVidtreoRecorder:

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">
      {/* Preview de video personalizado */}
      <div className="preview">
        <video
          ref={(el) => {
            if (el && state.stream) el.srcObject = state.stream;
          }}
          autoPlay
          muted
          playsInline
        />

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

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

      {/* Controles personalizados */}
      <div className="controls">
        {state.recordingState === 'idle' ? (
          <button
            className="record-btn"
            onClick={() => actions.startRecording()}
          >
            Grabar
          </button>
        ) : (
          <>
            <button
              className="mute-btn"
              onClick={() => actions.toggleMute()}
            >
              {state.isMuted ? 'Activar Audio' : 'Silenciar'}
            </button>

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

Diseño Responsivo

Tamaño Amigable para Móviles

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

/* Mantener relación de aspecto */
vidtreo-recorder {
  aspect-ratio: 4/3;
  height: auto;
}

/* Apilar controles en móvil */
@media (max-width: 480px) {
  .controls {
    flex-direction: column;
    gap: 0.5rem;
  }
}

Controles Amigables al Tacto

/* Objetivos táctiles más grandes */
.recorder-button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

Integración de Temas

Modo Oscuro

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>
  );
}

Colores de Marca

.brand-recorder {
  --accent-color: #tu-color-de-marca;
}

.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%);
}

Accesibilidad

Navegación por Teclado

El grabador soporta navegación completa por teclado:

Tab — Navegar entre controles
Enter/Espacio — Activar control enfocado
Escape — Cerrar panel de configuración

Soporte para Lectores de Pantalla

Todos los controles tienen etiquetas ARIA apropiadas. Las implementaciones personalizadas deben mantener la accesibilidad:

<button
  aria-label={isRecording ? 'Detener grabación' : 'Iniciar grabación'}
  aria-pressed={isRecording}
  onClick={toggleRecording}
>
  {isRecording ? 'Detener' : 'Grabar'}
</button>

Indicadores de Foco

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

Para personalización completa de la UI, usa el hook useVidtreoRecorder con tus propios componentes. Esto te da control total sobre el diseño mientras aprovechas el motor de grabación de VIDTREO.

Próximos Pasos

Ejemplo de UI Personalizada — Construye interfaces personalizadas
Referencia de API — Documentación del hook
Ejemplos — Más ejemplos

Personalización

En esta página