Opciones de Configuración

Esta página documenta todas las opciones de configuración disponibles para el SDK VIDTREO en todos los paquetes.

Opciones Principales

Estas opciones están disponibles en todos los paquetes (React, Web Component y Core SDK).

apiKey

Tipo: string (requerido)

Tu API key de VIDTREO para autenticación.

<VidtreoRecorder apiKey="vt_live_xxxxxxxxxxxx" />

backendUrl / apiUrl

Tipo: string Por defecto: "https://core.vidtreo.com"

URL personalizada del endpoint de la API. Útil para hacer proxy de solicitudes o usar un backend personalizado.

<VidtreoRecorder
  apiKey="..."
  backendUrl="https://tu-proxy.com/api"
/>

Opciones de Grabación

maxRecordingTime

Tipo: number Por defecto: undefined (ilimitado)

Duración máxima de grabación en milisegundos. La grabación se detiene automáticamente cuando se alcanza este límite.

// Máximo 5 minutos
<VidtreoRecorder maxRecordingTime={300000} />

// Máximo 30 segundos
<VidtreoRecorder maxRecordingTime={30000} />

countdownDuration

Tipo: number Por defecto: 3000

Duración de la cuenta regresiva previa a la grabación en milisegundos. Establece en 0 para desactivar.

// Cuenta regresiva de 5 segundos
<VidtreoRecorder countdownDuration={5000} />

// Sin cuenta regresiva
<VidtreoRecorder countdownDuration={0} />

Toggles de Características

enableSourceSwitching

Tipo: boolean Por defecto: true

Permite a los usuarios cambiar entre grabación de cámara y pantalla durante una sesión.

<VidtreoRecorder enableSourceSwitching={true} />

enableMute

Tipo: boolean Por defecto: true

Muestra el botón de silenciar/activar audio y permite alternar el audio.

<VidtreoRecorder enableMute={true} />

enablePause

Tipo: boolean Por defecto: true

Permite pausar y reanudar la grabación.

<VidtreoRecorder enablePause={true} />

enableDeviceChange

Tipo: boolean Por defecto: true

Permite a los usuarios seleccionar diferentes cámaras y micrófonos.

<VidtreoRecorder enableDeviceChange={true} />

Visibilidad de Pestaña

enableTabVisibilityOverlay

Tipo: boolean Por defecto: false

Muestra un overlay cuando la pestaña del navegador se oculta durante la grabación.

<VidtreoRecorder enableTabVisibilityOverlay={true} />

tabVisibilityOverlayText

Tipo: string Por defecto: "Grabación pausada - regresa a esta pestaña"

Texto personalizado para el overlay de visibilidad de pestaña.

<VidtreoRecorder
  enableTabVisibilityOverlay={true}
  tabVisibilityOverlayText="Por favor regresa para continuar grabando"
/>

Modo Móvil

Controla cómo se comporta el grabador en dispositivos móviles.

Web Component (atributo mobile-mode)

Tipo: "overlay" | "embed" | "native" Por defecto: "overlay"

<!-- Modal fullscreen (por defecto) -->
<vidtreo-recorder mobile-mode="overlay"></vidtreo-recorder>

<!-- Grabador en línea -->
<vidtreo-recorder mobile-mode="embed"></vidtreo-recorder>

<!-- Usar cámara nativa del dispositivo -->
<vidtreo-recorder mobile-mode="native"></vidtreo-recorder>

React (prop nativeCamera)

Tipo: boolean Por defecto: true

// Usar cámara nativa del dispositivo (por defecto)
<VidtreoRecorder nativeCamera={true} />

// Usar UI overlay del SDK en móvil
<VidtreoRecorder nativeCamera={false} />

Metadatos

userMetadata

Tipo: Record<string, unknown> Por defecto: undefined

Metadatos personalizados para adjuntar a la grabación. Estos datos se almacenan con el video y pueden recuperarse via la API.

<VidtreoRecorder
  userMetadata={{
    userId: 'user-123',
    sessionId: 'session-456',
    department: 'soporte',
    customField: 'cualquier-valor'
  }}
/>

Internacionalización

lang

Tipo: string Por defecto: "en"

Idioma de la UI. Valores soportados: "en", "es", "pt".

<VidtreoRecorder lang="es" />

texts

Tipo: object Por defecto: undefined

Textos personalizados para elementos de la UI.

<VidtreoRecorder
  lang="es"
  texts={{
    record: 'Iniciar Captura',
    stop: 'Finalizar Captura',
    pause: 'Esperar',
    resume: 'Continuar',
    mute: 'Silencio',
    unmute: 'Con Sonido'
  }}
/>

Modo Demo

demo

Tipo: boolean Por defecto: false

Activa el modo demo. En modo demo, las grabaciones no se suben al servidor. Útil para pruebas y desarrollo.

<VidtreoRecorder demo={true} />

Configuración por Defecto

Aquí está la configuración por defecto completa:

const defaultConfig = {
  apiUrl: 'https://core.vidtreo.com',
  enableSourceSwitching: true,
  enableMute: true,
  enablePause: true,
  enableDeviceChange: true,
  countdownDuration: 3000,
  maxRecordingTime: undefined,
  userMetadata: undefined,
  enableTabVisibilityOverlay: false,
  tabVisibilityOverlayText: 'Grabación pausada - regresa a esta pestaña',
  lang: 'en',
  texts: undefined,
  demo: false
};

Variables de Entorno

La configuración también puede establecerse via variables de entorno:

Vite

VITE_VIDTREO_API_KEY=vt_live_xxxxxxxxxxxx

Next.js

NEXT_PUBLIC_VIDTREO_API_KEY=vt_live_xxxxxxxxxxxx

Node.js

VIDTREO_API_KEY=vt_live_xxxxxxxxxxxx

Opciones Específicas por Paquete

Paquete React

El paquete React (@vidtreo/recorder-react) acepta todas las opciones core más:

Web Component

El Web Component usa kebab-case para todos los atributos:

Próximos Pasos

• Callbacks — Manejo de eventos
• Personalización — Estilos y temas
• Referencia de API — Documentación completa de la API