Premiers pas

1. Installez le package

   npm

   npm i @capgo/camera-preview

   pnpm

   pnpm add @capgo/camera-preview

   yarn

   yarn add @capgo/camera-preview

   bun

   bun add @capgo/camera-preview

2. Synchronisez avec les projets natifs

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Configurez les autorisations

   iOS

   Ajoutez la description d’utilisation de la caméra à votre Info.plist :

   <key>NSCameraUsageDescription</key>
   <string>Pour prendre des photos et vidéos</string>
   <key>NSMicrophoneUsageDescription</key>
   <string>Pour enregistrer de l'audio avec les vidéos</string>
   <key>NSPhotoLibraryUsageDescription</key>
   <string>Pour sauvegarder les photos et vidéos</string>

   Android

   Ajoutez les autorisations caméra à votre AndroidManifest.xml :

   <uses-permission android:name="android.permission.CAMERA" />
   <uses-permission android:name="android.permission.RECORD_AUDIO" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Utilisation

Importez le plugin et utilisez ses méthodes pour contrôler la caméra :

import { CameraPreview } from '@capgo/camera-preview';
import { CameraPreviewOptions, CameraPreviewPictureOptions } from '@capgo/camera-preview';

// Démarrer l'aperçu de la caméra
const startCamera = async () => {
  const cameraPreviewOptions: CameraPreviewOptions = {
    position: 'rear',
    height: 1920,
    width: 1080,
    quality: 50,
    toBack: false,
    paddingBottom: 0,
    rotateWhenOrientationChanged: true,
    x: 0,
    y: 0
  };

  await CameraPreview.start(cameraPreviewOptions);
};

// Arrêter l'aperçu de la caméra
const stopCamera = async () => {
  await CameraPreview.stop();
};

// Prendre une photo
const takePicture = async () => {
  const pictureOptions: CameraPreviewPictureOptions = {
    quality: 90,
    width: 1920,
    height: 1080
  };

  const result = await CameraPreview.capture(pictureOptions);
  const base64PictureData = result.value;

  // Utiliser les données d'image base64
  console.log(base64PictureData);
};

// Changer de caméra
const flipCamera = async () => {
  await CameraPreview.flip();
};

// Contrôler le flash
const setFlashMode = async (mode: 'on' | 'off' | 'auto' | 'torch') => {
  await CameraPreview.setFlashMode({ flashMode: mode });
};

// Démarrer l'enregistrement vidéo
const startRecording = async () => {
  await CameraPreview.startRecordVideo({
    storeToFile: true,
    fileName: 'myvideo'
  });
};

// Arrêter l'enregistrement
const stopRecording = async () => {
  const result = await CameraPreview.stopRecordVideo();
  console.log('Chemin vidéo:', result.videoFilePath);
};

Référence API

start(options)

Démarre l’aperçu de la caméra.

interface CameraPreviewOptions {
  position?: 'rear' | 'front';
  height?: number;
  width?: number;
  x?: number;
  y?: number;
  toBack?: boolean;
  paddingBottom?: number;
  rotateWhenOrientationChanged?: boolean;
  storeToFile?: boolean;
  disableExifHeaderStripping?: boolean;
  enableHighResolution?: boolean;
  disableAudio?: boolean;
  lockAndroidOrientation?: boolean;
  enableOpacity?: boolean;
  enableZoom?: boolean;
}

stop()

Arrête l’aperçu de la caméra.

capture(options)

Prend une photo et la retourne sous forme de chaîne encodée en base64.

interface CameraPreviewPictureOptions {
  height?: number;
  width?: number;
  quality?: number;
}

flip()

Bascule entre la caméra avant et arrière.

setFlashMode(options)

Définit le mode flash.

interface CameraPreviewFlashMode {
  flashMode: 'off' | 'on' | 'auto' | 'torch';
}

startRecordVideo(options)

Démarre l’enregistrement vidéo.

interface CameraPreviewVideoOptions {
  storeToFile?: boolean;
  fileName?: string;
  width?: number;
  height?: number;
  quality?: number;
  withFlash?: boolean;
}

stopRecordVideo()

Arrête l’enregistrement vidéo et retourne le chemin du fichier vidéo.

Fonctionnalités avancées

Contrôle de la mise au point

// Définir la mise au point
await CameraPreview.setFocusCoordinate({
  x: 100,
  y: 100
});

// Obtenir les modes de mise au point supportés
const focusModes = await CameraPreview.getFocusModes();

// Définir le mode de mise au point
await CameraPreview.setFocusMode({
  focusMode: 'continuous-picture'
});

Contrôle du zoom

// Obtenir le zoom maximum
const maxZoom = await CameraPreview.getMaxZoom();

// Définir le zoom
await CameraPreview.setZoom({
  zoom: 2.0
});

// Obtenir le zoom actuel
const currentZoom = await CameraPreview.getZoom();

Contrôle de l’exposition

// Obtenir la plage de compensation d'exposition
const range = await CameraPreview.getExposureCompensationRange();

// Définir la compensation d'exposition
await CameraPreview.setExposureCompensation({
  exposureCompensation: 0.5
});

Meilleures pratiques

1. Demander d’abord les autorisations

   import { Camera } from '@capacitor/camera';
   
   const requestPermissions = async () => {
     const permissions = await Camera.requestPermissions();
     if (permissions.camera === 'granted') {
       // Démarrer l'aperçu de la caméra
     }
   };

2. Gérer les changements d’orientation Définissez rotateWhenOrientationChanged: true pour ajuster automatiquement l’aperçu.

3. Optimiser les performances

   • Utilisez des paramètres de résolution appropriés
   • Arrêtez l’aperçu lorsqu’il n’est pas utilisé
   • Désactivez les fonctionnalités dont vous n’avez pas besoin

4. Gestion des erreurs

   try {
     await CameraPreview.start(options);
   } catch (error) {
     console.error('Échec du démarrage de la caméra:', error);
   }

Notes de plateforme

iOS

• Nécessite iOS 10.0+
• Utilise le framework AVFoundation
• Accélération matérielle supportée

Android

• Nécessite Android 5.0 (API 21)+
• Utilise l’API Camera2
• Support de diverses fonctionnalités de caméra selon les capacités de l’appareil