Hola comunidad en este post les estaré mostrando como crear una aplicación móvil sencilla donde haremos uso de la cámara de nuestro smartphone o table de android e ios en ionic 4. Veremos dos uso exactamente, primero de ver como tomar una foto y visualizarla en la app, segundo veremos como acceder a la galería para escoger una imagen y posteriormente visualizarla en la app.

Comenzaremos creando nuestro proyecto, teclando en la consola el comando de ionic para crear un proyecto.

ionic strat camara

Luego escogeremos la opción blank.

Agregamos la plataforma para la que vamos a desarrollar:

Instalando el plugin.

Lo siguiente que haremos es agregar el plugin de la cámara en nuestro proyecto con:

Para Android:

Si en el proyecto solo vamos a trabajar con Android el plugin se agrega de la siguiente manera:

ionic cordova plugin add cordova-plugin-camera

Para IOS:

Si queremos dar soporte para IOS, al momento de instalar el plugin debemos describir la razón para acceder a estos recursos así:

ionic cordova plugin add cordova-plugin-camera --variable CAMERA_USAGE_DESCRIPTION="the app need the camera" --variable PHOTOLIBRARY_USAGE_DESCRIPTION="the app need the photolibrary"

Ahora instalamos el provider de Ionic Native para la cámara, así:

Implementando la cámara

Para hacer uso de la cámara debemos inyectar al constructor de HomePage el provider de la Camera, y la declararemos la variable foto de tipo any que guardara la imagen, ademas vamos a crear la función capturarFoto para implementar el uso de cámara, con el uso de this.camera.getPicture lanzamos la cámara del dispositivo, si todo salió bien y toma la fotografía, ejecutará la promesa y que retorna la fotografía tomada y luego se la asignamos a nuestra variable foto, la imagen nos la retorna en Base64por esto debemos indicar data:image/jpeg;base64, y concatenarlo con la imageData:

Posteriormente crearemos la función buscarFoto(), igual que la función anterior, con la diferencia de sola una linea de código, a continuación muestro esa diferencia, en el texto encerrado cambiamos CAMERA por PHOTOLIBRARY para poder acceder a la galería.

Ahora nuestro template home.html, tendremos dos botones,
uno que ejecutará la función capturarFoto() y otro que ejecutará la función buscarFoto() del controlador y mostraremos la imagen con <img/>, usamos la directiva ngIf para que muestre la imagen solo la imagen es diferente a null.