La possibilité d'utiliser l'appareil photo existe dans de nombreuses applications, et nous l'utilisons tous régulièrement. Dans Flutter, nous pouvons implémenter le travail avec la caméra en utilisant deux plugins officiels:
Il y a une différence notable entre eux, et cela vaut la peine de les utiliser selon la situation:
camera vous permet d'interagir avec les caméras disponibles sur l'appareil depuis votre application et d'afficher l'image dans le widget. Il est bien adapté aux tâches lorsque vous devez "personnaliser" le fonctionnement de la caméra pour l'application.image-picker lance l'application appareil photo et renvoie un objet de type File ( File image ou vidéo sélectionné par l'utilisateur) à votre application. En outre, image-picker vous permet de sélectionner un fichier parmi ceux disponibles sur l'appareil, tandis que, comme dans le cas de l'appareil photo, une application distincte est lancée, après quoi l'objet sélectionné est renvoyé à votre application.
Ici vous pouvez voir la source .
appareil photo
1. Ajoutez le plugin à notre projet selon les instructions
Paramètres supplémentaires pour le système d'exploitation
iOS
Ajoutez les lignes suivantes à ios/Runner/Info.plist :
<key>NSCameraUsageDescription</key> <string>Access to Camera</string> <key>NSMicrophoneUsageDescription</key> <string>Access to Microphone</string>
Android
Assurez-vous que la version minimale d'Android sdk dans le fichier android/app/build.gradle 21 .
minSdkVersion 21
Toutes les autorisations nécessaires seront demandées au démarrage de l'application.
Travail sur les émulateurs
Dans le cas d' iOS, nous ne pouvons pas vérifier la caméra sur l'émulateur, nous avons besoin d'un appareil "live".
Android génère une maquette (voir l'image ci-dessous), qui remplace ce que voit l'objectif de la caméra.
Si vous ne voulez pas regarder la fiche standardDans les paramètres de l'émulateur, sélectionnez Paramètres avancés et définissez VirtualScene pour la caméra arrière.
Nous redémarrons l'émulateur. Maintenant, la caméra "montre" la pièce virtuelle, qui peut être déplacée avec la souris et wasd.
Merci à Tonn_Tamerlan pour l'astuce.
2. Nous passons au code. Nous obtenons d'abord toutes les caméras disponibles en utilisant la fonction availableCameras .
final cameras = await availableCameras();
Cette fonction renverra un tableau de descriptions ( List<CameraDescription> ) des caméras disponibles, où chaque élément contiendra le nom de la caméra (il peut simplement s'agir d'un index), le type (arrière, avant, externe) et l'angle selon lequel la photo doit être pivotée pour être affichée dans leur orientation.
Pour contrôler la caméra, nous avons besoin d'un contrôleur d'objet tel que CameraController , pour déterminer lequel vous devez spécifier l'une des descriptions et résolutions de caméra reçues (faible, moyenne, élevée).
void _setCameraController(CameraDescription cameraDescription) async { _controller = CameraController(cameraDescription, ResolutionPreset.medium); ... await _controller.initialize(); ... if (mounted) { setState(() {}); } }
Ensuite, nous initialisons le contrôleur et après nous être assurés que le widget est "vivant", nous mettons à jour l'état de ce widget. ( texte de fonction )
Nous passons le contrôleur initialisé au widget CameraPreview
AspectRatio( aspectRatio: _controller.value.aspectRatio, child: CameraPreview(_controller))
CameraPreview est basé sur le widget Texture , qui est responsable de l'affichage d'une image de la caméra. Ses dimensions sont déterminées par le parent, donc le widget AspectRatio , qui détermine la taille de l'enfant dans un certain rapport d'aspect, est une bonne approche. Nous obtenons le rapport du contrôleur _controller.value.aspectRatio . En conséquence, dans l'interface, nous obtenons une image dans l'interface
Vue de l'application après l'initialisation du contrôleur 3. Nous pouvons maintenant prendre une photo ou tourner une vidéo.
a. Nous prenons une photo ( texte de fonction ) en utilisant la takePicture(String path) . Il prend une photo et enregistre le long du chemin spécifié.
Future<void> _takePhoto(BuildContext context) async { ... await _controller.takePicture(filePath); ... }
Pour obtenir le chemin, nous avons besoin du plugin officiel path_provider et de sa méthode getApplicationDocumentsDirectory , qui renverra un répertoire privé. Ensuite, nous déterminons le nom du répertoire à goûter, si nécessaire, créez-le et sélectionnez le nom du fichier:
final Directory extDir = await getApplicationDocumentsDirectory(); final String dirPath = '${extDir.path}/Pictures/flutter_camera'; await Directory(dirPath).create(recursive: true); final String filePath = '$dirPath/${_getTimestamp()}.jpg';
Avant de prendre une photo, il est conseillé de vérifier que le contrôleur est initialisé et que la photo n'est plus prise.
if (!_controller.value.isInitialized) { return null; } ... if (_controller.value.isTakingPicture) { return null; }
La photo a été prise, nous avons un moyen d'y arriver, ce serait bien de voir. En utilisant le widget Image standard, l'objet File et le chemin du fichier, nous affichons l'image à l'écran.
Image.file(File(filePath))
Conclusion de l'image reçue b. Lors de l'enregistrement vidéo ( texte de fonction ), nous avons besoin de deux fonctions: startVideoRecording(String filePath) et stopVideoRecording() .
Future<void> _startVideoRecording() async { ... await _controller.startVideoRecording(filePath); ... } Future<void> _stopVideoRecording(BuildContext context) async { ... await _controller.stopVideoRecording(); ... }
startVideoRecording écrit une vidéo et l'enregistre selon le chemin spécifié (obtenu selon le même principe qu'avec une photo), stopVideoRecording termine simplement le processus d'enregistrement. Avant de commencer l'enregistrement, assurez-vous que la prise de vue n'est plus en cours.
if (_controller.value.isRecordingVideo) { return null; }
En conséquence, nous avons une vidéo enregistrée et un chemin d'accès. Pour le lire, vous aurez besoin du plugin video_player . Tout le code associé à la lecture de la vidéo, extrait dans un fichier séparé.
Enregistrez et jouez dans l'interface
sélecteur d'images
1. Ajoutez le plugin à notre projet selon les instructions
Paramètres supplémentaires pour le système d'exploitation
iOS
Ajoutez les lignes suivantes à ios/Runner/Info.plist :
<key>NSCameraUsageDescription</key> <string>Access to Camera</string> <key>NSMicrophoneUsageDescription</key> <string>Access to Microphone</string> <key>NSPhotoLibraryUsageDescription</key> <string>Access to PhotoLibrary</string>
Travail sur les émulateurs
Dans iOS, nous ne pouvons pas vérifier la caméra sur l'émulateur, nous avons besoin d'un appareil "en direct".
2. Le image-picker utilise une application standard pour créer des photos / vidéos ou afficher des fichiers. Pour démarrer l'application souhaitée, vous devez utiliser la fonction pickImage pour la photo ou pickVideo et spécifier le paramètre source.
... final File video = await ImagePicker.pickVideo(source: ImageSource.camera); final File photo = await ImagePicker.pickImage(source: ImageSource.gallery);
Galerie et appareil photo Notre application reçoit le fichier sélectionné, mais si rien n'a été sélectionné, null sera retourné. Pour afficher des photos et des vidéos, nous utilisons les mêmes approches que dans le cas du plugin camera . Pour les images, le widget Image - cette fois, vous n'avez pas besoin de l'envelopper dans File , car nous avons initialement reçu un objet de ce type.
Image.file(photo)
Pour le plugin vidéo video_player . Tout le code associé à la lecture de la vidéo, extrait dans un fichier séparé.
Conclusion
Comme vous pouvez le voir, image-picker nettement plus facile à utiliser et fonctionne très bien lorsque vous avez juste besoin de transférer une image ou une vidéo vers une application. camera nous fournit également toutes les fonctionnalités nécessaires pour personnaliser le travail de l'utilisateur avec la caméra dans votre application.
Merci d'avoir lu!