Annoter un écran en temps réel : outils open source pour guider vos équipes visuellement

1. Screenity : l’outil clé en main pour annoter sans coder

Screenity est une extension Chrome open source et gratuite qui répond directement au besoin d’annotation en temps réel. Elle permet de :

• Capturer un écran (onglet, fenêtre, ou caméra) sans limite de durée (F1).
• Dessiner des flèches, boîtes, texte, ou surligner des zones pendant l’enregistrement, avec une palette d’outils intégrée (F1).
• Exporter la vidéo annotée en MP4, GIF, ou WEBM, ou la sauvegarder directement sur Google Drive pour un partage immédiat (F2).

Cas d’usage concrets

• Formation à distance : Annoter un tableau de bord logiciel (ex: ERP, CRM) pour guider une nouvelle recrue sur les étapes clés, avec export de la vidéo pour référence future.
• Retour visuel : Enregistrer une revue d’interface utilisateur (UI) avec des flèches pour pointer les éléments à corriger, puis partager le fichier via Google Drive.
• Collaboration asynchrone : Ajouter des commentaires visuels sur un schéma ou un wireframe pendant une réunion Zoom, puis envoyer le lien de la vidéo aux participants.

Limites à connaître

• Dépendance à Chrome : Screenity ne fonctionne que sur ce navigateur. Impossible d’annoter des applications desktop (ex: Excel, Photoshop) ou des flux vidéo externes (ex: RTSP).
• Pas de détection IA : Les annotations sont manuelles. Pour automatiser des flèches sur des objets spécifiques (ex: « pointer tous les boutons rouges »), il faudrait intégrer un modèle comme YOLO26 (voir section 3).
• Confidentialité : Screenity ne collecte pas de données, mais son usage en entreprise doit être validé par les équipes sécurité (ex: RGPD, politique interne).

Comment l’installer et l’utiliser ?

1. Installer l’extension depuis le Chrome Web Store (lien officiel).
2. Cliquer sur l’icône Screenity dans la barre d’outils Chrome et sélectionner « Enregistrer ».
3. Choisir la source (onglet, fenêtre, ou caméra) et activer les outils d’annotation (flèches, texte, etc.) depuis la barre latérale.
4. Démarrer l’enregistrement, annoter en temps réel, puis arrêter la capture.
5. Exporter la vidéo ou la sauvegarder sur Google Drive via l’interface de Screenity.

2. API navigateur : dessiner sur un flux vidéo avec JavaScript

Pour les ops qui maîtrisent le développement web, les API Screen Capture et Canvas du navigateur offrent une alternative flexible à Screenity. Voici comment elles fonctionnent :

Fonctionnement technique

1. Capturer l’écran : L’API navigator.mediaDevices.getDisplayMedia() (F3) permet de sélectionner une fenêtre ou un onglet à partager sous forme de flux MediaStream.
2. Dessiner des annotations : Le flux vidéo est affiché dans un élément <canvas>, sur lequel on peut dessiner des formes (flèches, rectangles) ou du texte via JavaScript (F4).
3. Partager le résultat : Le canvas peut être enregistré en image ou intégré à un flux vidéo pour un partage en temps réel (ex: via WebRTC).

Exemple de code minimal

// 1. Capturer l'écran
const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: false
});

// 2. Afficher le flux dans une vidéo
const video = document.getElementById('video');
video.srcObject = stream;

// 3. Dessiner sur un canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 4. Ajouter une flèche rouge (exemple)
function drawArrow() {
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(150, 50);
  ctx.lineTo(140, 40);
  ctx.moveTo(150, 50);
  ctx.lineTo(140, 60);
  ctx.stroke();
}

// 5. Rafraîchir le canvas avec la vidéo
video.addEventListener('play', () => {
  setInterval(() => {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    drawArrow(); // Redessine la flèche à chaque frame
  }, 100);
});

Cas d’usage avancés

• Supervision en temps réel : Intégrer le canvas dans une application interne pour annoter des flux vidéo de caméras de surveillance (ex: pointer un colis suspect sur un écran de logistique).
• Collaboration synchrone : Créer une interface où plusieurs utilisateurs peuvent dessiner simultanément sur un schéma partagé (via WebSocket + Canvas).
• Automatisation : Combiner avec un modèle de détection (ex: YOLO26) pour dessiner automatiquement des flèches sur des objets détectés (voir section 3).

Limites et contraintes

• Complexité technique : Nécessite des compétences en JavaScript avancé (gestion des flux média, Canvas). Les erreurs de synchronisation entre vidéo et canvas peuvent causer des artefacts.
• Performance : Dessiner sur un canvas en temps réel peut consommer beaucoup de ressources CPU, surtout pour des flux haute résolution.
• Compatibilité : L’API Screen Capture est supportée par Chrome et Firefox, mais son support est limité sur Safari (restrictions Apple). Tester systématiquement sur les environnements cibles.

3. Modèles open source : automatiser les annotations avec l’IA

Les modèles de computer vision comme YOLO26 (F9) ou SAM 2 (F6) peuvent détecter ou segmenter des objets dans une image ou une vidéo. Bien qu’ils ne fournissent pas directement des outils d’annotation interactive (ex: flèches), ils peuvent être intégrés pour automatiser des tâches spécifiques. Voici comment les exploiter :

Cas d’usage possibles

• Détection d’objets : Utiliser YOLO26 pour identifier des éléments dans une vidéo (ex: « bouton rouge », « étiquette ») et dessiner automatiquement des boîtes autour d’eux via l’API Canvas (F4).
• Segmentation interactive : SAM 2 permet de suivre un objet dans une vidéo après un clic initial (F6). Idéal pour annoter des flux vidéo (ex: pointer un produit sur une chaîne de production). SAM 2 nécessite un GPU pour un usage temps réel fluide.
• Annotation de datasets : Grounded SAM (F7) combine détection open-vocabulary et segmentation pour annoter des images à partir de prompts textuels (ex: « segmenter tous les casques bleus »). Notez que la licence dépend des composants utilisés (ex: Apache 2.0 pour SAM 2, AGPL pour certains détecteurs).

Exemple d’intégration avec YOLO26

Voici un workflow type pour dessiner des boîtes autour d’objets détectés par YOLO26 :

1. Installer Ultralytics YOLO26 via pip : pip install ultralytics.
2. Charger un modèle préentraîné et traiter une image :

from ultralytics import YOLO

# Charger le modèle YOLO26
model = YOLO("yolo26n.pt")

# Détecter des objets dans une image
results = model("image.jpg")

# Récupérer les coordonnées des boîtes
boxes = results[0].boxes.xyxy  # Format: [x1, y1, x2, y2]

1. Envoyer les coordonnées à une application web via une API (ex: FastAPI) et dessiner les boîtes sur un canvas avec JavaScript (comme dans la section 2).

Limites et précautions

• Latence : Les modèles YOLO (dont YOLO26) nécessitent généralement un GPU pour une inférence temps réel fluide. Sur CPU, la latence peut être élevée et rendre l’outil peu pratique pour un usage en production.
• Licences : YOLO26 utilise une licence AGPL-3.0 (F9), qui impose des contraintes pour les produits commerciaux closed-source. SAM 2 est sous Apache 2.0 (F6), plus permissive.
• Complexité d’intégration : Combiner détection IA et annotation visuelle nécessite un pipeline technique (ex: Python + JavaScript + API). Pas adapté aux ops sans ressources développement.
• Faux positifs : Les modèles peuvent détecter des objets inexistants ou manquer des éléments critiques. Toujours prévoir une validation humaine.

Quand utiliser ces modèles ?

• Automatisation de tâches répétitives : Exemple : pointer systématiquement les boutons « Valider » dans une vidéo de formation.
• Prototypage rapide : Tester un concept d’annotation IA avant d’investir dans une solution sur mesure.
• Annotation de datasets : Pré-annoter des images pour accélérer la création de datasets d’entraînement.

4. Comparaison des solutions et recommandations

Le tableau ci-dessous résume les forces et faiblesses de chaque approche :

Recommandations par profil

• Ops sans compétences techniques : Screenity répond directement au besoin des ops sans compétences techniques. C’est la solution la plus simple pour des annotations manuelles.
• Ops avec des ressources développement : Combiner les API navigateur avec un modèle comme YOLO26 pour automatiser des annotations (ex: pointer des éléments spécifiques dans une vidéo).
• Projets nécessitant une automatisation avancée : Intégrer SAM 2 ou Grounded SAM pour des workflows de segmentation ou de suivi d’objets, mais prévoir un budget pour le matériel (GPU) et le développement.

5. Limites globales et bonnes pratiques

Contraintes techniques

• Matériel : Les modèles de détection (ex: YOLO26) nécessitent un GPU pour un temps réel fluide. Sur CPU, la latence peut rendre l’outil peu pratique pour un usage en production.
• Navigateur : Screenity et les API navigateur dépendent de Chrome ou Firefox. Les applications desktop (ex: Excel, Photoshop) ne sont pas supportées.
• Sécurité : Les outils open source (ex: Screenity) ne garantissent pas la conformité RGPD. Vérifier les politiques de confidentialité et les certifications avant un déploiement en entreprise.

Bonnes pratiques

• Tester en conditions réelles : Avant de déployer Screenity ou une solution personnalisée, vérifier son fonctionnement sur les postes des utilisateurs (ex: résolution d’écran, permissions navigateur).
• Documenter les workflows : Pour les outils comme Screenity, créer un guide utilisateur avec des captures d’écran pour faciliter l’adoption par les équipes.
• Prévoir un plan B : Si les annotations IA (ex: YOLO26) génèrent trop de faux positifs, basculer vers des annotations manuelles ou un modèle plus léger (ex: RT-DETRv4).
• Respecter les licences : Vérifier les licences des modèles open source (ex: AGPL-3.0 pour YOLO26) avant une utilisation commerciale (F9).

Alternatives payantes (pour comparaison)

Si les solutions open source ne suffisent pas, voici quelques alternatives payantes, avec leurs limites pour le cas d’usage principal :

• Miro : Permet des annotations collaboratives, mais pas en temps réel sur un écran partagé (ex: partage d’écran Zoom).
• Zoom Whiteboard : Intégré à Zoom, permet d’annoter en temps réel pendant une réunion, mais dépendant de l’écosystème Zoom.
• Microsoft Whiteboard : Similaire à Zoom Whiteboard, mais pour les utilisateurs Microsoft Teams.

6. Conclusion : quelle solution choisir ?

Screenity est la solution la plus simple pour les ops sans compétences techniques. Elle ne nécessite aucun développement, est gratuite, et couvre les cas d’usage courants (formations, feedbacks, collaboration).

Si vous avez besoin de plus de flexibilité ou d’automatisation, les API navigateur (Screen Capture + Canvas) offrent une alternative puissante, mais nécessitent des compétences en JavaScript avancé. Pour des workflows avancés (ex: détection d’objets), les modèles open source comme YOLO26 ou SAM 2 peuvent être intégrés, mais leur déploiement est plus complexe et coûteux (GPU, développement).

Pour aller plus loin, explorez notre guide sur l’implémentation de l’IA en entreprise, qui détaille comment intégrer des outils comme ceux présentés ici dans des workflows existants.