Getting Started
Copiez un prompt de configuration avec les étapes d'installation et le guide Markdown complet pour ce plugin.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/camera-preview`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/camera-preview/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
Installer
Section intitulée « Installer »Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les compétences Capgo à votre outil IA à l'aide de la commande suivante :
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsUtilisez ensuite la prompt suivante :
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/camera-preview` plugin in my project.Si vous préférez la mise en place manuelle, installez le plugin en exécutant les commandes suivantes et suivez les instructions spécifiques à la plateforme ci-dessous :
bun add @capgo/camera-previewbunx cap syncImporter
Section intitulée “Importer”import { CameraPreview } from '@capgo/camera-preview';API Vue d'ensemble
Section intitulée “API Vue d'ensemble”Démarrera la prévisualisation de la caméra.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.start({} as CameraPreviewOptions);Arrête la preview de la caméra.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stop();capture
Section intitulée “capture”Prend une photo à partir de la caméra.
Si storeToFile était défini sur true lors du démarrage de la preview, le résultat
value sera un chemin de fichier absolu sur le dispositif au lieu d'une chaîne base64. Utilisez getBase64FromFilePath pour obtenir la chaîne base64 à partir du chemin de fichier.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.capture({} as CameraPreviewPictureOptions);captureSample
Section intitulée “captureSample”Prend une seule image à partir de la preview de la caméra.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.captureSample({} as CameraSampleOptions);getSupportedFlashModes
Section intitulée “getSupportedFlashModes”Obtient les modes de flash pris en charge par la caméra active.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedFlashModes();setAspectRatio
Section intitulée “setAspectRatio”Définit la ratio d'aspect de la prévisualisation de la caméra.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setAspectRatio({} as { aspectRatio: '4:3' | '16:9'; x?: number; y?: number });getAspectRatio
Section intitulée “getAspectRatio”Obtient le ratio d'aspect actuel de la prévisualisation de la caméra.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAspectRatio();setGridMode
Section intitulée “setGridMode”Définit le mode de grille de l'overlay de la prévisualisation de la caméra.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setGridMode({} as { gridMode: GridMode });getGridMode
Section intitulée “getGridMode”Obtient le mode de grille actuel de l'overlay de la prévisualisation de la caméra.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getGridMode();checkPermissions
Section intitulée “checkPermissions”Vérifie l'état actuel des autorisations de la caméra (et optionnellement du microphone) sans afficher le dialogue du système.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.checkPermissions();requestPermissions
Section intitulée “requestPermissions”Demande les autorisations de la caméra (et optionnellement du microphone). Si les autorisations sont déjà accordées ou refusées,
le statut actuel est renvoyé sans afficher de dialogue. Lorsque showSettingsAlert est vrai et que les autorisations sont refusées,
un avertissement spécifique à la plateforme guidant l'utilisateur vers les paramètres de l'application sera présenté.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.requestPermissions();getHorizontalFov
Section intitulée “getHorizontalFov”Obtient le champ de vision horizontal pour la caméra active. Remarque : Cela peut être une estimation sur certains appareils.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getHorizontalFov();getSupportedPictureSizes
Section intitulée « getSupportedPictureSizes »Récupère les tailles de photos prises en charge pour toutes les caméras.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedPictureSizes();setFlashMode
Section intitulée « setFlashMode »Définit le mode de la lumière flash pour la caméra active.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFlashMode({} as { flashMode: CameraPreviewFlashMode | string });Basculer entre la caméra avant et la caméra arrière.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.flip();setOpacity
Section intitulée « setOpacity »Définit l'opacité de la prévisualisation de la caméra.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setOpacity({} as CameraOpacityOptions);stopRecordVideo
Section intitulée “stopRecordVideo”Arrête une enregistrement vidéo en cours.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stopRecordVideo();startRecordVideo
Section intitulée “startRecordVideo”Démarre l'enregistrement d'une vidéo.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.startRecordVideo({} as CameraPreviewOptions);isRunning
Section intitulée “isRunning”Vérifie si la prévisualisation de la caméra est actuellement en cours.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.isRunning();getAvailableDevices
Section intitulée “getAvailableDevices”Récupère tous les appareils de caméra disponibles.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAvailableDevices();getZoom
Section intitulée “getZoom”Récupère l'état de zoom actuel, y compris les valeurs minimale et maximale et les informations sur le zoom actuel.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoom();getZoomButtonValues
Section intitulée “getZoomButtonValues”Renvoie les valeurs des boutons de zoom pour un changement rapide.
- iOS/Android : inclut 0,5 si l'ultra-large angle est disponible ; 1 et 2 si le grand angle est disponible ; 3 si le téléobjectif est disponible
- Web : non pris en charge
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoomButtonValues();setZoom
Section intitulée “setZoom”Définit le niveau de zoom de la caméra.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setZoom({} as { level: number; ramp?: boolean; autoFocus?: boolean });getFlashMode
Section intitulée “getFlashMode”Récupère le mode de clignotement actuel.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getFlashMode();setDeviceId
Section intitulée “setDeviceId”Switche la caméra active vers celle spécifiée. deviceId.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setDeviceId({} as { deviceId: string });getDeviceId
Section intitulée “getDeviceId”Récupère l'ID du périphérique de la caméra qui est actuellement lié. Sur Android, si une demande de lentille physique retombe sur une caméra logique, cela retourne l'ID de la caméra logique liée.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getDeviceId();getPreviewSize
Section intitulée “getPreviewSize”Récupère la taille et la position de la prévisualisation actuelle.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getPreviewSize();setPreviewSize
Section intitulée “setPreviewSize”Définit la taille et la position de la prévisualisation.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setPreviewSize({} as { x?: number; y?: number; width: number; height: number });setFocus
Section intitulée “setFocus”Fixe l'axe de la caméra sur un point spécifique dans la prévisualisation.
Remarque : Le plugin ne gère aucun gestionnaire de geste de focus par tap natif. Gérez les clics dans votre HTML/JS (par exemple, sur l'interface utilisateur superposée), puis passez les coordonnées normalisées ici.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFocus({} as { x: number; y: number });deleteFile
Section intitulée “deleteFile”Supprime un fichier à l'emplacement absolu spécifié sur le dispositif. storeToFileUtilisez cela pour nettoyer rapidement les images temporaires créées avec
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.deleteFile({} as { path: string });getSafeAreaInsets
Copier dans le presse-papierRécupère les valeurs d'encadré sécurisées pour les appareils. Retourne l'orientation-aware notch/camera cutout inset et l'orientation actuelle. En mode paysage : retourne l'inset gauche (notch déplacé du côté). En mode portrait : retourne l'inset supérieur (notch en haut). Cela cible spécifiquement la zone de coupure (notch, trou de poinçon, etc.) que tous les téléphones modernes ont.
Android : Les valeurs retournées en dp (pixels logiques). iOS : Les valeurs retournées en pixels physiques, en excluant la barre d'état (seulement la taille pure de la notch/cutout).
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSafeAreaInsets();getOrientation
Section intitulée “getOrientation”Récupère l'orientation actuelle de l'appareil sous une forme cross-plateforme.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getOrientation();getExposureModes
Section intitulée “getExposureModes”Retourne les modes d'exposition pris en charge par la caméra active. Modes peuvent inclure : ‘bloqué’, ‘auto’, ‘continu’, ‘personnalisé’.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureModes();getExposureMode
Section intitulée “getExposureMode”Retourne le mode d'exposition actuel.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureMode();setExposureMode
Section intitulée « setExposureMode »Définit le mode d'exposition.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureMode({} as { mode: ExposureMode });getExposureCompensationRange
Section intitulée « getExposureCompensationRange »Renvoie la plage de compensation d'exposition (EV bias) prise en charge.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensationRange();getExposureCompensation
Section intitulée « getExposureCompensation »Renvoie la compensation d'exposition actuelle (EV bias).
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensation();setExposureCompensation
Section intitulée « setExposureCompensation »Définit la compensation d'exposition (EV bias). La valeur sera limitée à la plage.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureCompensation({} as { value: number });Référence de type
Référence de typeCameraPreviewOptions
Référence de type intitulée « CameraPreviewOptions »Définit les options de configuration pour démarrer la prévisualisation de la caméra.
export interface CameraPreviewOptions { /** * The parent element to attach the video preview to. * @platform web */ parent?: string; /** * A CSS class name to add to the preview element. * @platform web */ className?: string; /** * The width of the preview in pixels. Defaults to the screen width. * @platform android, ios, web */ width?: number; /** * The height of the preview in pixels. Defaults to the screen height. * @platform android, ios, web */ height?: number; /** * The horizontal origin of the preview, in pixels. * @platform android, ios */ x?: number; /** * The vertical origin of the preview, in pixels. * @platform android, ios */ y?: number; /** * The aspect ratio of the camera preview, '4:3' or '16:9' or 'fill'. * Cannot be set if width or height is provided, otherwise the call will be rejected. * Use setPreviewSize to adjust size after starting. * * @since 2.0.0 */ aspectRatio?: '4:3' | '16:9'; /** * Controls how the camera preview fills the available space. * - 'contain': Fits the entire preview within the space, may show letterboxing (default). * - 'cover': Fills the entire space, may crop edges of the preview. * @default "contain" * @platform android, ios, web */ aspectMode?: 'cover' | 'contain'; /** * The grid overlay to display on the camera preview. * @default "none" * @since 2.1.0 */ gridMode?: GridMode; /** * Adjusts the y-position to account for safe areas (e.g., notches). * @platform ios * @default false */ includeSafeAreaInsets?: boolean; /** * If true, places the preview behind the webview. * @platform android * @default true */ toBack?: boolean; /** * Bottom padding for the preview, in pixels. * @platform android, ios */ paddingBottom?: number; /** * Whether to rotate the preview when the device orientation changes. * @platform ios * @default true */ rotateWhenOrientationChanged?: boolean; /** * The camera to use. * @default "rear" */ position?: CameraPosition | string; /** * If true, saves the captured image to a file and returns the file path. * If false, returns a base64 encoded string. * @default false */ storeToFile?: boolean; /** * If true, prevents the plugin from rotating the image based on EXIF data. * @platform android * @default false */ disableExifHeaderStripping?: boolean; /** * If true, disables the audio stream, preventing audio permission requests. * @default true */ disableAudio?: boolean; /** * If true, locks the device orientation while the camera is active. * @platform android * @default false */ lockAndroidOrientation?: boolean; /** * If true, allows the camera preview's opacity to be changed. * @platform android, web * @default false */ enableOpacity?: boolean;
/** * If true, disables the visual focus indicator when tapping to focus. * @platform android, ios * @default false */ disableFocusIndicator?: boolean; /** * The `deviceId` of the camera to use. If provided, `position` is ignored. * @platform ios */ deviceId?: string; /** * On Android, attempts to bind a physical camera directly when `deviceId` refers to a physical lens. * Disabled by default because OEM support is inconsistent; when false, Android keeps the current logical-camera fallback behavior. * @default false * @platform android */ enablePhysicalDeviceSelection?: boolean; /** * The initial zoom level when starting the camera preview. * If the requested zoom level is not available, the native plugin will reject. * @default 1.0 * @platform android, ios * @since 2.2.0 */ initialZoomLevel?: number; /** * The vertical positioning of the camera preview. * @default "center" * @platform android, ios, web * @since 2.3.0 */ positioning?: CameraPositioning; /** * If true, enables video capture capabilities when the camera starts. * @default false * @platform android * @since 7.11.0 */ enableVideoMode?: boolean; /** * If true, forces the camera to start/restart even if it's already running or busy. * This will kill the current camera session and start a new one, ignoring all state checks. * @default false * @platform android, ios, web */ force?: boolean; /** * Sets the quality of video for recording. * Options: 'low', 'medium', 'high' * @note On Android requires 'enableVideoMode' to be true * @note Will affect the entire preview stream for iOS * @platform ios, android * @default "high" */ videoQuality?: 'low' | 'medium' | 'high';}CameraPreviewPictureOptions
Référence de type intitulée « CameraPreviewPictureOptions »Définit les options pour capturer une photo.
export interface CameraPreviewPictureOptions { /** * The maximum height of the picture in pixels. The image will be resized to fit within this height while maintaining aspect ratio. * If not specified the captured image will match the preview's visible area. */ height?: number; /** * The maximum width of the picture in pixels. The image will be resized to fit within this width while maintaining aspect ratio. * If not specified the captured image will match the preview's visible area. */ width?: number; /** * The quality of the captured image, from 0 to 100. * Does not apply to `.png` format. * @default 85 */ quality?: number; /** * The format of the captured image. * @default "jpeg" */ format?: PictureFormat; /** * If true, the captured image will be saved to the user's gallery. * @default false * @since 7.5.0 */ saveToGallery?: boolean; /** * If true, the plugin will attempt to add GPS location data to the image's EXIF metadata. * This may prompt the user for location permissions. * @default false * @since 7.6.0 */ withExifLocation?: boolean; /** * If true, the plugin will embed a timestamp in the top-right corner of the image. * @default false * @since 7.17.0 */ embedTimestamp?: boolean; /** * If true, the plugin will embed the current location in the top-right corner of the image. * Requires `withExifLocation` to be enabled. * @default false * @since 7.18.0 */ embedLocation?: boolean; /** * Sets the priority for photo quality vs. capture speed. * - "speed": Prioritizes faster capture times, may reduce image quality. * - "balanced": Aims for a balance between quality and speed. * - "quality": Prioritizes image quality, may reduce capture speed. * See https://developer.apple.com/documentation/avfoundation/avcapturephotosettings/photoqualityprioritization for details. * * @since 7.21.0 * @platform ios * @default "speed" */ photoQualityPrioritization?: 'speed' | 'balanced' | 'quality';}Représente les données EXIF extraites d'une image.
export interface ExifData { [key: string]: any;}CameraSampleOptions
Référence de type intitulée « CameraSampleOptions »Définit les options pour capturer une image d'échantillon de la prévisualisation de la caméra.
export interface CameraSampleOptions { /** * The quality of the captured sample, from 0 to 100. * @default 85 */ quality?: number;}CameraPreviewFlashMode
Section intitulée “Mode de flash de la prévisualisation de la caméra”Les modes de flash disponibles pour la caméra. ‘torch’ est un mode de lumière continue.
export type CameraPreviewFlashMode = 'off' | 'on' | 'auto' | 'torch';export type GridMode = 'none' | '3x3' | '4x4';PermissionRequestOptions
Section intitulée “Options de demande de permission”export interface PermissionRequestOptions { disableAudio?: boolean; showSettingsAlert?: boolean; title?: string; message?: string; openSettingsButtonTitle?: string; cancelButtonTitle?: string;}CameraPermissionStatus
Section intitulée “État de la permission de la caméra”export interface CameraPermissionStatus { camera: PermissionState; microphone?: PermissionState;}SupportedPictureSizes
Section intitulée “Tailles d'image prises en charge”Répresente les tailles de photo prises en compte pour une caméra orientée dans une certaine direction.
export interface SupportedPictureSizes { /** The camera direction ("front" or "rear"). */ facing: string; /** A list of supported picture sizes for this camera. */ supportedPictureSizes: PictureSize[];}CameraOpacityOptions
Section intitulée “Options d'opacité de la caméra”Définit les options pour définir l'opacité de la prévisualisation de la caméra.
export interface CameraOpacityOptions { /** * The opacity percentage, from 0.0 (fully transparent) to 1.0 (fully opaque). * @default 1.0 */ opacity?: number;}CameraDevice
Section intitulée “Appareil photo”Répresente une caméra physique sur le dispositif (par exemple, la caméra avant).
export interface CameraDevice { /** A unique identifier for the camera device. */ deviceId: string; /** A human-readable name for the camera device. */ label: string; /** The physical position of the camera on the device. */ position: CameraPosition; /** A list of all available lenses for this camera device. */ lenses: CameraLens[]; /** The overall minimum zoom factor available across all lenses on this device. */ minZoom: number; /** The overall maximum zoom factor available across all lenses on this device. */ maxZoom: number; /** Identifies whether the device is a logical camera (composed of multiple physical lenses). */ isLogical: boolean;}Répresente les informations détaillées de l'objectif actuellement en cours.
export interface LensInfo { /** The focal length of the active lens in millimeters. */ focalLength: number; /** The device type of the active lens. */ deviceType: DeviceType; /** The base zoom ratio of the active lens (e.g., 0.5x, 1.0x). */ baseZoomRatio: number; /** The current digital zoom factor applied on top of the base zoom. */ digitalZoom: number;}Source De Vérité
Section intitulée “Source De Vérité”Cette page est générée à partir du plugin’s src/definitions.tsRe-faites la synchronisation lorsque les public API changent en amont.
Continuez de Getting Started
Section intitulée “Continuez de Getting Started”Si vous utilisez Getting Started pour planifier le comportement natif des médias et de l'interface, connectez-le avec Utilisez @capgo/camera-preview pour la capacité native dans Utilisez @capgo/camera-preview, Utilisez @capgo/capacitor-live-activities pour la capacité native dans Utilisez @capgo/capacitor-live-activities, @capgo/capacitor-activités en direct pour les détails d'implémentation dans @capgo/capacitor-activités en direct, En utilisant @capgo/capacitor-joueur de vidéo pour la capacité native dans En utilisant @capgo/capacitor-joueur de vidéo, et @capgo/capacitor-joueur de vidéo pour les détails d'implémentation dans @capgo/capacitor-joueur de vidéo.