Le paradigme devient : pour brancher un canal physique sur un groupe,
créer un server audio user. Les matrices sont retirées de l'UI Electron,
de l'admin PWA, de l'API REST et du backend (GroupAudioRouter supprimé).
AudioBridgeManager ne génère plus de tokens per-group.
Option "aucune sortie" ajoutée pour les server audio users.
Correction detection du protocole pour utiliser le bon endpoint LiveKit.
Modifications:
- client/src/App.jsx: detection HTTPS au lieu de import.meta.env.DEV
- Si HTTPS: utiliser wss://host/livekit (proxy)
- Si HTTP: utiliser URL LiveKit directe
Probleme resolu:
- Mixed content error (HTTPS ne peut pas WS)
- Fonctionne maintenant en prod HTTPS build
Problème:
- Son complètement déformé (clipping massif)
- CoreAudio capture en 32-bit mais traité comme 16-bit
- Mixage additif sans normalisation
Solution:
1. Sox convertit 32→16 bit automatiquement
2. GroupAudioRouter divise gain par nombre de sources
Exemple: 2 inputs → groupe default = gain × 0.5 chacun
Résultat: Aucun clipping détecté, audio propre
- Admin : regroupement des 3 dropdowns cartes son dans une seule section
- Admin : suppression du mode édition pour noms de canaux (directement éditables)
- Admin : unification des boutons de sauvegarde en bas de chaque section
- Admin : routing par hash URL pour persistance des onglets (#groups, #audio, etc.)
- AudioRoutingMatrix : bouton sauvegarde déplacé en bas de la matrice
- AudioRoutingMatrix : dropdowns de gain en nuance de bleu (cohérence visuelle)
- Settings : suppression paramètres inutiles (mode PTT continu, feedback audio non implémenté)
- Settings : conservation uniquement du paramètre vibrations (fonctionnel)
- PTTButton : suppression init mode continu par défaut (redondant avec geste verrouillage)
- PWAInstallPrompt : ajout fond semi-transparent et couleurs hardcodées pour lisibilité
- Admin : fix dropdowns audio qui se réinitialisaient (useRef au lieu de useState pour édition)
- Mode dev : proxy Vite /livekit → ws://localhost:7880 (évite mixed content)
- Mode prod : HTTP direct, pas de HTTPS (auto-hébergé local)
- Détection automatique du mode via import.meta.env.DEV
- En production réelle, HTTPS sera géré par reverse proxy
- Création d'un apiRouter Express pour toutes les routes API
- Routes montées sous /api ET à la racine (rétrocompatibilité)
- QR code corrigé : HTTPS en mode production
- start.sh : affichage URL HTTPS corrigé
- Résout le problème de connexion en mode production
- Ajout .env.production avec VITE_API_URL=. (URLs relatives)
- Le client build utilise maintenant les routes directes (/config au lieu de /api/config)
- Rebuild client avec la bonne configuration pour HTTPS production
- Création show-qr.sh : génère et affiche QR code avant lancement serveur
- Détection auto mode dev/prod pour URL correcte
- start.sh appelle show-qr.sh puis lance serveur silencieusement
- Logs serveur uniquement dans server.log (terminal propre)
- Suppression génération QR dans server/index.js (plus nécessaire)
- Suppression dépendance qrcode-terminal dans server (utilisé via npx dans show-qr.sh)
Changements pour rendre l'installation portable :
1. Config réseau auto-détectée
- config.yaml : LIVEKIT_URL = AUTO (au lieu de IP hardcodée)
- Devices audio : null par défaut (auto-détection)
2. Client .env dynamique
- Ajout client/.env.example avec documentation
- VITE_API_URL configurable pour dev/prod
3. Vite config dynamique
- Utilisation de loadEnv() pour variables d'environnement
- Proxies configurables via VITE_API_URL et VITE_LIVEKIT_URL
4. Install script amélioré
- Détection automatique IP réseau au moment install
- Génération .env client avec IP détectée
- Messages informatifs avec IP du serveur
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Corrections pour le routing audio carte son → LiveKit :
**Fixes audio backend**
- AudioBridgeManager : extraction des device IDs depuis config.audio.device
- AudioBridge : ajout résolution device ID → device name pour CoreAudio/sox
- CoreAudioBackend : correction index args sox capture (args[2] au lieu de args[1])
**Résultat**
- ✅ Sox capture fonctionne : lit depuis "Microphone MacBook Pro"
- ✅ Audio capturé et envoyé vers routing
- ❌ Sox playback se ferme après 0.2s (problème persistant à corriger)
**Autres modifications**
- Logging centralisé (Logger.js)
- IP corrigée : 192.168.0.146
- Suppression système channels[] legacy dans groupes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Try/catch dans getDefaultInputDevice et getDefaultOutputDevice
- Cherche d'abord device avec isDefault.input/output = true
- Fallback sur premier device avec canaux disponibles
- Retourne null en cas d'erreur au lieu de crash
- Ajout état isEditingAudio pour tracker quand utilisateur édite
- loadAudioDevices() ne réécrase plus les sélections si isEditingAudio=true
- Activation isEditingAudio sur onChange des 3 dropdowns
- Désactivation après sauvegarde réussie
- Corrige bug: dropdowns se réinitialisaient toutes les 3s (auto-refresh)
- Parse coreaudio_device_input/output depuis system_profiler (nombre canaux)
- Ajoute sampleRate reel par device
- Ajoute metadata: manufacturer, transport, isDefault
- Filtre devices sans input ni output
- Corrige l'API pour exposer les 11 devices au lieu de 2
- Import AccessToken depuis livekit-server-sdk
- Generation token avec identity 'AudioBridge' et metadata role:bridge
- Permissions completes (publish, subscribe, data)
- Utilise devkey/secret du serveur LiveKit
- Permet au bridge de se connecter en tant que participant authentifie
- Remplacement livekit-client (navigateur) par @livekit/rtc-node (serveur Node.js)
- Support natif AudioSource/AudioFrame pour gestion PCM bas niveau
- Réception audio via AudioStream asynchrone (for await)
- Publication track audio via AudioSource.captureFrame()
- Permet au serveur d'agir comme participant LiveKit complet
- Suppression dépendance livekit-client inutile côté serveur
Probleme: Client tentait de se connecter a ws://localhost:3001 mais serveur n'avait pas de WebSocket demarre
Solution:
- Ajout import AudioLevelsServer dans server/index.js
- Demarrage WebSocket sur meme port que l'API REST (3000)
- Correction port dans useAudioLevels.js (3000 au lieu de 3001)
Le WebSocket audio-levels fonctionne maintenant pour monitoring temps reel
- Dropdown gain -12dB à +6dB pour chaque route active
- Interface visuelle améliorée (checkbox + gain)
- Gestion gains input->group et group->output
- Sauvegarde gains dans config.yaml
- Design responsive mobile
- Ajout React.Fragment avec keys pour éliminer warnings
- Import de React pour utiliser React.Fragment
- Meilleure gestion erreurs HTTP (status check)
- Messages d'erreur plus détaillés avec status code
- Logging amélioré pour debugging
- Ajout grid-template-columns dynamique basé sur nombre groupes
- Suppression display:contents qui causait le bug
- Utilisation de fragments React au lieu de div wrapper
- Matrice 1: 120px + N colonnes pour les groupes
- Matrice 2: 120px + 8 colonnes pour les outputs
- Nettoyage CSS classes inutilisées
- API GET/POST /admin/audio/routing
- Composant AudioRoutingMatrix avec 2 matrices :
* Inputs vers Groupes (8 inputs x N groupes)
* Groupes vers Outputs (N groupes x 8 outputs)
- Interface visuelle type grille cliquable
- Intégration noms de canaux personnalisés
- Stockage routing dans config.yaml
- Responsive design avec CSS Grid
- Style cohérent avec interface admin
- API GET /admin/audio/channels/names
- API PUT /admin/audio/channels/names
- Interface admin : nommage 8 inputs/outputs
- Mode édition avec sauvegarde/annulation
- Stockage dans config.yaml (section audio.channelNames)
- Formulaire organisé en 2 colonnes (inputs/outputs)
- Nouvel onglet Audio dans l'interface admin
- Sélection carte son d'entrée/sortie via dropdowns
- Configuration sample rate (44.1/48/96kHz)
- Affichage liste toutes cartes disponibles
- Affichage configuration actuelle
- Sauvegarde vers API backend
Changements de style :
- Utilisation des variables CSS globales (--color-*, --spacing-*)
- Cohérence visuelle avec App.css et index.css
- Suppression emojis du header et boutons (🎛️⚠️✏️🗑️ ✕)
- Remplacement par texte simple ou symboles HTML (×)
- Boutons 'Modifier' et 'Supprimer' au lieu d'icônes
Design system unifié :
- Couleurs : var(--color-primary, --color-surface, etc.)
- Espacements : var(--spacing-xs à --spacing-xl)
- Typographie et transitions cohérentes
- Border radius, padding, hover states alignés
Interface plus professionnelle et accessible sans dépendance externe.
Simplification majeure de la configuration des groupes :
- Suppression des champs redondants 'id' et 'description'
- Le nom du groupe sert maintenant d'identifiant (converti en slug automatiquement)
- Génération automatique des IDs pour groupes et canaux via fonction slugify()
Backend (server/) :
- Ajout fonction slugify() pour génération d'IDs à partir des noms
- Génération automatique des IDs au chargement de la config (index.js)
- API admin adaptée : POST/PUT /admin/groups génèrent les IDs automatiquement
- Pas besoin de fournir l'ID lors de la création/modification
Frontend (client/src/Admin.jsx + Admin.css) :
- Suppression champs ID et description du formulaire
- Simplification interface : nom + bitrate + canaux
- Mise à jour layout CSS canal (4 colonnes au lieu de 5)
- Cartes de groupe épurées (plus d'affichage d'ID)
Configuration (config.yaml) :
- Format simplifié : groupes avec 'name', 'channels' et 'audioBitrate' optionnel
- Exemple : "Production" au lieu de id/name/description séparés
- Plus lisible et maintenable
Les IDs sont générés dynamiquement :
- Groupe "Production" → id: "production"
- Canal "Principal" → id: "production-principal"
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implémentation complète de l'interface d'administration web :
Backend (server/api/admin.js) :
- Endpoints CRUD pour gestion des groupes (GET/POST/PUT/DELETE /admin/groups)
- Gestion utilisateurs connectés en temps réel (GET/DELETE /admin/users)
- Monitoring statistiques système (GET /admin/stats)
- Affichage logs serveur avec filtrage (GET /admin/logs)
- Configuration audio globale (PUT /admin/config/audio)
- Système de tracking des connexions/déconnexions
- Export fonctions registerUser, unregisterUser, addLog
Frontend (client/src/Admin.jsx + Admin.css) :
- Interface admin complète avec 4 onglets (Groupes, Utilisateurs, Stats, Logs)
- Gestion groupes : création, modification, suppression avec formulaires
- Gestion canaux audio par groupe (inputs/outputs)
- Liste utilisateurs connectés avec déconnexion forcée
- Dashboard statistiques temps réel (connexions, uptime, mémoire)
- Viewer logs avec code couleur par niveau (debug/info/warn/error)
- Rafraîchissement auto toutes les 3s
- Design responsive et mode sombre
Intégration système :
- Routes admin montées sous /admin dans index.js
- Enregistrement automatique des utilisateurs lors de la génération de token
- Logs serveur centralisés dans le système admin
- Routing simple frontend pour /admin (main.jsx)
🎛️ Interface accessible via https://localhost:5173/admin🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
NOUVEAU DESIGN :
- VU-mètre transformé en anneau SVG autour du bouton PTT
- Cercle progressif (0-360°) selon le niveau audio
- Couleurs dynamiques selon le niveau :
- Vert (0-75%) : audio normal
- Orange (75-90%) : niveau élevé
- Rouge (90-100%) : saturation/danger avec effet glow
- Bleu : mode talking (micro actif)
AVANTAGES :
- Beaucoup plus discret et élégant
- Intégré visuellement au bouton principal
- Pas d'encombrement UI supplémentaire
- Contextuellement pertinent (niveau autour du contrôle)
TECHNIQUE :
- SVG avec stroke-dasharray pour l'arc progressif
- Transition fluide 0.1s sur le niveau
- Drop-shadow dynamique selon couleur
- Responsive (adapté mobile/paysage)
- z-index stratifié (anneau derrière, bouton devant)
SUPPRESSION :
- Ancien composant AudioIndicator.jsx retiré de App.jsx
- Garde plus d'espace pour UserList et GroupSelector
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
CORRECTIONS :
- Hauteur max passée de 180px à 300px (desktop)
- Hauteur max passée de 150px à 250px (mobile)
- Ajout min-height: 100px pour garantir visibilité
AMÉLIORATIONS SCROLL :
- Scrollbar personnalisée fine et discrète
- Support -webkit-overflow-scrolling: touch (iOS)
- Scrollbar visible au hover (desktop)
- Gap réduit entre items pour densité optimale
RESPONSIVE :
- Portrait mobile : 200px max
- Paysage : 120px max (priorité au bouton PTT)
- Padding réduit pour maximiser l'espace visible
Résultat : Affichage de 4-5 utilisateurs au lieu de 1-2
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
CORRECTIONS :
- Fix son qui ne restait pas actif en mode lock (utilisation de ref au lieu de state)
- Les event handlers utilisent isLockModeRef.current pour accès immédiat
NOUVELLE ACTIVATION :
- Remplacement appui long 3s par drag vertical (glisser vers le haut)
- Drag de 80px vers le haut active le mode lock
- Indicateur visuel avec flèche + texte "Glissez pour verrouiller"
- Bouton suit le doigt pendant le drag (transform translateY)
- Feedback haptique à l'activation (triple vibration)
DÉSACTIVATION :
- Tap/clic sur le bouton en mode lock désactive le mode
- Feedback haptique simple à la désactivation
UX AMÉLIORÉE :
- Plus intuitif qu'un appui long
- Retour visuel immédiat du drag
- Compatible touch (mobile) et mouse (desktop)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Nouveau mode PTT continu (lock) activé par appui long de 3s
- Barre de progression visuelle pendant l'appui (0-100%)
- Badge cadenas en haut à droite quand mode actif
- Animation pulsante distinctive pour mode lock
- Feedback haptique à l'activation (triple vibration)
- Désactivation par simple tap quand mode lock actif
- Indication textuelle claire de l'état (normal/lock)
- Styles responsifs mobile + accessibilité (prefers-reduced-motion)
Mode d'emploi :
- Normal : Maintenir pour parler, relâcher pour arrêter
- Lock : Maintenir 3s → mode continu → tap pour désactiver
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Ajout de 3 groupes dans config.yaml : Production, Technique, Sonorisation
- Nouvel endpoint API GET /groups pour lister les groupes disponibles
- Composant GroupSelector.jsx pour changer de groupe pendant la session
- Hook useLiveKit étendu avec fonction switchGroup() pour reconnexion
- Intégration dans App.jsx avec gestion du changement de groupe
- Chaque groupe = 1 room LiveKit distincte
- Qualité audio configurable par groupe (96-128 kbps)
benoit