SimCam — Caméra smartphone

SimCam est une PWA (Progressive Web App) légère qui transforme n’importe quel smartphone ou tablette en caméra de simulation, offrant à SimServer un flux vidéo et audio en temps réel via WebRTC.

C’est une alternative intéressante en l’absence ou en complément de caméras IP. Plusieurs smartphones ou tablettes peuvent être utilisés simultanément pour offrir des angles de vue différents.

Fonctionnalités

Capture vidéo

Résolution au choix (1080p, 720p, 480p), switch front/back, torche, zoom par slider ou pincement deux doigts.

Diffusion WebRTC

Publication vers go2rtc via le protocole WHIP. Le flux apparaît instantanément dans la régie SimStudio.

Contrôle à distance

SimServer peut piloter le zoom, couper le micro et mettre à jour les métadonnées de la caméra à distance.

Télémétrie temps réel

Heartbeat WebSocket toutes les 5 secondes : batterie, type réseau, débit, état du zoom, statut du flux.

Interface fullscreen

Prévisualisation plein écran, contrôles auto-masqués après 5 secondes, indicateur LIVE, VU-mètre audio 7 barres, timer de diffusion.

PWA installable

Fonctionne hors ligne, installable sur l’écran d’accueil, mises à jour automatiques, verrouillage écran actif pendant la captation.

Démarrage rapide

1. Ouvrir SimCam sur le smartphone ou la tablette depuis un navigateur web (Chrome, Safari, Samsung Internet).
2. Installer l’application en suivant les instructions d’installation PWA, puis ouvrir l’application SimCam.
3. Autoriser la caméra et le microphone quand le navigateur le demande.
4. Se connecter au SimServer : entrez l’URL du SimServer ou scannez le QR code affiché sur le dashboard SimStudio.
5. Appuyer sur Connecter pour lancer la diffusion — le flux apparaît automatiquement dans la régie SimStudio.

Astuce

Ajoutez SimCam à l’écran d’accueil du smartphone pour une expérience native : SimCam se lance alors comme une application classique, en plein écran, sans barre d’adresse.

Interface

Barre de statut

La barre de statut en haut de l’écran affiche en temps réel :

Indicateur	Description
LIVE	Badge rouge animé visible pendant la diffusion
Timer	Durée de diffusion au format MM:SS
VU-mètre	7 barres colorées (vert → jaune → rouge) reflétant le niveau audio du micro
Micro coupé	Icône micro barré quand le son est désactivé
Résolution	Résolution active (1080p, 720p, 480p)
Réseau	Type de connexion (WiFi, 4G, 3G) si supporté par l’appareil
Batterie	Niveau en pourcentage et indicateur de charge si supporté par l’appareil
État WebSocket	Indicateur de reconnexion ou de perte de connexion avec SimServer

Contrôles caméra

Les contrôles apparaissent en bas de l’écran. Ils se masquent automatiquement après 5 secondes d’inactivité quand la caméra est active. Touchez l’écran pour les faire réapparaître.

Bouton	Action
Changer de caméra	Bascule entre caméra avant et arrière (si disponible)
Torche	Active/désactive le flash LED (si disponible)
Micro	Coupe/rétablit le son du microphone
Connecter / Déconnecter	Lance ou arrête la diffusion vers SimServer
Paramètres	Ouvre la page de réglages

Zoom

Le zoom est disponible de deux manières :

• Slider : barre de zoom avec graduations (1x, 2x, 5x, 10x selon les capacités de l’appareil)
• Pincement : geste deux doigts directement sur la prévisualisation vidéo

SimServer peut également piloter le zoom à distance.

Note

Le zoom et la torche ne sont disponibles que si le matériel de l’appareil les supporte. Les boutons correspondants sont masqués automatiquement dans le cas contraire.

Connexion au SimServer

Méthodes de connexion

SimCam propose plusieurs façons de se connecter au SimServer :

• QR Code : scannez le QR code affiché sur le dashboard SimStudio ou sur le réseau WiFi KerSim
• Saisie manuelle : entrez directement l’URL du SimServer (ex. https://192.168.4.1)
• URL automatique : ajoutez ?studio=https://... à l’URL de SimCam pour une connexion automatique

Test de connexion

Avant de lancer la diffusion, SimCam vérifie la connectivité avec SimServer via un test de sonde (/api/system/health). Un indicateur visuel confirme que SimServer est joignable.

Contrôle à distance

Une fois connectée, la caméra échange des données avec SimServer via une connexion WebSocket permanente :

Télémétrie (SimCam → SimServer)

Un heartbeat est envoyé toutes les 5 secondes avec :

• Niveau de batterie et état de charge
• Type de réseau et débit estimé
• Niveau de zoom actuel
• État de la connexion réseau

Commandes (SimServer → SimCam)

SimServer peut envoyer des commandes en temps réel :

Commande	Effet
Zoom	Ajuste le niveau de zoom de la caméra
Mute / Unmute	Coupe ou rétablit le microphone
Métadonnées	Met à jour le nom, la position et la description de la caméra

Paramètres

La page de paramètres permet de configurer :

Identité de la caméra

• Nom : libellé affiché dans la régie (ex. « Caméra salle 1 »)
• Position : emplacement de la caméra (ex. « Angle supérieur gauche »)
• Description : texte libre (ex. « Vue d’ensemble de la salle »)

Ces informations sont transmises à SimServer à la connexion et peuvent être modifiées à distance.

Résolution

Choix entre trois résolutions :

• 1080p (1920×1080) — qualité maximale
• 720p (1280×720) — compromis qualité/bande passante
• 480p (640×480) — bande passante réduite

Langue

Français ou anglais. L’interface se met à jour instantanément.

Informations de l’appareil

• Identifiant unique de l’appareil
• Modèle de l’appareil
• État des permissions (caméra, microphone, batterie)

Actions

• Forcer la mise à jour : recharge l’application pour appliquer une nouvelle version
• Relancer le tutoriel : réinitialise le parcours de premier lancement

Tutoriel de premier lancement

Au premier démarrage, un tutoriel en 4 étapes guide l’utilisateur :

1. Bienvenue — Présentation de SimCam et de son rôle dans l’écosystème KerSim
2. Connexion — Comment se connecter au SimServer (URL ou QR code)
3. Permissions — Autoriser l’accès à la caméra et au microphone
4. Diffusion — Lancer le flux en appuyant sur Connecter

Le tutoriel peut être relancé à tout moment depuis les paramètres.

Mise à jour automatique

SimCam détecte automatiquement les nouvelles versions déployées sur SimServer :

1. Après un déploiement, le backend redémarre avec un nouveau build_id (hash git)
2. À la reconnexion WebSocket, SimCam compare son build_id compilé avec celui du backend
3. Si les versions diffèrent, une bannière propose de recharger l’application
4. Après rechargement, une notification toast confirme la mise à jour

Astuce

Si SimCam était hors réseau (veille, perte WiFi), la mise à jour est détectée dès la reconnexion au SimServer.

Vous pouvez aussi forcer la mise à jour depuis Paramètres > À propos > Forcer la mise à jour.

Architecture technique

SimCam est une application Vue.js 3 avec TypeScript dans le dossier apps/cam/ du monorepo KerSim :

Technologie	Usage
Vue 3 + Composition API	Framework UI (<script setup lang="ts">)
TypeScript	Typage strict
Tailwind CSS 4	Styles avec design tokens partagés
Pinia	State management persistant
vue-i18n v10	Internationalisation (français/anglais)
VitePWA	Service Worker, manifest, cache offline
WebSocket natif	Communication temps réel avec SimServer
WebRTC (WHIP)	Publication du flux vidéo/audio vers go2rtc

Composables

Composable	Rôle	Package
useCameraCapture	getUserMedia, switch caméra, résolution, torche, zoom	apps/cam
useCameraPublish	Publication WebRTC vers go2rtc (protocole WHIP)	apps/cam
useSimCamSocket	WebSocket natif (register, heartbeat, commandes distantes)	apps/cam
useOnboarding	Tour guidé au premier lancement	apps/cam
useAudioLevel	Niveau audio micro en temps réel (VU-mètre)	shared
useBatteryStatus	Battery API (niveau, charge, support)	shared
useNetworkStatus	NetworkInformation API (type réseau, débit, support)	shared
useOrientationLock	Verrouillage orientation paysage	shared
useWakeLock	Empêche la mise en veille de l’écran	shared

Flux WebRTC

Smartphone (SimCam)
  │
  ├─ getUserMedia() → MediaStream local (vidéo + audio)
  │
  ├─ RTCPeerConnection → SDP offer
  │
  ├─ POST /api/go2rtc/webrtc?dst=simcam-xxx → SDP answer
  │
  └─ Flux WebRTC → go2rtc → SimServer → Régie SimStudio

Vues

Vue	Route	Description
CameraView	/	Interface principale fullscreen (capture + diffusion)
ConnectView	/connect	Connexion au SimServer (URL, QR code, test)
SettingsView	/settings	Résolution, langue, identité, permissions, mise à jour

APIs Web utilisées

API	Usage
getUserMedia	Capture vidéo et audio
Permissions API	État des autorisations (caméra, micro)
Battery Status API	Niveau de batterie et état de charge
Network Information API	Type de réseau et bande passante
Screen Orientation API	Verrouillage en mode paysage
Screen Wake Lock API	Empêche la mise en veille pendant la captation
Visual Viewport API	Calcul précis de la hauteur visible (compatibilité Samsung)

Commandes de développement

cd apps/cam && npm install           # Installer les dépendances
cd apps/cam && npm run dev           # Serveur dev (localhost:5174)
cd apps/cam && npm run build         # Build production (dist/)
cd apps/cam && npm test              # Tests unitaires (Vitest)
cd apps/cam && npm run test:coverage # Couverture de code (seuil 80%)