Chroma Go

Accéder à l’application https://chromago.forge.apps.education.fr/

ChromaGo

ChromaGo transforme un téléphone en caméra et micro sans fil pour une régie PC. La régie reçoit la vidéo et le son avec PeerJS, peut retirer un fond vert ou une couleur choisie, ajouter une image ou une vidéo de fond, et proposer un mode IA intégré pour isoler une personne sans fond vert.

Démarrage

1. Ouvrir https://chromago.forge.apps.education.fr/ (ou lancer un petit serveur local).
2. Sur le PC, ouvrir Régie PC.
3. Sur le téléphone, ouvrir Téléphone.
4. Autoriser la caméra et le micro sur le téléphone.
5. Le plus simple est de scanner le QR code affiché sur la régie.
6. Le téléphone remplit alors automatiquement l’ID de la régie et lance l’appel.

Important : le PC et le téléphone doivent pouvoir accéder à la même adresse. Si vous ouvrez la régie avec localhost, le téléphone ne pourra pas toujours la joindre. Il faut souvent utiliser l’adresse IP du PC sur le réseau local.

Diffusion à quelques spectateurs

Une fois le téléphone connecté, la zone Diffusion spectateurs de la régie permet de partager directement l’image finale composée et le son du téléphone :

1. Cliquer sur Démarrer la diffusion.
2. Copier le lien sécurisé affiché par la régie et l’envoyer aux spectateurs.
3. Chaque spectateur ouvre ce lien dans un navigateur. Si la lecture automatique du son est bloquée, il clique sur Activer le son.
4. La régie indique le nombre de spectateurs connectés. Cliquer sur Arrêter la diffusion pour fermer leurs flux et invalider le lien.

Le lien contient l’ID PeerJS de la régie et un jeton aléatoire généré à chaque diffusion. Un ancien lien cesse donc de fonctionner après l’arrêt. Cette diffusion directe convient surtout à environ deux ou trois spectateurs : le PC envoie une copie du flux à chacun et sa bande passante montante augmente en conséquence.

Le menu Qualité de diffusion agit uniquement sur la copie envoyée aux spectateurs. Il ne réduit ni la qualité de la régie ni celle de l’enregistrement :

• 720p - qualité normale : 30 images/s et environ 2,5 Mbit/s par spectateur ;
• 480p - équilibrée : 20 images/s et environ 1,1 Mbit/s par spectateur ;
• 360p - nombreux spectateurs : 15 images/s et environ 0,55 Mbit/s par spectateur.

Le débit réel reste ajusté par le navigateur et varie selon le contenu, le réseau et le codec disponible. La qualité doit être choisie avant de démarrer la diffusion.

Sur le réseau local, ouvrir la régie avec l’adresse IP du PC avant de créer le lien, et non avec localhost. Pour des spectateurs à distance, la page ChromaGo doit être servie depuis une adresse HTTPS publique. Selon les pare-feu et les types de connexion, un relais TURN configuré dans app-config.js peut être nécessaire.

Rôle des identifiants

La régie affiche un ID court du type :

chromago-a1b2c3

Cet ID sert au téléphone pour appeler la bonne régie. C’est le seul identifiant utile pour l’utilisateur.

Le téléphone possède aussi un identifiant PeerJS interne, mais il n’est pas affiché car il ne sert pas dans le fonctionnement normal.

Confidentialité et fonctionnement local

Le fonctionnement de ChromaGo reste centré sur le téléphone et le PC : la vidéo et le son du téléphone sont reçus par la régie, puis la découpe, le miroir, le fond et le rendu final sont calculés dans le navigateur de la régie.

Aucune image, piste audio, vidéo de fond, caméra ou sortie composée n’est envoyée volontairement vers un service externe par l’application. La seule exception fonctionnelle est la diffusion que l’utilisateur démarre explicitement : la sortie composée et le son sont alors envoyés aux spectateurs possédant le lien sécurisé, directement par WebRTC ou via le relais TURN configuré si le réseau l’impose.

Point important : PeerJS utilise un serveur de signalisation Éducation nationale pour permettre au téléphone et au PC de se trouver au début de la connexion. Ce serveur sert à établir l’appel ; il ne fait pas de traitement IA et ne compose pas l’image.

La configuration WebRTC se trouve dans app-config.js. Elle contient le serveur PeerJS, le STUN et le TURN éventuel. Dans la plupart des cas, la vidéo passe directement entre le téléphone et le PC. Si le réseau bloque la connexion directe, un serveur TURN peut relayer le flux pour que l’appel fonctionne quand même.

Le mode IA de ChromaGo n’utilise pas de webhook externe : le modèle est chargé localement et le calcul se fait dans le navigateur de la régie.

QR code

Le QR code contient le lien vers telephone.html avec l’ID de la régie déjà ajouté. Il évite de recopier le code à la main.

• Afficher QR : rouvre le QR code.
• Masquer QR : le replie pour gagner de la place.

Quand le téléphone est connecté, le QR code se masque automatiquement.

Organisation des outils

Les panneaux Présentation, Fond, Enregistrement, Diffusion spectateurs et Découpe possèdent un bouton Replier. Une fois repliés, ils n’affichent plus que leur titre et le bouton Déplier, ce qui libère de la place dans la régie.

L’organisation est mémorisée dans le navigateur : les panneaux repliés restent repliés lors de la prochaine ouverture. Le panneau Connexion conserve ses commandes Afficher QR et Masquer QR indépendantes.

Son

Le micro du téléphone est envoyé avec la vidéo. La régie essaie de lire le son dès la connexion. Si le navigateur bloque cette lecture automatique, cliquer sur Activer le son. Le bouton permet ensuite de couper ou de réactiver le son.

La prévisualisation sur le téléphone reste muette afin d’éviter un écho local.

Les autorisations caméra et micro sont demandées séparément. Si le micro est refusé ou indisponible, la connexion continue en vidéo seule et le téléphone l’indique dans son statut.

Enregistrement

La régie peut enregistrer localement la sortie finale avec le bouton Démarrer l'enregistrement. Le fichier contient le rendu du canvas (découpe, fond et présentation) ainsi que le son du téléphone.

Le bouton Arrêter et télécharger finalise le fichier et lance son téléchargement. Le format est choisi automatiquement selon le navigateur, généralement WebM ou MP4. L’enregistrement reste local et n’est envoyé vers aucun service externe.

Fond

La zone Fond permet d’ajouter ce qui apparaît derrière le présentateur.

• Image : choisit une image de fond.
• Vidéo : choisit une vidéo de fond, jouée en boucle.
• Fond test : affiche un fond de test coloré pour vérifier rapidement la transparence.
• Retirer le fond : supprime le fond choisi et revient à une image sans décor.

Le fond ne se superpose pas à la vidéo brute. Il devient visible uniquement lorsque la découpe retire une partie de l’image du téléphone.

Découpe couleur

La découpe couleur retire une couleur précise de la vidéo, par défaut le vert.

• Couleur cible : couleur à retirer.
• Pipette : permet de cliquer directement dans la vidéo pour choisir la couleur à retirer.
• Tolérance : agrandit ou réduit la plage de couleurs supprimées.
• Douceur : adoucit les bords de la découpe pour éviter un contour trop dur.
• Activer la suppression de couleur : active ou désactive la découpe.

Conseils :

• Si rien ne disparaît, vérifier que la couleur cible correspond bien au fond.
• Si le présentateur devient transparent, réduire la tolérance.
• Si les bords sont trop nets ou tremblants, augmenter la douceur.

Mode IA bêta

Le bouton Mode IA (bêta) active MediaPipe Image Segmenter. Ce mode essaie de reconnaître la personne et de retirer le reste, même sans fond vert.

Le calcul peut être plus long selon le PC. Pendant le traitement, l’avertissement Calcul IA en cours apparaît.

Curseurs IA :

• Stabilité IA : lisse le masque dans le temps. Plus la valeur est haute, plus l’image est stable, mais les mouvements rapides peuvent réagir un peu moins vite.
• Seuil IA : règle la force de détection. Plus la valeur est haute, plus la découpe est stricte. Plus elle est basse, plus elle garde de zones autour du présentateur.

Conseils :

• Pour une personne qui bouge peu, augmenter Stabilité IA.
• Pour une présentation type météo avec mouvements de bras, garder une stabilité moyenne.
• Si des morceaux du corps disparaissent, baisser le Seuil IA.
• Si trop de fond reste visible, monter le Seuil IA.

Miroir horizontal

Miroir horizontal inverse la vidéo gauche/droite, comme un miroir.

C’est utile si le présentateur veut se voir naturellement ou si la scène doit être orientée dans l’autre sens. En mode IA, le masque est recalculé après le changement de miroir pour que la transparence reste alignée.

Présentation

Par défaut, la vidéo reçue reste inchangée : même taille et même position que le flux envoyé par le téléphone.

Les options de présentation ne s’activent que si vous les utilisez.

• Gauche / Droite : place le présentateur sur un côté.
• Zoom : agrandit ou réduit le présentateur.
• Décalage X : déplace le présentateur horizontalement.
• Décalage Y : déplace le présentateur verticalement.
• Présentation initiale : revient à la vidéo plein cadre d’origine.

Pour une présentation météo, on peut par exemple choisir une image météo comme fond, activer le mode IA, placer le présentateur à gauche ou à droite, puis ajuster le zoom et les décalages.

Plein écran

Le bouton plein écran de la régie agrandit la zone de travail. Il est utile pour projeter ou capturer la sortie dans un autre logiciel.

Indicateur FPS

Rendu affiche la vitesse de rendu du canvas. L’objectif est autour de 30 fps.

Si le rendu baisse fortement :

• fermer les onglets inutiles ;
• réduire la résolution caméra si besoin ;
• utiliser la découpe couleur quand un fond vert est disponible ;
• baisser la stabilité IA si le PC peine.

Dépannage rapide

La vidéo du téléphone n’apparaît pas

• Vérifier que la caméra est autorisée sur le téléphone.
• Vérifier que le téléphone a bien scanné le QR code ou saisi l’ID régie.
• Recharger la régie puis rescanner le QR code.
• Vérifier que les deux appareils sont connectés au réseau.

Le fond choisi ne se voit pas

Le fond apparaît seulement là où la vidéo devient transparente. Il faut donc activer la découpe couleur ou le mode IA.

La découpe couleur ne retire rien

Il faut choisir la bonne couleur cible. Avec un fond vert, garder le vert par défaut ou utiliser la pipette sur le fond.

Le mode IA indique actif mais semble lent

Le modèle IA calcule un masque de personne. Sur certains PC, les premières secondes peuvent être lentes. L’avertissement de calcul indique que le traitement est en cours.

D’accord. Je reprends **exactement le texte d’origine**, je corrige **uniquement l’orthographe, les accents et les fautes typographiques**, sans modifier les mots, les formulations, les titres, les ##, les {{ }}, les balises `

`, les backticks ni la structure.

{{Accéder à l’application}} <a href="https://chromago.forge.apps.education.fr/" class="spip_out" rel="external">https://chromago.forge.apps.education.fr/</a>
<md>

## ChromaGo

ChromaGo transforme un téléphone en caméra et micro sans fil pour une régie PC. La régie reçoit la vidéo et le son avec PeerJS, peut retirer un fond vert ou une couleur choisie, ajouter une image ou une vidéo de fond, et proposer un mode IA intégré pour isoler une personne sans fond vert.

## Démarrage

1. Ouvrir https://chromago.forge.apps.education.fr/ (ou lancer un petit serveur local).
2. Sur le PC, ouvrir Régie PC.
3. Sur le téléphone, ouvrir `Téléphone`.
4. Autoriser la caméra et le micro sur le téléphone.
5. Le plus simple est de scanner le QR code affiché sur la régie.
6. Le téléphone remplit alors automatiquement l'ID de la régie et lance l'appel.

Important : le PC et le téléphone doivent pouvoir accéder à la même adresse. Si vous ouvrez la régie avec `localhost`, le téléphone ne pourra pas toujours la joindre. Il faut souvent utiliser l'adresse IP du PC sur le réseau local.

## Diffusion à quelques spectateurs

Une fois le téléphone connecté, la zone `Diffusion spectateurs` de la régie permet de partager directement l'image finale composée et le son du téléphone :

1. Cliquer sur `Démarrer la diffusion`.
2. Copier le lien sécurisé affiché par la régie et l'envoyer aux spectateurs.
3. Chaque spectateur ouvre ce lien dans un navigateur. Si la lecture automatique du son est bloquée, il clique sur `Activer le son`.
4. La régie indique le nombre de spectateurs connectés. Cliquer sur `Arrêter la diffusion` pour fermer leurs flux et invalider le lien.

Le lien contient l'ID PeerJS de la régie et un jeton aléatoire généré à chaque diffusion. Un ancien lien cesse donc de fonctionner après l'arrêt. Cette diffusion directe convient surtout à environ deux ou trois spectateurs : le PC envoie une copie du flux à chacun et sa bande passante montante augmente en conséquence.

Le menu `Qualité de diffusion` agit uniquement sur la copie envoyée aux spectateurs. Il ne réduit ni la qualité de la régie ni celle de l'enregistrement :

- `720p - qualité normale` : 30 images/s et environ 2,5 Mbit/s par spectateur ;
- `480p - équilibrée` : 20 images/s et environ 1,1 Mbit/s par spectateur ;
- `360p - nombreux spectateurs` : 15 images/s et environ 0,55 Mbit/s par spectateur.

Le débit réel reste ajusté par le navigateur et varie selon le contenu, le réseau et le codec disponible. La qualité doit être choisie avant de démarrer la diffusion.

Sur le réseau local, ouvrir la régie avec l'adresse IP du PC avant de créer le lien, et non avec `localhost`. Pour des spectateurs à distance, la page ChromaGo doit être servie depuis une adresse HTTPS publique. Selon les pare-feu et les types de connexion, un relais TURN configuré dans `app-config.js` peut être nécessaire.

## Rôle des identifiants

La régie affiche un ID court du type :

```text
chromago-a1b2c3
```

Cet ID sert au téléphone pour appeler la bonne régie. C'est le seul identifiant utile pour l'utilisateur.

Le téléphone possède aussi un identifiant PeerJS interne, mais il n'est pas affiché car il ne sert pas dans le fonctionnement normal.

## Confidentialité et fonctionnement local

Le fonctionnement de ChromaGo reste centré sur le téléphone et le PC : la vidéo et le son du téléphone sont reçus par la régie, puis la découpe, le miroir, le fond et le rendu final sont calculés dans le navigateur de la régie.

Aucune image, piste audio, vidéo de fond, caméra ou sortie composée n'est envoyée volontairement vers un service externe par l'application. La seule exception fonctionnelle est la diffusion que l'utilisateur démarre explicitement : la sortie composée et le son sont alors envoyés aux spectateurs possédant le lien sécurisé, directement par WebRTC ou via le relais TURN configuré si le réseau l'impose.

Point important : PeerJS utilise un serveur de signalisation Éducation nationale pour permettre au téléphone et au PC de se trouver au début de la connexion. Ce serveur sert à établir l'appel ; il ne fait pas de traitement IA et ne compose pas l'image.

La configuration WebRTC se trouve dans `app-config.js`. Elle contient le serveur PeerJS, le STUN et le TURN éventuel. Dans la plupart des cas, la vidéo passe directement entre le téléphone et le PC. Si le réseau bloque la connexion directe, un serveur TURN peut relayer le flux pour que l'appel fonctionne quand même.

Le mode IA de ChromaGo n'utilise pas de webhook externe : le modèle est chargé localement et le calcul se fait dans le navigateur de la régie.

## QR code

Le QR code contient le lien vers `telephone.html` avec l'ID de la régie déjà ajouté. Il évite de recopier le code à la main.

- `Afficher QR` : rouvre le QR code.
- `Masquer QR` : le replie pour gagner de la place.

Quand le téléphone est connecté, le QR code se masque automatiquement.

## Organisation des outils

Les panneaux `Présentation`, `Fond`, `Enregistrement`, `Diffusion spectateurs` et `Découpe` possèdent un bouton `Replier`. Une fois repliés, ils n'affichent plus que leur titre et le bouton `Déplier`, ce qui libère de la place dans la régie.

L'organisation est mémorisée dans le navigateur : les panneaux repliés restent repliés lors de la prochaine ouverture. Le panneau `Connexion` conserve ses commandes `Afficher QR` et `Masquer QR` indépendantes.

## Son

Le micro du téléphone est envoyé avec la vidéo. La régie essaie de lire le son dès la connexion. Si le navigateur bloque cette lecture automatique, cliquer sur `Activer le son`. Le bouton permet ensuite de couper ou de réactiver le son.

La prévisualisation sur le téléphone reste muette afin d'éviter un écho local.

Les autorisations caméra et micro sont demandées séparément. Si le micro est refusé ou indisponible, la connexion continue en vidéo seule et le téléphone l'indique dans son statut.

## Enregistrement

La régie peut enregistrer localement la sortie finale avec le bouton `Démarrer l'enregistrement`. Le fichier contient le rendu du canvas (découpe, fond et présentation) ainsi que le son du téléphone.

Le bouton `Arrêter et télécharger` finalise le fichier et lance son téléchargement. Le format est choisi automatiquement selon le navigateur, généralement WebM ou MP4. L'enregistrement reste local et n'est envoyé vers aucun service externe.

## Fond

La zone `Fond` permet d'ajouter ce qui apparaît derrière le présentateur.

- `Image` : choisit une image de fond.
- `Vidéo` : choisit une vidéo de fond, jouée en boucle.
- `Fond test` : affiche un fond de test coloré pour vérifier rapidement la transparence.
- `Retirer le fond` : supprime le fond choisi et revient à une image sans décor.

Le fond ne se superpose pas à la vidéo brute. Il devient visible uniquement lorsque la découpe retire une partie de l'image du téléphone.

## Découpe couleur

La découpe couleur retire une couleur précise de la vidéo, par défaut le vert.

- `Couleur cible` : couleur à retirer.
- `Pipette` : permet de cliquer directement dans la vidéo pour choisir la couleur à retirer.
- `Tolérance` : agrandit ou réduit la plage de couleurs supprimées.
- `Douceur` : adoucit les bords de la découpe pour éviter un contour trop dur.
- `Activer la suppression de couleur` : active ou désactive la découpe.

Conseils :

- Si rien ne disparaît, vérifier que la couleur cible correspond bien au fond.
- Si le présentateur devient transparent, réduire la tolérance.
- Si les bords sont trop nets ou tremblants, augmenter la douceur.

## Mode IA bêta

Le bouton `Mode IA (bêta)` active MediaPipe Image Segmenter. Ce mode essaie de reconnaître la personne et de retirer le reste, même sans fond vert.

Le calcul peut être plus long selon le PC. Pendant le traitement, l'avertissement `Calcul IA en cours` apparaît.

Curseurs IA :

- `Stabilité IA` : lisse le masque dans le temps. Plus la valeur est haute, plus l'image est stable, mais les mouvements rapides peuvent réagir un peu moins vite.
- `Seuil IA` : règle la force de détection. Plus la valeur est haute, plus la découpe est stricte. Plus elle est basse, plus elle garde de zones autour du présentateur.

Conseils :

- Pour une personne qui bouge peu, augmenter `Stabilité IA`.
- Pour une présentation type météo avec mouvements de bras, garder une stabilité moyenne.
- Si des morceaux du corps disparaissent, baisser le `Seuil IA`.
- Si trop de fond reste visible, monter le `Seuil IA`.

## Miroir horizontal

`Miroir horizontal` inverse la vidéo gauche/droite, comme un miroir.

C'est utile si le présentateur veut se voir naturellement ou si la scène doit être orientée dans l'autre sens. En mode IA, le masque est recalculé après le changement de miroir pour que la transparence reste alignée.

## Présentation

Par défaut, la vidéo reçue reste inchangée : même taille et même position que le flux envoyé par le téléphone.

Les options de présentation ne s'activent que si vous les utilisez.

- `Gauche` / `Droite` : place le présentateur sur un côté.
- `Zoom` : agrandit ou réduit le présentateur.
- `Décalage X` : déplace le présentateur horizontalement.
- `Décalage Y` : déplace le présentateur verticalement.
- `Présentation initiale` : revient à la vidéo plein cadre d'origine.

Pour une présentation météo, on peut par exemple choisir une image météo comme fond, activer le mode IA, placer le présentateur à gauche ou à droite, puis ajuster le zoom et les décalages.

## Plein écran

Le bouton plein écran de la régie agrandit la zone de travail. Il est utile pour projeter ou capturer la sortie dans un autre logiciel.

## Indicateur FPS

`Rendu` affiche la vitesse de rendu du canvas. L'objectif est autour de 30 fps.

Si le rendu baisse fortement :

- fermer les onglets inutiles ;
- réduire la résolution caméra si besoin ;
- utiliser la découpe couleur quand un fond vert est disponible ;
- baisser la stabilité IA si le PC peine.

## Dépannage rapide

### La vidéo du téléphone n'apparaît pas

- Vérifier que la caméra est autorisée sur le téléphone.
- Vérifier que le téléphone a bien scanné le QR code ou saisi l'ID régie.
- Recharger la régie puis rescanner le QR code.
- Vérifier que les deux appareils sont connectés au réseau.

### Le fond choisi ne se voit pas

Le fond apparaît seulement là où la vidéo devient transparente. Il faut donc activer la découpe couleur ou le mode IA.

### La découpe couleur ne retire rien

Il faut choisir la bonne couleur cible. Avec un fond vert, garder le vert par défaut ou utiliser la pipette sur le fond.

### Le mode IA indique actif mais semble lent

Le modèle IA calcule un masque de personne. Sur certains PC, les premières secondes peuvent être lentes. L'avertissement de calcul indique que le traitement est en cours.