Afficher l'aperçu de l'image en direct depuis la caméra dans l'application Flutter

Afficher l'aperçu de l'image en direct depuis la caméra fait référence au processus d'affichage du flux en temps réel de la caméra de votre appareil sur un écran. C'est essentiellement ce que vous voyez lorsque vous ouvrez l'application appareil photo sur votre téléphone ou votre ordinateur.

Dans ce didacticiel, nous apprendrons comment afficher un flux d'aperçu d'image en direct de l'appareil photo en tant que widget dans votre application Flutter. De plus, vous apprendrez à capturer l'image et à afficher l'image capturée dans votre application.

Tout d'abord, vous devez ajouter le plugin caméra à votre projet en ajoutant les lignes suivantes dans le fichier pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  camera: ^0.9.4+11

Maintenant, pour Android, définissez la version minimale du SDK sur 21 sur android/app/build.gradle

minSdkVersion 21

Maintenant, pour iOS, ajoutez les lignes suivantes dans ios/Runner/Info.plist

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>

Maintenant, dans votre partie script, importez le plugin caméra :

import 'package:camera/camera.dart';

Maintenant, déclarez les variables requises dans votre classe de widget :

List<CameraDescription>? cameras; //list out the camera available
CameraController? controller; //controller for camera
XFile? image; //for caputred image

Initialisez les contrôleurs de la caméra :

cameras = await availableCameras();
if(cameras != null){
  controller = CameraController(cameras![0], ResolutionPreset.max);
              //cameras[0] = first camera, change to 1 to another camera
              
  controller!.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
  });
}else{
  print("NO any camera found");
}

Vous pouvez désormais afficher l'aperçu de l'appareil photo dans votre application à l'aide du widget CameraPreview() :

CameraPreview(controller!)

Vous pouvez capturer l'image à l'aide du code suivant :

image = await controller!.takePicture();

Vous pouvez afficher l'image capturée dans votre application à l'aide du widget suivant :

Image.file(File(image!.path))

De cette façon, vous pouvez afficher un aperçu de l'image en direct de la caméra dans votre application.