Commencer

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. Synchronisation avec les projets natifs

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Configurer les autorisations

   iOS

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

   <key>NSCameraUsageDescription</key>
   <string>To take photos and videos</string>
   <key>NSMicrophoneUsageDescription</key>
   <string>To record audio with videos</string>
   <key>NSPhotoLibraryUsageDescription</key>
   <string>To save photos and videos</string>

   Android

   Ajoutez des autorisations de 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';

// Start camera preview
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);
};

// Stop camera preview
const stopCamera = async () => {
  await CameraPreview.stop();
};

// Take a picture
const takePicture = async () => {
  const pictureOptions: CameraPreviewPictureOptions = {
    quality: 90,
    width: 1920,
    height: 1080
  };

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

  // Use the base64 image data
  console.log(base64PictureData);
};

// Switch camera
const flipCamera = async () => {
  await CameraPreview.flip();
};

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

// Start recording video
const startRecording = async () => {
  await CameraPreview.startRecordVideo({
    storeToFile: true,
    fileName: 'myvideo'
  });
};

// Stop recording
const stopRecording = async () => {
  const result = await CameraPreview.stopRecordVideo();
  console.log('Video path:', result.videoFilePath);
};

API Référence

début (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;
}

arrête()

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

capture(options)

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

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

retourner()

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

setFlashMode(options)

Règle 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 renvoie le chemin du fichier vidéo.

Fonctionnalités avancées

Contrôle de la mise au point

// Set focus
await CameraPreview.setFocusCoordinate({
  x: 100,
  y: 100
});

// Get supported focus modes
const focusModes = await CameraPreview.getFocusModes();

// Set focus mode
await CameraPreview.setFocusMode({
  focusMode: 'continuous-picture'
});

Contrôle du zoom

// Get max zoom
const maxZoom = await CameraPreview.getMaxZoom();

// Set zoom
await CameraPreview.setZoom({
  zoom: 2.0
});

// Get current zoom
const currentZoom = await CameraPreview.getZoom();

Contrôle de l’exposition

// Get exposure compensation range
const range = await CameraPreview.getExposureCompensationRange();

// Set exposure compensation
await CameraPreview.setExposureCompensation({
  exposureCompensation: 0.5
});

## meilleures pratiques

1. Demandez d’abord les autorisations

   import { Camera } from '@capacitor/camera';
   
   const requestPermissions = async () => {
     const permissions = await Camera.requestPermissions();
     if (permissions.camera === 'granted') {
       // Start camera preview
     }
   };

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

3. Optimiser les performances

   • Utilisez les 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('Failed to start camera:', error);
   }

## Remarques sur la plate-forme

iOS

• Nécessite iOS 10.0+
• Utilise le framework AVFoundation
• Accélération matérielle prise en charge

Android

• Nécessite Android 5.0 (API 21)+
• Utilise Camera2 API
• Prend en charge diverses fonctionnalités de l’appareil photo en fonction des capacités de l’appareil