first

TESTING_WEBRTC.md

@@ -0,0 +1,536 @@
+<!--
+Created by: Claude
+Date: 2026-01-03
+Purpose: Guide de test manuel WebRTC
+Refs: CLAUDE.md
+-->
+
+# Guide de Test Manuel - WebRTC
+
+Ce guide décrit comment tester manuellement toutes les fonctionnalités WebRTC de Mesh.
+
+---
+
+## Prérequis
+
+### Environnement
+- **HTTPS obligatoire** : getUserMedia nécessite HTTPS (ou localhost)
+- **2+ navigateurs** : Pour tester le P2P (Chrome, Firefox, Edge)
+- **Permissions** : Autoriser caméra/micro dans les navigateurs
+
+### Setup Rapide
+
+```bash
+# Terminal 1: Server
+cd server
+docker build -t mesh-server .
+docker run -d --name mesh-server -p 8000:8000 --env-file .env mesh-server
+
+# Terminal 2: Client
+cd client
+npm install
+npm run dev
+# Ouvrir http://localhost:5173
+```
+
+---
+
+## Test 1: Appel Audio Simple (2 utilisateurs)
+
+**Objectif** : Valider l'audio bidirectionnel basique
+
+### Étapes
+
+1. **Setup**
+   - Navigateur A: Créer compte `alice@test.com` / `password123`
+   - Navigateur B: Créer compte `bob@test.com` / `password123`
+   - Alice crée une room "Test Audio"
+   - Bob rejoint la room
+
+2. **Alice active son micro**
+   - Cliquer sur bouton 🎤 Audio
+   - ✅ **Vérifier** : Permission demandée
+   - ✅ **Vérifier** : Toast "Micro activé"
+   - ✅ **Vérifier** : Bouton 🎤 passe au vert
+   - ✅ **Vérifier** : Bascule automatique vers mode vidéo
+   - ✅ **Vérifier** : Alice voit sa vidéo locale (audio uniquement)
+
+3. **Bob active son micro**
+   - Cliquer sur bouton 🎤 Audio
+   - ✅ **Vérifier** : Permission demandée
+   - ✅ **Vérifier** : Toast "Micro activé"
+   - ✅ **Vérifier** : Offer WebRTC créée automatiquement (console)
+
+4. **Validation connexion**
+   - Console Alice: `"Creating WebRTC offer for bob"`
+   - Console Bob: `"Connection state: connected"`
+   - ✅ **Vérifier** : Alice voit Bob dans grille vidéo
+   - ✅ **Vérifier** : Bob voit Alice dans grille vidéo
+   - ✅ **Vérifier** : Indicateur connexion "Bonne" ou "Excellente"
+
+5. **Test audio**
+   - Alice parle dans son micro
+   - ✅ **Vérifier** : Bob entend Alice
+   - ✅ **Vérifier** : Icône 🎙️ apparaît quand Alice parle
+   - ✅ **Vérifier** : Bordure verte pulse autour de Alice
+
+6. **Toggle micro**
+   - Alice reclique sur 🎤
+   - ✅ **Vérifier** : Bouton passe au rouge
+   - ✅ **Vérifier** : Bob n'entend plus Alice
+   - ✅ **Vérifier** : Stream toujours visible
+
+7. **Cleanup**
+   - Alice clique "Quitter la room"
+   - ✅ **Vérifier** : Connexion WebRTC fermée
+   - ✅ **Vérifier** : Bob voit Alice disparaître
+
+---
+
+## Test 2: Appel Vidéo (2 utilisateurs)
+
+**Objectif** : Valider vidéo bidirectionnelle
+
+### Étapes
+
+1. **Setup** (même que Test 1)
+
+2. **Alice active caméra**
+   - Cliquer sur bouton 📹 Vidéo
+   - ✅ **Vérifier** : Permission caméra demandée
+   - ✅ **Vérifier** : Toast "Caméra et micro activés"
+   - ✅ **Vérifier** : Boutons 🎤 et 📹 verts
+   - ✅ **Vérifier** : Vidéo locale d'Alice visible
+
+3. **Bob active caméra**
+   - Cliquer sur bouton 📹 Vidéo
+   - ✅ **Vérifier** : Offer créée
+   - ✅ **Vérifier** : Connexion établie
+   - ✅ **Vérifier** : Alice voit vidéo de Bob
+   - ✅ **Vérifier** : Bob voit vidéo d'Alice
+
+4. **Toggle caméra**
+   - Bob reclique sur 📹
+   - ✅ **Vérifier** : Bouton passe au rouge
+   - ✅ **Vérifier** : Vidéo noire côté Alice
+   - ✅ **Vérifier** : Audio continue
+
+5. **Toggle mode chat/vidéo**
+   - Alice clique "💬 Chat"
+   - ✅ **Vérifier** : Grille vidéo cachée
+   - ✅ **Vérifier** : Messages de chat affichés
+   - ✅ **Vérifier** : Audio/vidéo continue en arrière-plan
+   - Alice clique "📹 Vidéo"
+   - ✅ **Vérifier** : Retour à la grille
+   - ✅ **Vérifier** : Streams toujours actifs
+
+---
+
+## Test 3: Partage d'Écran
+
+**Objectif** : Valider getDisplayMedia
+
+### Étapes
+
+1. **Setup** (Alice et Bob en appel vidéo)
+
+2. **Alice démarre partage**
+   - Cliquer sur bouton 🖥️
+   - ✅ **Vérifier** : Sélecteur écran/fenêtre OS
+   - Sélectionner un écran
+   - ✅ **Vérifier** : Toast "Partage d'écran démarré"
+   - ✅ **Vérifier** : Bouton 🖥️ passe au vert
+   - ✅ **Vérifier** : Deuxième stream dans grille
+   - ✅ **Vérifier** : Label "Alice - Partage d'écran"
+
+3. **Bob voit le partage**
+   - ✅ **Vérifier** : 2 streams pour Alice (caméra + partage)
+   - ✅ **Vérifier** : Contenu de l'écran visible
+
+4. **Arrêt du partage**
+   - Alice clique "Arrêter le partage" (bouton OS)
+   - ✅ **Vérifier** : Toast "Partage d'écran arrêté"
+   - ✅ **Vérifier** : Bouton 🖥️ redevient gris
+   - ✅ **Vérifier** : Stream de partage disparaît
+   - ✅ **Vérifier** : Caméra reste active
+
+---
+
+## Test 4: Multi-Peers (3 utilisateurs)
+
+**Objectif** : Valider mesh topology
+
+### Étapes
+
+1. **Setup**
+   - Navigateur A: Alice
+   - Navigateur B: Bob
+   - Navigateur C: Charlie
+   - Tous dans la même room
+
+2. **Activation séquentielle**
+   - Alice active caméra
+   - ✅ **Vérifier** : Alice voit sa vidéo
+
+   - Bob active caméra
+   - ✅ **Vérifier** : Alice ↔ Bob connectés
+   - ✅ **Vérifier** : Grille = 2 streams pour chacun
+
+   - Charlie active caméra
+   - ✅ **Vérifier** : Alice ↔ Charlie connectés
+   - ✅ **Vérifier** : Bob ↔ Charlie connectés
+   - ✅ **Vérifier** : Grille = 3 streams pour chacun
+
+3. **Validation mesh**
+   - Console Alice: 2 PeerConnections (Bob, Charlie)
+   - Console Bob: 2 PeerConnections (Alice, Charlie)
+   - Console Charlie: 2 PeerConnections (Alice, Bob)
+   - chrome://webrtc-internals : Vérifier 2 connexions actives
+
+4. **Test parole**
+   - Alice parle
+   - ✅ **Vérifier** : Bob et Charlie entendent
+   - ✅ **Vérifier** : Icône 🎙️ chez Bob et Charlie
+   - ✅ **Vérifier** : Bordure verte chez Bob et Charlie
+
+5. **Déconnexion**
+   - Bob quitte
+   - ✅ **Vérifier** : Bob disparaît chez Alice et Charlie
+   - ✅ **Vérifier** : Alice ↔ Charlie toujours connectés
+   - ✅ **Vérifier** : Audio/vidéo continue
+
+---
+
+## Test 5: Gestion des Erreurs
+
+**Objectif** : Valider toasts et messages d'erreur
+
+### Cas 1: Permission refusée
+
+**Étapes**:
+1. Cliquer sur 🎤 Audio
+2. **Refuser** la permission dans le navigateur
+3. ✅ **Vérifier** : Toast rouge "Permission refusée. Veuillez autoriser l'accès à votre caméra/micro."
+4. ✅ **Vérifier** : Boutons restent inactifs
+
+### Cas 2: Aucun périphérique
+
+**Étapes**:
+1. Désactiver caméra/micro dans paramètres OS
+2. Cliquer sur 📹 Vidéo
+3. ✅ **Vérifier** : Toast rouge "Aucune caméra ou micro détecté."
+
+### Cas 3: Périphérique occupé
+
+**Étapes**:
+1. Ouvrir OBS/Zoom et utiliser la caméra
+2. Dans Mesh, cliquer sur 📹 Vidéo
+3. ✅ **Vérifier** : Toast rouge "Impossible d'accéder à la caméra/micro (déjà utilisé...)"
+
+### Cas 4: Partage annulé
+
+**Étapes**:
+1. Cliquer sur 🖥️
+2. Annuler dans le sélecteur OS
+3. ✅ **Vérifier** : Toast jaune "Partage d'écran annulé"
+4. ✅ **Vérifier** : Pas de crash
+
+### Cas 5: Peer déconnecté
+
+**Étapes**:
+1. Alice et Bob en appel
+2. Bob ferme son onglet brutalement
+3. ✅ **Vérifier** : Alice: connectionState → 'closed'
+4. ✅ **Vérifier** : Stream de Bob disparaît de la grille
+5. ✅ **Vérifier** : Pas de crash
+
+---
+
+## Test 6: Indicateurs de Connexion
+
+**Objectif** : Valider ConnectionIndicator
+
+### Étapes
+
+1. **Setup** (Alice et Bob en appel)
+
+2. **Connexion excellente**
+   - Même réseau local / bande passante élevée
+   - ✅ **Vérifier** : Badge 📶 "Excellente"
+   - ✅ **Vérifier** : Bordure verte sur badge
+   - Hover sur badge
+   - ✅ **Vérifier** : Tooltip "RTT: <100ms"
+
+3. **Connexion bonne**
+   - Simuler latence (DevTools → Network → Throttling "Fast 3G")
+   - ✅ **Vérifier** : Badge 📡 "Bonne"
+   - ✅ **Vérifier** : Bordure cyan
+   - ✅ **Vérifier** : Tooltip "RTT: 100-200ms"
+
+4. **Connexion faible**
+   - Throttling "Slow 3G"
+   - ✅ **Vérifier** : Badge ⚠️ "Faible"
+   - ✅ **Vérifier** : Bordure jaune
+   - ✅ **Vérifier** : Tooltip "RTT: >200ms"
+
+5. **Stats détaillées**
+   - chrome://webrtc-internals
+   - ✅ **Vérifier** : currentRoundTripTime correspond au badge
+   - ✅ **Vérifier** : packetsLost affiché si >0
+
+---
+
+## Test 7: Indicateurs de Parole
+
+**Objectif** : Valider useAudioLevel
+
+### Étapes
+
+1. **Setup** (Alice et Bob en appel audio)
+
+2. **Détection parole**
+   - Alice parle dans son micro
+   - ✅ **Vérifier** : Icône 🎙️ apparaît instantanément
+   - ✅ **Vérifier** : Animation pulse sur l'icône
+   - ✅ **Vérifier** : Bordure verte autour du container
+   - ✅ **Vérifier** : Transform scale(1.02)
+
+3. **Silence**
+   - Alice arrête de parler
+   - ✅ **Vérifier** : Icône 🎙️ disparaît après ~0.3s
+   - ✅ **Vérifier** : Bordure normale
+   - ✅ **Vérifier** : Scale normal
+
+4. **Bruit de fond**
+   - Musique faible en arrière-plan
+   - ✅ **Vérifier** : Icône ne s'active PAS (seuil >0.02)
+
+5. **Multi-peers parlant**
+   - Alice, Bob, Charlie en appel
+   - Alice et Charlie parlent simultanément
+   - ✅ **Vérifier** : 🎙️ sur Alice ET Charlie
+   - ✅ **Vérifier** : Bob voit les deux indicateurs
+   - ✅ **Vérifier** : Pas de conflit visuel
+
+---
+
+## Test 8: Compatibilité Navigateurs
+
+**Objectif** : Cross-browser testing
+
+### Chrome ↔ Firefox
+
+1. Alice sur Chrome, Bob sur Firefox
+2. Appel vidéo bidirectionnel
+3. ✅ **Vérifier** : Connexion établie
+4. ✅ **Vérifier** : Audio/vidéo fonctionne
+5. ✅ **Vérifier** : Partage d'écran fonctionne
+
+### Chrome ↔ Edge
+
+1. Alice sur Chrome, Bob sur Edge
+2. Mêmes vérifications que Chrome ↔ Firefox
+
+### Safari (si disponible)
+
+1. Alice sur Safari macOS/iOS
+2. ✅ **Vérifier** : getUserMedia fonctionne
+3. ⚠️ **Note** : getDisplayMedia pas supporté sur iOS Safari
+4. ✅ **Vérifier** : Audio/vidéo fonctionne quand même
+
+---
+
+## Test 9: Performance et Stabilité
+
+**Objectif** : Valider sous charge
+
+### Test longue durée
+
+1. Appel Alice ↔ Bob
+2. Laisser tourner 30 minutes
+3. ✅ **Vérifier** : Pas de freeze
+4. ✅ **Vérifier** : Pas de memory leak (DevTools Memory)
+5. ✅ **Vérifier** : Qualité audio/vidéo stable
+
+### Test toggle rapide
+
+1. Alice toggle micro 20x rapidement
+2. ✅ **Vérifier** : Pas de crash
+3. ✅ **Vérifier** : État final cohérent
+4. ✅ **Vérifier** : Pas de tracks orphelins (check stream.getTracks())
+
+### Test reconnexion
+
+1. Alice en appel avec Bob
+2. Alice: DevTools → Network → Offline
+3. Attendre 5s
+4. DevTools → Online
+5. ✅ **Vérifier** : ICE reconnexion automatique
+6. ✅ **Vérifier** : Audio/vidéo reprend
+7. ✅ **Vérifier** : Indicateur passe "Déconnecté" → "Bonne"
+
+---
+
+## Test 10: Scénarios Réels
+
+**Objectif** : Use cases production
+
+### Scénario: Réunion d'équipe
+
+**Setup**: 4 personnes (Alice, Bob, Charlie, Diana)
+
+1. Tous rejoignent "Réunion Équipe"
+2. Alice partage son écran (présentation)
+3. Bob active seulement son micro (pas de caméra)
+4. Charlie et Diana en vidéo
+
+**Validations**:
+- ✅ Grille affiche: 5 streams (Alice cam + screen, Bob audio, Charlie cam, Diana cam)
+- ✅ Partage d'écran visible pour tous
+- ✅ Tous entendent tous
+- ✅ Indicateurs connexion à jour
+- ✅ Indicateurs parole fonctionnent
+- ✅ Charlie envoie message chat pendant appel
+- ✅ Messages visibles en mode 💬 Chat
+
+### Scénario: Appel rapide 1-1
+
+**Setup**: Alice appelle Bob
+
+1. Alice active micro uniquement (pas de vidéo)
+2. Bob répond avec micro uniquement
+3. Conversation 5 minutes
+4. Alice active sa caméra mid-call
+5. Bob active sa caméra aussi
+
+**Validations**:
+- ✅ Activation caméra mid-call fonctionne
+- ✅ Pas de re-négociation SDP visible
+- ✅ Streams ajoutés dynamiquement
+- ✅ Qualité reste stable
+
+---
+
+## Debugging
+
+### Outils
+
+1. **Browser DevTools**
+   - Console: Logs WebRTC
+   - Network: WebSocket events
+   - Application → Storage: Store state
+
+2. **chrome://webrtc-internals**
+   - État des PeerConnections
+   - Stats en temps réel (RTT, packets lost, bitrate)
+   - SDP offer/answer
+   - ICE candidates
+
+3. **Firefox about:webrtc**
+   - Équivalent de chrome://webrtc-internals
+
+### Commandes Console Utiles
+
+```javascript
+// Voir l'état du store WebRTC
+window.useWebRTCStore?.getState()
+
+// Voir les peers connectés
+window.useWebRTCStore?.getState().peers
+
+// Voir l'état des notifications
+window.useNotificationStore?.getState()
+
+// Forcer un toast
+window.notify?.success('Test message')
+```
+
+---
+
+## Checklist Rapide
+
+Avant de marquer WebRTC comme "Done":
+
+- [ ] Test 1: Appel audio ✅
+- [ ] Test 2: Appel vidéo ✅
+- [ ] Test 3: Partage d'écran ✅
+- [ ] Test 4: Multi-peers (3+) ✅
+- [ ] Test 5: Tous les cas d'erreur ✅
+- [ ] Test 6: Indicateurs connexion ✅
+- [ ] Test 7: Indicateurs parole ✅
+- [ ] Test 8: Chrome + Firefox + Edge ✅
+- [ ] Test 9: Stabilité 30min ✅
+- [ ] Test 10: Scénarios réels ✅
+
+---
+
+## Résultats Attendus
+
+### Performance
+- **Latence audio**: <100ms (P2P local)
+- **Latency signaling**: <200ms (via server)
+- **Connexion établie**: <3s après activation
+- **CPU usage**: <20% par peer (vidéo 720p)
+- **Memory**: Stable sur 1h d'appel
+
+### UX
+- **Feedback immédiat**: Toasts à chaque action
+- **Indicateurs clairs**: Connexion + parole visibles
+- **Pas de freeze**: UI responsive même sous charge
+- **Erreurs explicites**: Messages français compréhensibles
+
+### Fiabilité
+- **Reconnexion ICE**: Automatique après coupure réseau
+- **Cleanup**: Pas de tracks orphelins après déconnexion
+- **Multi-browser**: Chrome/Firefox/Edge compatibles
+- **Mesh scaling**: 4 peers simultanés sans lag
+
+---
+
+## Problèmes Connus
+
+### Limitations
+1. **iOS Safari**: Pas de getDisplayMedia (partage d'écran)
+2. **HTTPS requis**: Localhost OK, mais production = certificat SSL
+3. **Mesh topology**: 5+ peers = beaucoup de bande passante
+4. **NAT strict**: Peut nécessiter TURN (pas encore configuré)
+
+### Workarounds
+1. iOS: Désactiver bouton 🖥️ sur détection mobile
+2. HTTPS: Utiliser Caddy reverse proxy (voir docs/deployment.md)
+3. 5+ peers: TODO - implémenter SFU
+4. NAT: TODO - activer coturn dans docker-compose
+
+---
+
+## Rapport de Bug Template
+
+Si vous trouvez un bug, documenter:
+
+```markdown
+## Bug: [Titre court]
+
+**Navigateur**: Chrome 120 / Firefox 122 / etc.
+**OS**: Windows 11 / macOS 14 / etc.
+
+**Steps to reproduce**:
+1. ...
+2. ...
+3. ...
+
+**Expected**: ...
+**Actual**: ...
+
+**Console logs**:
+```
+[Coller les logs pertinents]
+```
+
+**Screenshots**: [Si applicable]
+
+**WebRTC internals**: [État de la PeerConnection]
+```
+
+---
+
+Bon test! 🎉