## WebCamera - Pared de Streams (HLS / WHEP)

Plataforma web estática para visualizar múltiples streams en una cuadrícula (1x1, 2x2, 3x2, 3x3, 4x4). Soporta HLS (via hls.js) y WebRTC (WHEP) para reproducción recvonly.

### Ejecutar localmente

- Con Node.js:
  ```bash
  npx http-server -p 5173 -c-1
  ```
  Luego abrir `http://localhost:5173/`.

- Con Python (alternativa):
  ```bash
  python -m http.server 5173
  ```

### Configuración (`config.json`)

Estructura:

```json
{
  "streams": [
    { "id": "cam1", "label": "Cam 1", "type": "hls",  "url": "https://.../index.m3u8", "muted": true, "autoplay": true },
    { "id": "cam2", "label": "Cam 2", "type": "whep", "url": "https://whep.example.com/endpoint", "muted": true, "autoplay": true }
  ]
}
```

- `type`: `hls` o `whep` (WebRTC WHEP).
- `url`: para HLS, el playlist `.m3u8`. Para WHEP, el endpoint HTTP de WHEP (no la señalización WebSocket).
- `muted`/`autoplay`: opcionales (por defecto `muted=true`, `autoplay=true`).

Este repo incluye un `config.json` de ejemplo con streams HLS públicos.

### Layouts soportados

- 1x1, 2x2, 3x2, 3x3, 4x4. Seleccionables desde el combo "Layout".

### Controles por mosaico

- Reproducir/Pausar, Silenciar/Activar sonido, Pantalla completa.

### Notas sobre WHEP

- El player implementa WHEP sin trickle ICE (genera la oferta local, espera ICE gathering completo, POST `application/sdp`, recibe respuesta SDP y establece la sesión). Muchos servidores WHEP lo soportan.
- Requisitos frecuentes del servidor WHEP:
  - CORS permitido para el origen de tu página (Headers `Access-Control-Allow-Origin` y `Allow-Methods: OPTIONS, POST, DELETE, PATCH` si aplica).
  - HTTPS y certificados válidos si el sitio se sirve por HTTPS.
  - ICE Servers/Turn configurados si hay NATs estrictos.
- Para liberar la sesión, si el servidor devuelve `Location` en la respuesta de oferta, el cliente realiza `DELETE` a esa URL al destruir el mosaico.

### Personalización

- Estilos en `styles.css`.
- Lógica principal en `app.js`.
- Players en `players/hlsPlayer.js` y `players/whepPlayer.js`.