Le composant Reconnaissance d'images

Découvrez comment déclencher une action à partir d'une image scannée par l'utilisateur.

Comment fonctionne la reconnaissance d'images ?

C'est le même principe que le QR code. L'utilisateur ouvre l'appareil photo depuis l'application : dès que la caméra détecte l'image, le composant déclenche instantanément l'action : : ouvrir une pop-up, afficher un indice, aller à un écran… À la différence du QR code, il est possible d'utiliser n'importe quelle image et de définir n'importe quelle action. C'est une fonctionnalité particulièrement appréciée pour les parcours de visite et les chasses au trésor.

Cette fonctionnalité s'appuie sur la technologie du template matching : cette technique permet de détecter les parties d’une image qui correspondent à une image de référence. La caméra est alors en capacité de reconnaître une similarité avec des images préalablement identifiées dans la base de données.

La reconnaissance d'images fonctionne en hors ligne : l'utilisateur n'a pas besoin de connexion Internet ! Par contre, cette fonctionnalité est uniquement disponible pour les applications mobiles iOS & Android, cela n'est pas compatible avec la web app.

Choisir la bonne image

Il faut prendre en compte certaines limites inhérentes à la technologie du template matching. Les images trop simples sont plus difficilement reconnues. Nous vous recommandons de sélectionner des images avec plus de détails ou bien d'augmenter la sensibilité du composant (dans les propriétés du composant).

Nous vous recommandons de bien tester vos images avant le déploiement depuis plusieurs appareils et éventuellement complexifier les visuels si besoin.

Pour utiliser la reconnaissance d'images, insérez le composant Recognizer.

Dans les propriétés, cliquez sur + Ajouter pour sélectionner une ou plusieurs images à reconnaître.

Pour chaque image, vous pouvez choisir la Sensibilité et le Nombre de matches pour la reconnaissance de cette image :

Sensibilité : c'est une valeur entre 0.1 et 10, 10 étant la sensibilité maximale
Nombre de matches : le nombre de fois que la caméra doit détecter l'image avant de déclencher l'action. Si la reconnaissance est trop instantanée, il est pertinent d'augmenter cette valeur (par défaut à 1).

Déclencher une action

Créez un bouton pour déclencher l'appareil photo. Sélectionnez le bouton et ajoutez une action : Clic / Tape > Agir sur un composant > Recognizer > Ouvrir la caméra

💡 Par défaut le composant Recognizer fonctionne avec une caméra qui s'ouvre en plein écran. Si vous souhaitez personnaliser l'affichage de la caméra ou inclure un calque, vous avez la possibilité d'utiliser le composant Camera et de personnaliser l'interface autour. Une fois l'image captée par la caméra (déclencheur "Changement de frame"), déclenchez la reconnaissance d'image et l'action associée, en cascade.

Ensuite, choisissez l'action déclenchée grâce à la reconnaissance de votre image.

Sélectionnez votre composant Recognizer et cliquez sur Actions.

Cliquez sur Ajouter action. Sélectionnez Recognize img et choisissez votre action à effectuer, par exemple Changer d’écran etc….

Une fois l’action définie, pensez à valider et à enregistrer.

💡 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.

Bien sûr, les possibilités sont nombreuses : vous pouvez afficher du texte informatif pour une œuvre d’art, déclencher la lecture d’une vidéo, d’une musique, l’ouverture d’une pop-up ou d’un formulaire à remplir… la seule limite est celle de votre imagination !