# Reconnaissance d'images

> Détectez n’importe quelle image réelle avec l’appareil photo et déclenchez instantanément une action dans votre application PandaSuite.

https://docs.pandasuite.com/fr/essentials/components/image-recognition/

**Détectez n’importe quelle image réelle avec l’appareil photo et déclenchez instantanément une action dans votre application PandaSuite.**

[Vidéo : Tutoriel Reconnaissance d'images : déclencher un contenu dans une application PandaSuite en pointant l'appareil photo vers une image](https://www.youtube.com/embed/PcgwHrOyd00?&hl=fr&cc_lang_pref=fr&cc_load_policy=1)

Le composant **Recognizer** transforme n’importe quelle image imprimée ou affichée à l’écran en déclencheur interactif.

Lorsque l’utilisateur·rice pointe la caméra de son appareil, le composant compare le flux vidéo aux images de référence que vous avez importées.

Dès qu’une correspondance est trouvée : **l’action de votre choix se lance** (ouvrir un écran, lire une vidéo, incrémenter un score, etc.).

> **Info : Plateformes compatibles**
>
> La reconnaissance d’images fonctionne **hors ligne** sur les applications iOS
> & Android (build natif) et pour les web apps.

## Cas d’utilisation

- **Audioguide de musée** : scannez un tableau pour obtenir des informations contextuelles.
- **Chasse au trésor** : révélez un indice caché derrière une image à trouver.
- **Catalogue produit** : « Scannez pour acheter » depuis un flyer imprimé.
- **Formation technique** : détectez un schéma et affichez une procédure de maintenance.

## Mise en place du composant

1. Ouvrez le panneau **Composants**.
2. Glissez **Reconnaissance d'images** dans la liste des Objets (composant non visuel).

## Caractéristiques du composant

### Propriétés

Dans les **Propriétés** du composant, cliquez sur **+ Ajouter** pour importer une ou plusieurs images de référence.

[Image : Propriétés de Reconnaissance d'images près d'un écran d'identification : trois cartels de plantes en images de référence et le bouton Ajouter]

| Propriété             | Rôle                                                                                                 |
| --------------------- | ---------------------------------------------------------------------------------------------------- |
| **Images**            | Liste des visuels de référence à reconnaître                                                         |
| **Sensibilité**       | Ajuste la tolérance de détection (0.1–10). Plus la valeur est haute, plus le composant est sensible. |
| **Nombre de matches** | Nombre de confirmations avant déclenchement (1 par défaut)                                           |
| **Caméra**            | Utilise la caméra arrière du device (par défaut)                                                     |

> **Attention : Qualité de l'image**
>
> Évitez les visuels trop simples ou monochromes. Préférez des images riches en
> détails, minimum 600 × 600 px.

### Événements déclencheurs

Déclencheurs disponibles depuis l’onglet **Actions** du composant :

- **Match \[image.png]** : se produit dès que \[image.png] est détectée.

Il vous permet de déclencher n’importe quelle action PandaSuite (Changer d’écran, Ouvrir pop-up, Définir variable, etc.).

> **Info : Plusieurs images**
>
> Vous pouvez ajouter plusieurs images à reconnaître au sein d'un seul
> composant. Chaque image possède son propre déclencheur et sa propre action.

### Actions associées

Vous pouvez agir **sur** le composant via l'action **Agir sur un composant** :

- **Ouvrir la caméra** : lance la détection (plein écran par défaut).

## Interactions avancées

### Utilisation du composant Camera

Combinez le composant **Reconnaissance d'images** et le composant **Camera** lorsque vous souhaitez superposer des éléments UI (cadre, instructions).

Utilisez alors les événements du composant **Camera** (déclencheur **Changement de frame**) pour déclencher la reconnaissance d'images.

## Bonnes pratiques et astuces

- Testez vos images sur plusieurs appareils (lumière, distance, reflets).
- Si la détection est trop lente, augmentez **Sensibilité** ou enrichissez le visuel.
- Si des faux positifs surviennent, baissez **Sensibilité** ou augmentez **Nombre de matches**.
- Proposez du feedback : vibration, son ou animation lors de la réussite.

## Exemples pratiques

### Déclencher une pop-up d’information

1. Insérez le composant **Reconnaissance d'images** et importez l’image *poster\_museum.jpg*.
2. Créez une **Pop-up** contenant la fiche de l’œuvre.
3. Ajoutez un bouton pour déclencher la reconnaissance d'images :

**Tape/Clique** ➜ **Agir sur un composant** ➜ **Reconnaissance d'images** ➜ **Ouvrir la caméra**

4. Sur ce composant, créez l’action :

**MATCH \[poster\_museum.jpg]** ➜ **Agir sur un composant** ➜ **Pop-up**

5. Prévisualisez sur appareil : scannez l’affiche, la pop-up s’ouvre.

### Créer une chasse au trésor multi-indices

- Ajoutez 5 images de référence (indices A → E) dans le même composant **Reconnaissance d'images**.
- Chaque reconnaissance met à jour la variable *progression* du [Datastore](https://docs.pandasuite.com/fr/essentials/data/datastore/).
- Un composant **Condition** vérifie *progression* pour afficher l’écran de victoire.

## Ressources supplémentaires

- [Composant Caméra](https://docs.pandasuite.com/fr/essentials/components/camera/)
- [Comprendre les Actions](https://docs.pandasuite.com/fr/essentials/interactions/interactive-actions/)
- [Utiliser les Variables](https://docs.pandasuite.com/fr/essentials/data/variables/)
- [Lecteur de code](https://docs.pandasuite.com/fr/essentials/components/code-reader/)