gilles/mesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
mesh/TESTING_WEBRTC.md
Gilles Soulier 1d177e96a6 first
2026-01-05 13:20:54 +01:00

14 KiB
Raw Permalink Blame History

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

# 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

// 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:

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

Reference in New Issue View Git Blame Copy Permalink