Menu

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

nativedemos - May 11, 2017 por Nicolas Molina
ionic3.3.0ionic-native3.10.3ionic-app-scripts1.3.7cordova-cli7.0.1ionic-cli3.3.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 (01/05/2017)


Hemos actualizado este demo con el último release de Ionic 3, si aún estas en alguna de las versiones anteriores puedes seguir estos pasos de Ionic 2 a Ionic 3.

Ademas en este demo usamos la función de lazy loading y @IonicPage. Puedes ver el repositorio Demo102


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

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 declraremos 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

En el caso que no tegamos la computadora configurada podrán usar el servicio de ionic package para generar el apk (deben crear una cuenta en ionic.io):

ionic package build android --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

Y luego

ionic cordova prepare

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!