hubOptions.
Idiomas Suportados
Copy
Ask AI
const hubOptions = {
locale: 'pt-BR', // 'pt-BR' | 'en-US' | 'custom'
};
| Valor | Descrição |
|---|---|
pt-BR | Português (Brasil) |
en-US | Inglês (Estados Unidos) |
custom | Textos personalizados |
Personalização de Textos
Você pode customizar todos os textos exibidos na interface usandolocale: 'custom':
Copy
Ask AI
const hubOptions = {
locale: 'custom',
strings: {
// Botões de ação
actions: {
ready: 'INICIAR VERIFICAÇÃO',
tryAgain: 'TENTAR NOVAMENTE',
},
// Textos de acessibilidade
accessibility: {
cancelButton: 'Cancelar verificação',
tapGuidance: 'Toque duas vezes para orientação',
},
// Instruções iniciais
instructions: {
title: 'Verificação Biométrica',
subtitle: 'Posicione seu rosto dentro do círculo',
},
// Mensagens de feedback em tempo real
feedback: {
centerFace: 'Centralize o rosto',
faceNotFound: 'Rosto não detectado',
moveCloser: 'Aproxime-se da câmera',
moveBack: 'Afaste-se um pouco',
moveLeft: 'Mova-se para a esquerda',
moveRight: 'Mova-se para a direita',
moveUp: 'Levante a câmera',
moveDown: 'Abaixe a câmera',
moveToEyeLevel: 'Posicione na altura dos olhos',
lookStraightAhead: 'Olhe para frente',
faceNotUpright: 'Mantenha a cabeça reta',
keepHeadStraight: 'Mantenha a cabeça reta',
holdStill: 'Fique parado',
useEvenLighting: 'Melhore a iluminação',
tooBlurry: 'Imagem borrada',
multipleFacesDetected: 'Múltiplos rostos detectados',
onlyOneFaceAllowed: 'Apenas um rosto permitido',
perfect: 'Perfeito!',
readyToCapture: 'Pronto para capturar',
},
// Mensagens de status
status: {
loading: 'Carregando...',
processing: 'Processando biometria...',
uploading: 'Enviando dados...',
analyzing: 'Analisando...',
initializing: 'Inicializando...',
connectingCamera: 'Conectando à câmera...',
success: 'Sucesso!',
captureComplete: 'Captura concluída',
verificationComplete: 'Verificação finalizada',
},
// Tela de nova tentativa
retry: {
title: 'Vamos Tentar Novamente',
subtitle: 'Siga as instruções para melhorar a captura',
yourImageLabel: 'Sua foto',
idealImageLabel: 'Posição ideal',
instructionBetterLighting: 'Use melhor iluminação',
instructionNeutralExpression: 'Mantenha expressão neutra',
instructionCleanCamera: 'Limpe a câmera',
instructionBetterPosition: 'Melhore o posicionamento',
},
// Mensagens de erro
errors: {
cameraPermissionDenied: 'Permissão de câmera negada',
cameraNotFound: 'Câmera não encontrada',
cameraInUse: 'Câmera em uso por outra aplicação',
networkError: 'Erro de conexão',
uploadFailed: 'Falha ao enviar dados',
sessionExpired: 'Sessão expirada',
sessionFailed: 'Falha ao criar sessão',
faceNotDetected: 'Rosto não detectado',
faceNotClear: 'Rosto não está nítido',
multipleFaces: 'Múltiplos rostos detectados',
unexpectedError: 'Erro inesperado',
tryAgainLater: 'Tente novamente mais tarde',
},
},
};
Personalização de Cores (Tema)
Customize a aparência visual da interface:Copy
Ask AI
const hubOptions = {
colorTheme: {
// Cores principais
primaryColor: '#667eea', // Cor da marca principal
secondaryColor: '#764ba2', // Cor de destaque
// Fundos
backgroundColor: '#ffffff', // Fundo principal
surfaceColor: '#f8f9fa', // Fundo de cards e painéis
overlayColor: 'rgba(0, 0, 0, 0.6)', // Sobreposição de modal
// Textos
textColor: '#333333', // Texto principal
textColorSecondary: '#666666', // Texto secundário
textColorLight: '#ffffff', // Texto claro (em fundos escuros)
// Botões
buttonColor: '#667eea', // Fundo do botão principal
confirmButtonColor: '#5FCC17', // Botão de confirmar
cancelButtonColor: '#FF453A', // Botão de cancelar
buttonTextColor: '#ffffff', // Texto dos botões
buttonHoverColor: '#5a67d8', // Hover do botão
buttonDisabledColor: '#e2e8f0', // Botão desabilitado
// Estados
successColor: '#5FCC17', // Sucesso
errorColor: '#f56565', // Erro
warningColor: '#ed8936', // Aviso
infoColor: '#4299e1', // Informação
// Elementos da face
frameColor: '#ffffff', // Moldura de detecção facial
progressColor1: '#667eea', // Cor do progresso
progressColor2: '#764ba2', // Cor secundária do progresso
maskColor: 'rgba(0, 0, 0, 0.6)', // Máscara de sobreposição
// Loading
loadingColor: '#ffffff', // Indicador de carregamento
},
};
Exemplos de Temas
Tema Escuro
Copy
Ask AI
const hubOptions = {
locale: 'pt-BR',
colorTheme: {
primaryColor: '#818cf8',
secondaryColor: '#a78bfa',
backgroundColor: '#1f2937',
surfaceColor: '#374151',
overlayColor: 'rgba(0, 0, 0, 0.8)',
textColor: '#f9fafb',
textColorSecondary: '#d1d5db',
textColorLight: '#f9fafb',
buttonColor: '#818cf8',
confirmButtonColor: '#34d399',
cancelButtonColor: '#f87171',
buttonTextColor: '#1f2937',
successColor: '#34d399',
errorColor: '#f87171',
warningColor: '#fbbf24',
infoColor: '#60a5fa',
frameColor: '#818cf8',
maskColor: 'rgba(0, 0, 0, 0.7)',
},
};
Tema Claro
Copy
Ask AI
const hubOptions = {
locale: 'pt-BR',
strings: {
instructions: {
title: 'Verificação de Identidade',
subtitle: 'Olhe diretamente para a câmera',
},
actions: {
ready: 'COMEÇAR',
},
},
colorTheme: {
primaryColor: '#003366',
secondaryColor: '#0066cc',
backgroundColor: '#f5f5f5',
buttonColor: '#003366',
confirmButtonColor: '#28a745',
frameColor: '#003366',
},
};
Exemplo Completo com Personalização
Copy
Ask AI
const hub = ValidHub.createHub();
const config = {
apiKey: 'sua-api-key',
cek: cekData,
mount: '#camera-container',
backendBaseUrl: 'https://api.valid.com/liveness',
appName: 'minha-aplicacao',
risk: 'LIVENESS_RISK_HIGH',
hubOptions: {
locale: 'pt-BR',
strings: {
instructions: {
title: 'Verificação de Identidade',
subtitle: 'Posicione seu rosto no centro da tela',
},
actions: {
ready: 'ESTOU PRONTO',
tryAgain: 'TENTAR NOVAMENTE',
},
feedback: {
centerFace: 'Centralize seu rosto',
faceNotFound: 'Rosto não encontrado',
perfect: 'Perfeito! Mantenha a posição',
holdStill: 'Fique parado...',
},
status: {
processing: 'Analisando sua biometria...',
success: 'Verificação concluída!',
},
},
colorTheme: {
primaryColor: '#667eea',
secondaryColor: '#764ba2',
buttonColor: '#667eea',
confirmButtonColor: '#10b981',
cancelButtonColor: '#ef4444',
frameColor: '#667eea',
successColor: '#10b981',
errorColor: '#ef4444',
},
},
onSuccess: (result) => {
console.log('Sucesso:', result);
},
onFailure: (error) => {
console.error('Erro:', error);
},
onProgress: (state) => {
console.log('Estado:', state);
},
};
const result = await hub.run(config);
Você pode combinar idioma predefinido com customização parcial de textos. As
strings não especificadas usarão os valores padrão do idioma selecionado.