```
## 鈿欙笍 Configuraci贸n
### Atributos Disponibles
| Atributo | Tipo | Default | Descripci贸n |
|----------|------|---------|-------------|
| `mode` | `'register' \| 'validate'` | `'register'` | Modo de operaci贸n |
| `api-url` | `string` | `'http://localhost:8000'` | URL base de la API |
| `api-timeout` | `number` | `10000` | Timeout en ms |
| `blink-threshold` | `number` | `0.15` | Sensibilidad para parpadeo |
| `smile-threshold` | `number` | `0.07` | Sensibilidad para sonrisa |
| `head-threshold` | `number` | `0.4` | Sensibilidad para cabeza |
| `disabled` | `boolean` | `false` | Deshabilitar componente |
### Ejemplos de Configuraci贸n
#### Desarrollo Local
```html
```
#### Producci贸n
```html
```
## 馃摗 Eventos
### Eventos de Registro
#### `register-start`
Se emite cuando se inicia el proceso de registro.
```javascript
component.addEventListener('register-start', () => {
console.log('Iniciando registro...');
});
```
#### `register-success`
Se emite cuando el registro es exitoso.
```javascript
component.addEventListener('register-success', (event) => {
const data = event.detail;
console.log('Usuario registrado:', data.userData.name);
});
```
**Estructura del evento:**
```typescript
{
userData: {
name: string;
id: string;
email?: string;
};
faceData: {
image: string; // base64
photos: Array<{
index: number;
data: string;
timestamp: number;
}>;
timestamp: number;
livenessScore: number;
};
}
```
#### `register-error`
Se emite cuando hay un error en el registro.
```javascript
component.addEventListener('register-error', (event) => {
const error = event.detail;
console.error('Error:', error.message);
});
```
### Eventos de Validaci贸n
#### `validate-start`
Se emite cuando se inicia el proceso de validaci贸n.
#### `validate-success`
Se emite cuando la validaci贸n es exitosa.
```javascript
component.addEventListener('validate-success', (event) => {
const data = event.detail;
console.log('Validaci贸n exitosa:', data.person_name);
console.log('Confianza:', data.confidence);
});
```
**Estructura del evento:**
```typescript
{
is_match: boolean;
confidence: number;
person_name: string;
message?: string;
}
```
#### `validate-failed`
Se emite cuando la validaci贸n falla (persona no reconocida).
#### `validate-error`
Se emite cuando hay un error en la validaci贸n.
### Eventos Generales
#### `error`
Se emite cuando hay errores generales.
```javascript
component.addEventListener('error', (event) => {
const error = event.detail;
console.error('Error general:', error.code, error.message);
});
```
## 馃敡 API Reference
### M茅todos P煤blicos
#### `startRegistration()`
Inicia el proceso de registro program谩ticamente.
```javascript
const component = document.querySelector('sfi-facial');
component.startRegistration();
```
#### `startValidation()`
Inicia el proceso de validaci贸n program谩ticamente.
```javascript
component.startValidation();
```
#### `getCapturedPhotos()`
Obtiene las fotos capturadas durante el proceso.
```javascript
const photos = component.getCapturedPhotos();
console.log('Fotos capturadas:', photos.length);
```
### Propiedades
#### `mode`
```javascript
component.mode = 'validate';
```
#### `apiUrl`
```javascript
component.apiUrl = 'https://nueva-api.com';
```
## 馃毃 Manejo de Errores
### Errores de API
```javascript
component.addEventListener('register-error', (event) => {
const { code, message } = event.detail;
switch (code) {
case 'API_ERROR':
if (message.includes('timeout')) {
console.log('La API no responde, verifica la conexi贸n');
} else if (message.includes('404')) {
console.log('Endpoint no encontrado, verifica la URL');
} else if (message.includes('500')) {
console.log('Error del servidor');
}
break;
case 'CAMERA_ERROR':
console.log('No se puede acceder a la c谩mara');
break;
default:
console.log('Error desconocido:', message);
}
});
```
### Validaci贸n de Configuraci贸n
```javascript
// Verificar si el componente est谩 configurado correctamente
const component = document.querySelector('sfi-facial');
if (!component.apiUrl) {
console.warn('URL de API no configurada');
}
if (component.getAttribute('blink-threshold') < 0.05) {
console.warn('Umbral de parpadeo muy bajo');
}
```
## 馃摫 Responsive y Mobile
El componente es completamente responsive y funciona en dispositivos m贸viles:
```css
/* CSS para mobile */
@media (max-width: 768px) {
sfi-facial {
width: 100%;
height: auto;
}
}
```
## 馃敀 Seguridad
### Recomendaciones
- Nunca hardcodear URLs de producci贸n en el c贸digo
- Usar HTTPS en producci贸n
- Validar respuestas de la API
- Implementar rate limiting en el backend
### Ejemplo con Variables de Entorno
```javascript
// React
const apiUrl = process.env.REACT_APP_SFI_API_URL || 'http://localhost:8000';
// Vue
const apiUrl = import.meta.env.VITE_SFI_API_URL || 'http://localhost:8000';
```
## 馃悰 Debugging
### Logs de Desarrollo
```javascript
// Habilitar logs detallados
localStorage.setItem('sfi-debug', 'true');
// Ver logs en la consola
component.addEventListener('debug', (event) => {
console.log('Debug:', event.detail);
});
```
### Inspecci贸n del Estado
```javascript
// Verificar estado del componente
console.log('Estado actual:', {
mode: component.mode,
processing: component._processing,
apiUrl: component.apiUrl
});
```
## 馃 Soporte
Para reportar bugs o solicitar funcionalidades:
- Crear un issue en el repositorio
- Incluir logs de la consola
- Especificar framework y versi贸n
- Adjuntar c贸digo de ejemplo