# Camera

> Découvrez comment contrôler l'appareil photo de votre application PandaSuite pour prendre et afficher des photos sans quitter l'application.

https://docs.pandasuite.com/fr/essentials/components/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

1. Ouvrez le panneau **Composants**.
2. 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).                                         |

> **Astuce**
>
> 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.).

> **Astuce : Reconnaissance d'images en temps réel**
>
> Le déclencheur **Changement de frame** est particulièrement utile pour
> combiner la caméra avec la [reconnaissance
> d'images](https://docs.pandasuite.com/fr/essentials/components/image-recognition/). 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](https://docs.pandasuite.com/fr/essentials/interactions/buttons/) et choisissez l'action : **Agir sur un composant** → **Caméra** → **Prendre une photo**

[Image : Bouton « Take a photo » d'un écran d'identification de plantes sélectionné : au clic, Prendre une photo sur le composant Caméra]

Ajoutez un bouton pour déclencher la prise de photo

## Afficher la photo capturée

Pour afficher la photo, connectez la source d'une image à ce composant via un data binding.

1. Insérez une **Image** dans votre interface (elle sert de modèle et sera automatiquement remplacée).
2. Sélectionnez cette image, cliquez sur **Source** dans les propriétés.
3. Définissez le chemin : **Depuis un composant** → **Caméra** → **Image**

[Image : Data binding dans PandaSuite Studio : la Source de l'image sélectionnée est liée au chemin Caméra → Image]

Connectez la source de l'image au composant Caméra

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](https://docs.pandasuite.com/fr/essentials/components/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.

1. Insérez le composant **Caméra** avec l'orientation **Avant** (selfie).
2. Créez un bouton avec l'action : **Agir sur un composant** → **Caméra** → **Prendre une photo**.
3. Affichez la photo capturée : insérez une **Image**, puis liez sa **Source** à **Depuis un composant** → **Caméra** → **Image**.

[Image : Template Photo Booth : écran de capture et galerie de photos]

Le template Photo Booth, avec un écran de capture et une galerie de photos

[Modèle : Photo Booth](https://pandasuite.com/fr/templates/photo-booth/)

**Ajouter 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.

> **Note**
>
> 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](https://docs.pandasuite.com/fr/essentials/components/screenshot/).

1. Ajoutez un composant **Screenshot** et configurez ses **Propriétés** pour capturer le composant (ou l'écran) qui contient la photo et le cadre.
2. Déclenchez-le juste après la capture : **Photo prise** → **Agir sur un composant** → **Screenshot** → **Prendre une photo**.
3. 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](https://docs.pandasuite.com/fr/essentials/components/http/).

**Étapes** :

1. Configurez un composant [HTTP](https://docs.pandasuite.com/fr/essentials/components/http/).
2. Ajoutez un data binding depuis **Caméra > Image** vers le champ du corps de la requête HTTP.
3. 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).

1. Ajoutez les composants **Caméra** (orientation arrière) et **Reconnaissance d'images**.
2. Superposez votre interface graphique (cadre, cible, instructions) par-dessus la vue caméra.
3. Connectez-les : **Changement de frame** → **Agir sur un composant** → **Reconnaissance d'images** → **Détecter**
4. Définissez vos réactions : **MATCH \[image.jpg]** → action de votre choix.

> **Attention : Performance**
>
> Le déclencheur **Changement de frame** s'active jusqu'à 30 fois par seconde.
> Privilégiez des actions légères pour éviter les ralentissements.

## Ressources supplémentaires

- [Reconnaissance d'images](https://docs.pandasuite.com/fr/essentials/components/image-recognition/)
- [Screenshot](https://docs.pandasuite.com/fr/essentials/components/screenshot/)
- [HTTP](https://docs.pandasuite.com/fr/essentials/components/http/)
- [Partage de contenu](https://docs.pandasuite.com/fr/essentials/interactions/content-sharing/)
- [Envoyer un email depuis votre app](https://docs.pandasuite.com/fr/essentials/interactions/send-an-email-from-your-app/)
- [Comprendre les actions](https://docs.pandasuite.com/fr/essentials/interactions/interactive-actions/)