Trabaja con la cámara en Flutter

La capacidad de usar la cámara existe en muchas aplicaciones, y todos la usamos regularmente. En Flutter, podemos implementar el trabajo con la cámara utilizando dos complementos oficiales:

• camara
• selector de imagen

Hay una diferencia notable entre ellos, y vale la pena usarlos de acuerdo con la situación:

• camera permite interactuar con las cámaras disponibles para el dispositivo desde su aplicación y mostrar la imagen en el widget. Es adecuado para tareas en las que necesita "personalizar" el funcionamiento de la cámara para la aplicación.
• image-picker inicia la aplicación de la cámara y devuelve un objeto de tipo File ( File imagen o video seleccionado por el usuario) a su aplicación. Además, image-picker permite seleccionar un archivo de los disponibles en el dispositivo, mientras que, como en el caso de la cámara, se inicia una aplicación separada, después de lo cual el objeto seleccionado se devuelve a su aplicación.

Aquí puedes ver la fuente .

camara

1. Agregue el complemento a nuestro proyecto de acuerdo con las instrucciones

Configuraciones adicionales para OS
iOS
Agregue las siguientes líneas a ios/Runner/Info.plist :

 <key>NSCameraUsageDescription</key> <string>Access to Camera</string> <key>NSMicrophoneUsageDescription</key> <string>Access to Microphone</string> 

Android
Asegúrese de que la versión mínima de Android SDK en el archivo android/app/build.gradle 21 .

 minSdkVersion 21 

Se solicitarán todos los permisos necesarios cuando se inicie la aplicación.

Trabaja en emuladores
En el caso de iOS, no podemos verificar la cámara en el emulador, necesitamos un dispositivo "en vivo".
Android genera un simulacro (ver imagen a continuación), que reemplaza lo que ve la lente de la cámara.

2. Pasamos al código. Primero obtenemos todas las cámaras disponibles usando la función Cámaras availableCameras .

 final cameras = await availableCameras(); 

Esta función devolverá una serie de descripciones ( List<CameraDescription> ) de cámaras disponibles, donde cada elemento contendrá el nombre de la cámara (puede ser solo un índice), tipo (posterior, frontal, externo) y el ángulo con el que desea rotar la foto para que aparezca en su orientación

Para controlar la cámara, necesitamos un controlador de objetos como CameraController , para determinar cuál necesita especificar una de las descripciones y la resolución de la cámara recibida (baja, media, alta).

 void _setCameraController(CameraDescription cameraDescription) async { _controller = CameraController(cameraDescription, ResolutionPreset.medium); ... await _controller.initialize(); ... if (mounted) { setState(() {}); } } 

A continuación, inicializamos el controlador y después de asegurarnos de que el widget está "vivo", actualizamos el estado de este widget. ( texto de función )

Pasamos el controlador inicializado al widget CameraPreview

  AspectRatio( aspectRatio: _controller.value.aspectRatio, child: CameraPreview(_controller)) 

CameraPreview se basa en el widget Texture , que se encarga de mostrar una imagen de la cámara. Sus dimensiones están determinadas por el padre, por lo que el widget AspectRatio , que determina el tamaño del niño en una determinada relación de aspecto, es un buen enfoque. Obtenemos la proporción del controlador _controller.value.aspectRatio . Como resultado, en la interfaz obtenemos una imagen en la interfaz

3. Ahora podemos tomar una foto o grabar un video.
a. Tomamos una foto ( texto de función ) utilizando el takePicture(String path) . Toma una foto y la guarda a lo largo de la ruta especificada.

 Future<void> _takePhoto(BuildContext context) async { ... await _controller.takePicture(filePath); ... } 

Para obtener la ruta, necesitamos el complemento oficial path_provider y su método getApplicationDocumentsDirectory , que devolverá un directorio privado. A continuación, determinamos el nombre del directorio a probar, si es necesario, lo creamos y seleccionamos el nombre del archivo:

  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'; 

Antes de tomar una foto, es recomendable verificar que el controlador se haya inicializado y que la foto ya no se tome.

 if (!_controller.value.isInitialized) { return null; } ... if (_controller.value.isTakingPicture) { return null; } 

La foto fue tomada, tenemos un camino, sería agradable verla. Usando el widget de Image estándar, el objeto File y la ruta del archivo, mostramos la imagen en la pantalla.

 Image.file(File(filePath)) 

b. Al grabar video ( texto de función ), necesitamos dos funciones: startVideoRecording(String filePath) y stopVideoRecording() .

 Future<void> _startVideoRecording() async { ... await _controller.startVideoRecording(filePath); ... } Future<void> _stopVideoRecording(BuildContext context) async { ... await _controller.stopVideoRecording(); ... } 

startVideoRecording escribe un video y lo guarda de acuerdo con la ruta especificada (obtenida por el mismo principio que con una fotografía), stopVideoRecording simplemente finaliza el proceso de grabación. Antes de comenzar a grabar, asegúrese de que el disparo ya no esté en progreso.

 if (_controller.value.isRecordingVideo) { return null; } 

Como resultado, tenemos un video guardado y una ruta hacia él. Para jugarlo, necesitarás el complemento video_player . Todo el código asociado con la reproducción del video, sacado en un archivo separado.

selector de imagen

1. Agregue el complemento a nuestro proyecto de acuerdo con las instrucciones

Configuraciones adicionales para OS
iOS
Agregue las siguientes líneas a 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> 

Trabaja en emuladores
En iOS, no podemos comprobar la cámara en el emulador, necesitamos un dispositivo "en vivo".

2. image-picker utiliza una aplicación estándar para crear fotos / videos o ver archivos. Para iniciar la aplicación deseada, debe usar la función pickImage para la foto o pickVideo y especificar el parámetro de origen.

 ... final File video = await ImagePicker.pickVideo(source: ImageSource.camera); final File photo = await ImagePicker.pickImage(source: ImageSource.gallery); //  pickImage        ,       ... 

Nuestra aplicación recibe el archivo seleccionado, pero si no se seleccionó nada, se devolverá null . Para mostrar imágenes y videos, utilizamos los mismos enfoques que en el caso del complemento de la camera . Para las imágenes, el widget Imagen: esta vez no es necesario que lo envuelva en File , ya que inicialmente recibimos un objeto de este tipo.

 Image.file(photo) 

Para el complemento de video video_player . Todo el código asociado con la reproducción del video, sacado en un archivo separado.

Conclusión

Como puede ver, image-picker notablemente más fácil de usar y funciona muy bien cuando solo necesita transferir una imagen o video a una aplicación. camera también nos proporciona todas las funciones necesarias para personalizar el trabajo del usuario con la cámara en su aplicación.
Gracias por leer!