Personalização

VIDTREO fornece múltiplas formas de personalizar a aparência e comportamento do gravador para combinar com o design da sua aplicação.

Personalização de Texto

Idiomas Integrados

VIDTREO suporta três idiomas por padrão:

// Inglês (padrão)
<VidtreoRecorder lang="en" />

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

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

Textos Personalizados

Sobrescreva qualquer texto da UI:

<VidtreoRecorder
  lang="pt"
  texts={{
    // Controles de gravação
    record: 'Iniciar Captura',
    stop: 'Finalizar Captura',
    pause: 'Aguardar',
    resume: 'Continuar',

    // Controles de áudio
    mute: 'Silêncio',
    unmute: 'Com Som',

    // Troca de fonte
    switchSource: 'Trocar Vista',

    // Mensagens de status
    initializingCamera: 'Configurando câmera...',
    grantPermissions: 'Acesso à câmera necessário',
    switchingDevice: 'Trocando dispositivo...',
    recordingStartsIn: 'Começa em',
    switchingSource: 'Trocando vista...',
    uploading: 'Enviando vídeo...',

    // Labels
    rec: 'AO VIVO',
    settings: 'Opções',
    camera: 'Webcam',
    microphone: 'Mic',
  }}
/>

Todas as Chaves de Texto Disponíveis

Chave	Padrão (PT)	Descrição
`initializingCamera`	Inicializando câmera...	Mensagem de início da câmera
`grantPermissions`	Por favor conceda permissões	Solicitação de permissões
`switchingDevice`	Trocando dispositivo...	Status de troca de dispositivo
`recordingStartsIn`	A gravação começa em	Prefixo da contagem regressiva
`switchingSource`	Trocando fonte...	Status de troca de fonte
`rec`	REC	Indicador de gravação
`settings`	Configurações	Label do botão de configurações
`record`	Gravar	Botão de gravar
`stop`	Parar	Botão de parar
`pause`	Pausar	Botão de pausar
`resume`	Retomar	Botão de retomar
`mute`	Silenciar	Botão de silenciar
`unmute`	Ativar Áudio	Botão de ativar áudio
`switchSource`	Trocar Fonte	Botão de troca de fonte
`camera`	Câmera	Label do seletor de câmera
`microphone`	Microfone	Label do seletor de microfone
`uploading`	Enviando...	Status de upload

Estilos do Componente React

Estilo do Container

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

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

Componente Wrapper

Crie um 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 do Web Component

Estilo do Container Externo

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

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

  /* Posicionamento */
  margin: 0 auto;
}

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

Propriedades CSS Personalizadas (Em Breve)

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 com Hook

Para controle completo da UI, use o 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 vídeo 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 áudio 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()}
          >
            Gravar
          </button>
        ) : (
          <>
            <button
              className="mute-btn"
              onClick={() => actions.toggleMute()}
            >
              {state.isMuted ? 'Ativar Áudio' : 'Silenciar'}
            </button>

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

Design Responsivo

Tamanho Amigável para Mobile

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

/* Manter proporção */
vidtreo-recorder {
  aspect-ratio: 4/3;
  height: auto;
}

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

Controles Amigáveis ao Toque

/* Alvos de toque maiores */
.recorder-button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

Integração de Temas

Modo Escuro

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

Cores da Marca

.brand-recorder {
  --accent-color: #sua-cor-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%);
}

Acessibilidade

Navegação por Teclado

O gravador suporta navegação completa por teclado:

Tab — Navegar entre controles
Enter/Espaço — Ativar controle focado
Escape — Fechar painel de configurações

Suporte a Leitores de Tela

Todos os controles têm labels ARIA apropriados. Implementações personalizadas devem manter a acessibilidade:

<button
  aria-label={isRecording ? 'Parar gravação' : 'Iniciar gravação'}
  aria-pressed={isRecording}
  onClick={toggleRecording}
>
  {isRecording ? 'Parar' : 'Gravar'}
</button>

Indicadores de Foco

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

Para personalização completa da UI, use o hook useVidtreoRecorder com seus próprios componentes. Isso dá controle total sobre o design enquanto aproveita o motor de gravação do VIDTREO.

Próximos Passos

Exemplo de UI Personalizada — Construa interfaces personalizadas
Referência de API — Documentação do hook
Exemplos — Mais exemplos

Personalização

Nesta página