Menu

Usando la cámara con Ionic, en 4 pasos.

nativedemos - October 27, 2017 por Nicolas Molina | Edita este Post.
ionic3.9.2ionic-native4.5.2ionic-app-scripts3.1.7cordova-cli8.0.0ionic-cli3.19.0

En este artículo conectar una aplicación de ionic con el recurso nativo de la cámara con ionic native y ver varias de las opciones que nos ofrece ionic para manipular la cámara.

Actualización (29/12/2017)


Hemos actualizado este demo con el último release [Ionic 3.9]


Paso 1: Iniciando el proyecto

Lo primero que haremos será iniciar un nuevo proyecto con ionic, vamos a nuestra terminal y ejecutamos:

ionic start demo102 blank --cordova

Ionic crea una carpeta con el nombre del proyecto, nuestro siguiente paso será ubicarnos dentro a la carpeta del proyecto desde nuestra terminal con:

cd demo102

El proyecto inicia con el template blank y por esto tendremos una estructura básica del proyecto, la carpeta en la que vamos a trabajar será src:

Agregamos la plataforma para la que vamos a desarrollar:

ionic cordova platform add android
ionic cordova platform add ios

Paso 2: 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í:

npm install @ionic-native/camera --save

Debemos recordar añadir el provider Camera en el archivo app.module.ts, así:

...
import { Camera } from '@ionic-native/camera';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    ...
    Camera,
    ...
  ]
})
export class AppModule {}

Paso 3: 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 image de tipo string que guardara la imagen, así:

...
import { Camera, CameraOptions } from '@ionic-native/camera';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  image: string = null;

  constructor(
    private camera: Camera
  ) {}

  ...
}

Ahora vamos a crear la función getPicture 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 image, la imagen nos la retorna en Base64 por esto debemos indicar data:image/jpeg;base64, y concatenarlo con la imageData y si algo sale mal se mostrará un error en consola haciendo uso de catch.

 getPicture(){
    let options: CameraOptions = {
      destinationType: this.camera.DestinationType.DATA_URL,
      targetWidth: 1000,
      targetHeight: 1000,
      quality: 100
    }
    this.camera.getPicture( options )
    .then(imageData => {
      this.image = `data:image/jpeg;base64,${imageData}`;
    })
    .catch(error =>{
      console.error( error );
    });
  }

Hay muchas más opciones que podrás encontrar en la documentación de cordova aquí.

La clase completa quedará, así:

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  image: string = null;

  constructor(
    private camera: Camera
  ) {}

  getPicture(){
    let options: CameraOptions = {
      destinationType: this.camera.DestinationType.DATA_URL,
      targetWidth: 1000,
      targetHeight: 1000,
      quality: 100
    }
    this.camera.getPicture( options )
    .then(imageData => {
      this.image = `data:image/jpeg;base64,${imageData}`;
    })
    .catch(error =>{
      console.error( error );
    });
  }
}

Ahora nuestro template home.html, tendremos el botón que ejecutará la función getPicture del controlador y mostraremos la imagen con <img/>, usamos la directiva ngIf para que muestre la imagen solo la imagen es diferente a null.

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Demo 102
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button block (click)="getPicture()">Toma una foto</button>
  <img [src]="image" *ngIf="image" />
</ion-content>

Paso 4: Compilando

Ahora para compilar el código solo tendremos que ejecutar en nuestra terminal (Si tienen el entorno configurada):

ionic cordova run android --prod
ionic cordova run ios --prod

Resultado:


Ver código

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!