Camera
Contrôlez l’appareil photo depuis votre application : déclenchez une prise de photo sans sortir de l’application et affichez cette photo dans votre interface.
Cas d’usage
Le composant Caméra est particulièrement utile pour :
- Création de contenu utilisateur : permettre aux utilisateurs de partager des photos dans votre application.
- Borne photo événementielle : créer des expériences photos lors d’événements avec ajout de cadres personnalisés.
- Catalogues produits : permettre aux utilisateurs de photographier des articles pour les ajouter à une liste.
- Inspection et reporting : capturer des images pour des rapports d’inspection ou de maintenance.
Configuration du composant
- Ouvrez le panneau Composants.
- Glissez-déposez Caméra dans votre écran.
Un objet graphique est automatiquement créé : cette zone vous permet d’afficher la vue de la caméra depuis votre application. Si vous ne souhaitez pas afficher cette vue, placez ce composant hors de l’écran.
Fonctionnalités du composant
Propriétés
Dans les propriétés du composant Caméra, vous pouvez personnaliser son comportement :
| Propriété | Description |
|---|---|
| Orientation | Choisissez entre la caméra Avant (selfie) ou Arrière (photo principale). |
| Type de caméra | Sur les appareils avec plusieurs caméras, sélectionnez Standard, Ultra Wide (grand angle) ou Téléobjectif. Par défaut, la caméra Standard est utilisée. |
| Qualité | Définissez la qualité de la photo capturée : Optimisée (équilibre qualité/performance) ou Meilleure (qualité maximale). |
Placez l’objet graphique de la caméra hors de l’écran si vous souhaitez capturer des photos sans afficher la prévisualisation à l’utilisateur.
Événements déclencheurs
Vous pouvez utiliser le composant Caméra pour déclencher des actions. Sélectionnez votre composant et ouvrez la fenêtre Actions. Les déclencheurs disponibles sont :
- Photo prise : se déclenche immédiatement après la capture d’une photo.
- Changement de frame : se déclenche à chaque nouvelle image capturée par la caméra en temps réel (avant la prise de photo).
Cela vous permet de déclencher n’importe quelle action PandaSuite (changer d’écran, afficher une pop-up, enregistrer dans une variable, etc.).
Le déclencheur Changement de frame est particulièrement utile pour combiner la caméra avec la reconnaissance d’images. Contrairement à l’action classique « Ouvrir la caméra » du Recognizer (qui force le plein écran), cette approche vous permet de concevoir votre propre interface avec des overlays, cibles, et indicateurs visuels personnalisés.
Actions associées
Vous pouvez agir sur le composant via l’action Agir sur un composant :
- Prendre une photo : déclenche la capture d’une photo depuis la caméra sélectionnée.
Prendre une photo
Pour prendre une photo, sélectionnez un bouton et choisissez l’action :
Afficher la photo capturée
Pour afficher la photo, connectez la source d’une image à ce composant via un data binding.
- Insérez une Image dans votre interface (elle sert de modèle et sera automatiquement remplacée).
- Sélectionnez cette image, cliquez sur Source dans les propriétés.
- Définissez le chemin : 1 Depuis un composant→2 Caméra→3 Image
La photo s’affiche automatiquement après sa capture.
Bonnes pratiques et conseils
- Permissions utilisateur : assurez-vous que votre application demande les autorisations d’accès à la caméra.
- Qualité d’image : les photos capturées sont optimisées pour un équilibre entre qualité et performance.
- Feedback visuel : ajoutez un effet sonore, une vibration ou une animation après la capture pour confirmer l’action.
- Stockage local : les photos sont stockées localement dans l’application. Utilisez le composant HTTP pour les envoyer vers un service externe.
- Compatibilité : testez sur différents appareils pour vérifier la disponibilité des différents types de caméras (ultra wide, telephoto).
Exemples pratiques
Borne photo (photo booth)
Créez une borne photo événementielle où les invités prennent un selfie et voient instantanément le résultat à l’écran.
- Insérez le composant Caméra avec l’orientation Avant (selfie).
- Créez un bouton avec l’action : .1 Agir sur un composant→2 Caméra→3 Prendre une photo
- Affichez la photo capturée : insérez une Image, puis liez sa Source à .1 Depuis un composant→2 Caméra→3 Image
Photo Booth
Ajoutez ce template en quelques clics à votre compte. Modifiez et personnalisez-le en toute liberté.
→ Ajouter ce template à votre compteAjouter un cadre personnalisé (optionnel)
Pour personnaliser le résultat, placez un cadre décoratif (une bordure, un logo ou un hashtag d’événement) en superposition graphique par-dessus la photo affichée.
La Caméra capture uniquement l’image de la caméra, pas l’élément superposé par-dessus. Pour enregistrer une photo finale incluant le cadre, capturez la vue composée avec le composant Screenshot.
- Ajoutez un composant Screenshot et configurez ses Propriétés pour capturer le composant (ou l’écran) qui contient la photo et le cadre.
- Déclenchez-le juste après la capture : .1 Photo prise→2 Agir sur un composant→3 Screenshot→4 Prendre une photo
- Liez une nouvelle Image à la source du Screenshot pour afficher, stocker ou partager la photo encadrée.
Envoi de photo vers un service externe
Votre photo est stockée localement dans l’application, mais vous pouvez l’envoyer sur un autre service via le composant HTTP.
Étapes :
- Configurez un composant HTTP.
- Ajoutez un data binding depuis Caméra > Image vers le champ du corps de la requête HTTP.
- Déclenchez l’envoi après la capture : Photo prise → Agir sur un composant → HTTP → Envoyer
Scanner d’images avec interface personnalisée
Combinez Caméra et Reconnaissance d’images pour créer une interface de scan sur mesure (sans le mode plein écran).
- Ajoutez les composants Caméra (orientation arrière) et Reconnaissance d’images.
- Superposez votre interface graphique (cadre, cible, instructions) par-dessus la vue caméra.
- Connectez-les : 1 Changement de frame→2 Agir sur un composant→3 Reconnaissance d’images→4 Détecter
- Définissez vos réactions : MATCH [image.jpg] → action de votre choix.
Le déclencheur Changement de frame s’active jusqu’à 30 fois par seconde. Privilégiez des actions légères pour éviter les ralentissements.