5: Acceder a la Cámara

Objetivo

Acceder a la cámara del dispositivo y tomar una foto.

Editar home.page.html

Abre src/app/home/home.page.html y agrega el siguiente contenido:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Acceso a la Cámara
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-button expand="full" (click)="takePicture()">Tomar Foto</ion-button>
  <div *ngIf="photo">
    <img [src]="photo" />
  </div>
</ion-content>

Editar home.page.ts

Abre src/app/home/home.page.ts y agrega la siguiente lógica:

import { Component } from '@angular/core';
import { Camera, CameraResultType } from '@capacitor/camera';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  photo: string | undefined;

  constructor() {}

  async takePicture() {
    const image = await Camera.getPhoto({
      resultType: CameraResultType.DataUrl,
    });
    this.photo = image.dataUrl;
  }
}

Conceptos Básicos

El plugin de la cámara de Capacitor permite acceder a la cámara del dispositivo y tomar fotos. La foto se puede mostrar en la aplicación utilizando la propiedad dataUrl.

Ejercicio

Implementa la funcionalidad para tomar una foto utilizando la cámara del dispositivo y mostrarla en la aplicación. Verifica que la foto se muestre correctamente después de tomarla.