The Image Recognition component

Learn how to trigger an action from an image scanned by the user.

How does it work?

The image recognition works on the same principle as the QR code. The user opens the camera from the application: as soon as the camera detects the image, the component triggers the action: open a pop-up, go to a screen.... Unlike the QR code, you can choose any image and any action. This is a feature that is particularly used for tour apps and treasure hunts.

This feature is based on the template matching technology: this technique allows detecting the parts of an image that correspond to a reference image. The camera is then able to recognize a similarity with images previously identified in the database.

The image recognition works offline: the user does not need an Internet connection. However, this feature is only available for iOS & Android mobile applications, it is not compatible with the web app.

⚠️ Only for iOS & Android apps: These features are only available for native apps.

Choose the right image

There are some inherent limitations to template matching technology. Images that are too simple are more difficult to recognize. We recommend that you select images with more details or increase the sensitivity of the component (in the component properties).

We recommend that you test your images before deploying them on several devices and increase the complexity of the visuals if necessary.

To use image recognition, insert the Recognizer component.

In the Properties, click + Add Image and select one or more images. For each image, you can choose Sensitivity and Number of Matches for recognition of that image:

Sensitivity: it is a value between 0.1 and 10, 10 being the maximum sensitivity.
Number of matches: it corresponds to the number of times the camera must detect the image before triggering the action. If the recognition is too instantaneous, it is relevant to increase this value (by default to 1).

Trigger an action

Create a button to trigger the camera. Select the button and add an action : Click / Tap > Interact with on component > Recognizer > Open camera

💡 💡 By default the Recognizer component works with a camera that opens in full screen. If you want to customize the camera display or include a layer, you have the possibility to use the Camera component and customize the interface around it. Once the image is captured by the camera (trigger "Change frame"), you can trigger the image recognition and the related action in cascade.

Next, choose the action triggered by your image recognition.

Select your Recognizer component and click on Actions.

Click on Add Action. Select Recognize im g and choose your action to perform, for example Change screen etc....

Once the action is defined, remember to validate and save.

💡 You can add multiple images to be recognized within a single component. Each image has its own trigger and action.

Of course, the possibilities are numerous: you can display informative text for a work of art, trigger the playback of a video, a music, the opening of a pop-up or a form to be filled in... the only limit is your imagination!