# ZD_Phone – Web Viewer

Serveur web pour visualiser les diffusions d’écran **sans être connecté au jeu**. Basé sur WebRTC et un relais de signaling via WebSocket.

## Prérequis

- Node.js 16+
- Ressource FiveM ZD_Phone

## Installation

```bash
cd web-viewer
npm install
```

## Configuration

1. Copier `config.example.js` en `config.js` (ou éditer `config.js` directement).
2. Adapter les paramètres selon votre déploiement.

### Options principales

| Option | Description |
|--------|-------------|
| `port` | Port du serveur (ex. 3010) |
| `publicUrl` | URL publique du viewer (ex. `https://mon-domaine.com`) |
| `fiveMCallbackUrl` | URL du callback FiveM pour recevoir answer/candidate (voir ci-dessous) |
| `turn` | Config TURN pour traverser les NAT (optionnel) |

### Liaison FiveM ↔ Web Viewer

**Côté FiveM** (`config.lua`) :

```lua
Config.WebViewerUrl = "http://IP_DU_SERVEUR_WEB:3010"  -- URL du web viewer
```

**Côté Web Viewer** (`config.js`) :

```javascript
fiveMCallbackUrl: "http://IP_DU_SERVEUR_FIVEM:30120/ZD_Phone/webviewer-signaling"
```

> Le serveur FiveM doit être joignable depuis le serveur web (même réseau ou IP publique).

## Liste joueurs (viewer)

La liste est pollée toutes les 5 s. Le DOM est mis à jour par **diff** (`data-player-id`) : pas de wipe `innerHTML` à chaque tick. En cas d’erreur FiveM (HTTP 503), le cache client est conservé pour éviter le flicker et les clics perdus.

## Tests

```bash
cd website
npm test
```

## Démarrer le serveur

```bash
npm start
```

Après modification du viewer / serveur : redémarrer le process Node (`npm start` ou votre service).

- **Monitoring** : `http://IP/` (ex. `http://localhost:3479/`)
- **CDN vêtements** (public, sans Discord) : `http://IP/male/11/5.png` — format AutoShot (`shots/`)

### Déployer les images vêtements

1. Générer les shots avec `uz_AutoShot`.
2. Sur le VPS, synchroniser le dossier :

```bash
rsync -av --delete /chemin/uz_AutoShot/shots/ /chemin/ZD_Survey/website/shots/
```

Ou définir `shotsPath` dans `config.js` vers le dossier AutoShot.

3. Redémarrer Node. Vérifier : `curl -I http://IP/male/11/0.png`

Discord OAuth redirect : `{publicUrl}/auth/callback`.

## Flux de fonctionnement

1. Un admin demande la diffusion d’écran d’un joueur (dans le jeu).
2. FiveM envoie l’offre WebRTC et les candidats ICE au web viewer via `/api/signaling`.
3. Un utilisateur ouvre le viewer dans un navigateur.
4. Il choisit une session dans la liste et s’y abonne.
5. Le viewer envoie une answer et les candidats ICE au serveur FiveM via le callback configuré.
6. Le flux vidéo s’établit entre le joueur et le navigateur.

## TURN (optionnel)

Pour une utilisation publique (autre réseau / NAT), configurez un serveur TURN :

```javascript
turn: {
  urls: "turn:turn.example.com:3478",
  username: "user",
  credential: "pass"
}
```