mesh/TESTING_WEBRTC.md

<!--
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! 🎉