Ionic Camera - Cómo usarla con ejemplos incluidos

¿Pensando en incluir funcionalidades de cámara en tu app Ionic con el compomente Ionic Camera? O, talvez, ya sabes cómo se utiliza pero te falta conocer algún detalles sobre él para dejarlo cómo tu quieres ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014. Y en este artículo aprenderás cómo puedes utilizar la cámara del dispositivo en tu aplicación con el plugin Ionic Camera.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Cómo instalar el módulo de cámara

En primer lugar, como sucede con la mayoría de los módulos externos, tenemos que instalar, por un lado, el plugin de cordova y, por otro lado, el módulo TypeScript que nos permitirá la comunicación.

ionic cordova plugin add cordova-plugin-camera
npm install @awesome-cordova-plugins/camera

Antes de continuar, realizo una anotación: Para poder hacer uso de este módulo en IOS 10 o posteriores necesitamos solicitar los permisos necesarios. Para esto vamos a hacerlo agregando a nuestro archivo .xml de configuración las siguientes líneas:

<config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist"> 
    <string>You can take photos</string>
</config-file>

Siendo la cadena "You can take photos" la cadena que aparecerá cuando se soliciten los permisos para poder usar la cámara en iOS. Y tiene que colocarse dentro de la etiqueta:

<platform name='ios>

Que es la que nos permite configurar los ajustes de la plataforma iOS.

Y para terminar la instalación tenemos que agregar el componente a los providers de nuestra clase:

...
import { CameraModule } from "@awesome-cordova-plugins/camera/ngx"

...

providers: [
    .....,
    CameraModule,
    .....
]

...

Plataformas que soporta

 Aunque suene un poco rara la lista que te voy a mostrar a continuación después explicaré el cómo y el porque de dos de ellas.

• Android
• iOS
• Browser
• Windows

Como puedes comprobar, las dos últimas líneas son un poco extrañas ¿verdad? Pues sí, lo son. Pero como los chicos de Ionic piensan en todo, tenemos disponible la posibilidad de usar la web cam dentro del módulo. La verdad que es interesante.

Cómo se usa la cámara en Ionic con ejemplo

En primer lugar, como nos gusta a todos, vamos a ver un ejemplo de cómo tenemos que codificar nuestra clase para que podamos hacer un uso correcto del componente. Vamos allá.

import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx';

constructor(private camera: Camera) { }

...


const options: CameraOptions = {
  quality: 100,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
}

this.camera.getPicture(options).then((imageData) => {
 // imageData es una cadena que contiene la ruta del archivo
 let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
 // controlar el error.
});

La verdad que el ejemplo es sencillo, pero es lo que nos hace falta para aprender. Después iremos avanzando el ejemplo para darle más funcionalidad.

En primer lugar, tenemos que importar, a diferencia de la mayoría, 2 clases. La primera será “Camera” y la segunda “CameraOptions”.

Posteriormente tenemos que inyectar en el constructor una instancia de “Camera” para que la podamos utilizar en nuestra clase en cuestión. Sencillo…

Ahora, vamos a configurar unos ajustes iniciales que les vamos a dar a la cámara. Para ello vamos a utilizar “CameraOptions” que no es otra cosa que una interface con unos campos por defecto que podemos alterar para después pasárselo a nuestra “camera” y que los use.

Ahora que ya tenemos los parámetros terminados y ajustados como nosotros queremos, basta con que llamando a la función “getPicture” de la instancia de “Camera” que hemos inyectado y pasarle la instancia de “CameraOptions” que hemos creado en el paso anterior para que la cámara se abra con los parámetros que le hemos pasado.

Esta función devuelve una promesa que tenemos que controlar. El “then” de la promesa, que se ejecutará cuando se haya tomado correctamente la captura, traerá consigo, como parámetro, los datos de la imagen. En este caso traerá la ruta donde se ha guardado el snapshoot.

Pero recordemos que también tendremos que controlar el error. Si no, no estaríamos incurriendo en las buenas prácticas de la programación actual.

Pues con todo esto ya hemos terminado de comprender como se usa de manera sencilla. Ahora vamos a ver hasta donde la podemos llevar.

Campos propios

Ahora vamos a ver los campos que tiene internamente nuestra clase cámara y para que vale cada uno.

DestinationType

Este es un campo de la clase CameraOptions que nos permite definir en qué formato queremos recuperar la información de la imagen. Estos formatos está disponibles en: “Camera.DestinationType.*”

EncodingType

Muy similar al anterior, nos sirve para decirle al sistema en qué tipo de formato queremos que se nos devuelva la imagen. Los formatos están disponibles en:

“Camera.EncodingType.*”

MediaType

Este campo es para decirle a la aplicación que tipo de uso le vas a dar a la cámara. Por ejemplo, vídeo o foto. Los parámetros están disponibles en:

“Camera.MediaType.*”

PictureSourceType

En caso de que queramos definir explícitamente que cámara queremos usar se la daremos con este campo. Sea la frontal, principal, etc…

Y bueno, hay alguno más pero no me ha parecido conveniente incluirlos.

Ahora vamos con más cositas

Funciones de Camera en Ionic

Ahora vamos a ver de qué funciones disponemos para darle leña a nuestro componente.

getPicture(options)

Esta es la función que hemos visto en el ejemplo y es la que nos permite abrir la aplicación de cámara definida en el sistema para poder utilizarla de manera implícita en nuestra aplicación.

• Options -> Es la instancia de “CameraOptions” que hemos construido en el ejemplo.

Retorna una promesa que tenemos que controlar y que en el “then” de esta traerá, por regla general, los datos de la foto en caso de que todo haya ido correctamente.

cleanup()

Esta función solo está permitida en iOS y nos permite limpiar el buffer de datos que nos aporta la cámara cuando hacemos la foto. Digamos que limpia la memoria posteriormente después de usar la cámara.

Devuelve una promesa que tenemos que controlar para saber si todo se ha realizado correctamente.

Y ya está, solo tenemos esta funcionalidad. Aunque no hace falta nada más, todo se realizado de manera transparente para el usuario y tenemos lo que necesitamos, la captura que acabamos de realizar.

Camera Options

Ahora vamos a especificar un poco más, para aquellos que hayan venido buscando un poco más de información adicional, la configuración fuerte que podemos agregar sobre la cámara.

• quality -> number -> La calidad con la que se va a realizar la captura. Disponible un rango entre 0 y 100 y por defecto son 50.
• destinationType -> number -> Aquí podemos elegir el formato en que queremos que se nos devuelvan los datos de la imagen. Antes hemos visto donde se alojaban. Por defecto será FILE_URI.
  • FILE_URI -> Nos retornará la ruta interna del sistema donde está alojada la foto.
  • DATA_URL -> Nos devolverá la imagen dentro de una cadena codificada en base64.
  • NATIVE_URI -> Nos retornada la ruta interna del sistema dependiente de la plataforma en la que se esté ejecutando. Por ejemplo, assets-library:// en IOS o content:// en Android.
• sourceType -> number -> Nos permite definir donde se guardará la imagen dentro de nuestro dispositivo, por defecto será CAMERA:
  • PHOTOLIBRARY
  • CAMERA
  • SAVEDPHOTOALBUM
• allowEdit -> boolean -> Muy interesante esta opción porque nos permitirá realizar una breve edición de la imagen sin tener que tocar ni una línea de código.
• encodingType -> number -> Nos permite definir el formato de salida de la imagen, por defecto JPEG:
  • JPEG
  • PNG
• targetWidth -> number -> Nos permite definir, en pixeles, cual será el ancho de la imagen. Recuerda que, para utilizar este atributo de manera correcta, y que las imágenes no se vean deformadas, tenemos que asignar también en alto de manera que respetemos el ratio de aspecto.
• targetHeight -> number -> La altura que tendrá la imagen final, como hemos comentado en el punto anterior, cuadrarla para que la relación de aspecto sea la correcta.
• correctOrientation -> boolean -> No rota la imagen final para que se ajuste correctamente al dispositivo durante la captura.
• savedToPhotoAlbum -> boolean -> Guarda la captura en el álbum de fotos del dispositivo en caso de que sea verdadero.
• cameraDirection -> number -> Selecciona la cámara a usar por defecto BACK.
  • BACK
  • FRONT

Y el tutorial en video

Como se que algunos de vosotros no les gusta leer, aunque lo recomiendo encarecidamente, por aquí te dejo un tuto en el que puedes aplicar el ejemplo de una forma rápida.

Algo más que quizás te interese

Tu logos deberían de ser una de las partes más importantes en tu estrategia de ASO para tus apps. Si mejoras tu logo recibirás más descargas, y por extensión ganarás más dinero. Por esta razón, hemos creado esta herramienta. Una herramienta para evaluar, puntuar y mejorar tus logos con IA. No te espoileo más, entra en el enlace.

Y sin nada más que agregar, nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!