Menu

Usando la cámara con Ionic 2

nativedemosionic2 - July 11, 2016 por Nicolas Molina
ionic2.0.0-rc2

En los últimos artículos hemos visto una introducción a Ionic 2 y como crear un hola mundo con Ionic 2, ahora vamos hacer uso de ionic native para usar la cámara del dispositivo y tomar una fotografía.

Actualización (06/11/2016)


Hemos actualizado este demo con el último release de Ionic 2 RC 2, si aun estas en alguna de las versiones Beta puedes seguir estos pasos Steps to Upgrade.


Paso 1: Iniciando el proyecto

Lo primero que haremos será iniciar un nuevo proyecto con ionic, si no lo recuerdas puedes ver esto con mas detalle en la Introduccion a Ionic 2. Vamos a nuestra terminal y ejecutamos:

ionic start demo102 blank --v2

Ahora entramos a la carpeta del proyecto desde nuestra terminal con:

cd demo102

Como iniciamos nuestro proyecto con el template blank tendremos una estructura básica del proyecto, la carpeta en la que vamos a trabajar sera src:

Agregamos la plataforma para la que vamos a desarrollar:

ionic platform add android

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

ionic plugin add cordova-plugin-camera

Ahora por buena práctica cada vez que agreguemos un plugin, iremos guardando el estado de la aplicación con:

ionic state save

Esto lo que hará, es actualizar el archivo de package.json con las dependencias del proyecto

Paso 2: Implementando la cámara

Hace poco hablamos sobre ionic-native y ahora sera mas facil el consumo de cualquier API nativa con el uso de esta, ahora vamos nuestro archivo home.ts y implementaremos el uso de la cámara de esta manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import {Component} from '@angular/core';
import {Camera} from 'ionic-native';

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

  image: string;

  constructor() {}

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

En la línea 2 importamos la cámara desde ionic-native, luego en la línea 10 tendremos la variable image de tipo string que guardara la imagen, en la línea 12 dejaremos un constructor vacío, ahora desde la línea 14 a la línea 28 tendremos la definición de getPicture para implementar el uso de cámara.

En la línea 15 definimos las opciones al momento de tomar la fotografía, estas opciones las podrás encontrar en la documentación de cordova aquí. Luego con el uso de Camera.getPicture lanzamos la cámara del dispositivo, si todo salió bien y toma la fotografía, ejecutará la promesa y en la línea 22 la fotografía tomada 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.

Veamos ahora nuestro template home.html:

1
2
3
4
5
6
7
8
9
10
11
12
<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>

En la línea 10 tendremos el botón que ejecutará la función getPicture del controlador y en la línea 11 mostraremos la imagen, usamos la directiva ngIf para que muestre la imagen solo si ya tomamos la fotografía.

Paso 3: Compilando

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

ionic build android

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

Resultado:


Ver demo

Recuerda:

Si quieres ejecutar este demo un 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 state restore

esto es para descargar todas las dependencias del proyecto.


¿Quieres saber más? Suscríbete a nuestro Newsletter o únete a nuestro canal en Slack y mantente atento. Espero sea de utilidad y sigan programando :)

Por: Nicolas Molina

¡Compártelo!

Nunca te pierdas una Noticia.