Opções de Configuração

Esta página documenta todas as opções de configuração disponíveis para o SDK VIDTREO em todos os pacotes.

Opções Principais

Estas opções estão disponíveis em todos os pacotes (React, Web Component e Core SDK).

apiKey

Tipo: string (obrigatório)

Sua API key do VIDTREO para autenticação.

<VidtreoRecorder apiKey="vt_live_xxxxxxxxxxxx" />

backendUrl / apiUrl

Tipo: string Padrão: "https://core.vidtreo.com"

URL personalizada do endpoint da API. Útil para fazer proxy de requisições ou usar um backend personalizado.

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

Opções de Gravação

maxRecordingTime

Tipo: number Padrão: undefined (ilimitado)

Duração máxima de gravação em milissegundos. A gravação para automaticamente quando este limite é atingido.

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

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

countdownDuration

Tipo: number Padrão: 3000

Duração da contagem regressiva pré-gravação em milissegundos. Defina como 0 para desativar.

// Contagem regressiva de 5 segundos
<VidtreoRecorder countdownDuration={5000} />

// Sem contagem regressiva
<VidtreoRecorder countdownDuration={0} />

Toggles de Recursos

enableSourceSwitching

Tipo: boolean Padrão: true

Permite aos usuários alternar entre gravação de câmera e tela durante uma sessão.

<VidtreoRecorder enableSourceSwitching={true} />

enableMute

Tipo: boolean Padrão: true

Mostra o botão de silenciar/ativar áudio e permite alternar o áudio.

<VidtreoRecorder enableMute={true} />

enablePause

Tipo: boolean Padrão: true

Permite pausar e retomar a gravação.

<VidtreoRecorder enablePause={true} />

enableDeviceChange

Tipo: boolean Padrão: true

Permite aos usuários selecionar diferentes câmeras e microfones.

<VidtreoRecorder enableDeviceChange={true} />

Visibilidade de Aba

enableTabVisibilityOverlay

Tipo: boolean Padrão: false

Mostra um overlay quando a aba do navegador fica oculta durante a gravação.

<VidtreoRecorder enableTabVisibilityOverlay={true} />

tabVisibilityOverlayText

Tipo: string Padrão: "Gravação pausada - retorne a esta aba"

Texto personalizado para o overlay de visibilidade de aba.

<VidtreoRecorder
  enableTabVisibilityOverlay={true}
  tabVisibilityOverlayText="Por favor retorne para continuar gravando"
/>

Modo Móvel

Controla como o gravador se comporta em dispositivos móveis.

Web Component (atributo mobile-mode)

Tipo: "overlay" | "embed" | "native" Padrão: "overlay"

<!-- Modal fullscreen (padrão) -->
<vidtreo-recorder mobile-mode="overlay"></vidtreo-recorder>

<!-- Gravador inline -->
<vidtreo-recorder mobile-mode="embed"></vidtreo-recorder>

<!-- Usar câmera nativa do dispositivo -->
<vidtreo-recorder mobile-mode="native"></vidtreo-recorder>

React (prop nativeCamera)

Tipo: boolean Padrão: true

// Usar câmera nativa do dispositivo (padrão)
<VidtreoRecorder nativeCamera={true} />

// Usar UI overlay do SDK no móvel
<VidtreoRecorder nativeCamera={false} />

Metadados

userMetadata

Tipo: Record<string, unknown> Padrão: undefined

Metadados personalizados para anexar à gravação. Esses dados são armazenados com o vídeo e podem ser recuperados via API.

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

Internacionalização

lang

Tipo: string Padrão: "en"

Idioma da UI. Valores suportados: "en", "es", "pt".

<VidtreoRecorder lang="pt" />

texts

Tipo: object Padrão: undefined

Textos personalizados para elementos da UI.

<VidtreoRecorder
  lang="pt"
  texts={{
    record: 'Iniciar Captura',
    stop: 'Finalizar Captura',
    pause: 'Aguardar',
    resume: 'Continuar',
    mute: 'Silêncio',
    unmute: 'Com Som'
  }}
/>

Modo Demo

demo

Tipo: boolean Padrão: false

Ativa o modo demo. No modo demo, as gravações não são enviadas ao servidor. Útil para testes e desenvolvimento.

<VidtreoRecorder demo={true} />

Configuração Padrão

Aqui está a configuração padrão 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: 'Gravação pausada - retorne a esta aba',
  lang: 'en',
  texts: undefined,
  demo: false
};

Variáveis de Ambiente

A configuração também pode ser definida via variáveis de ambiente:

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

Opções Específicas por Pacote

Pacote React

O pacote React (@vidtreo/recorder-react) aceita todas as opções core mais:

Web Component

O Web Component usa kebab-case para todos os atributos:

Próximos Passos

• Callbacks — Manipulação de eventos
• Personalização — Estilos e temas
• Referência de API — Documentação completa da API