Mastering Mobile Application Development with Ionic/

...

/

Using Capacitor Plugins

Using Capacitor Plugins

Learn how to use the Capacitor Camera plugin within a sample Ionic application.

We'll cover the following...

Now that we are familiar with both the Capacitor CLI and using the Plugin API, let’s build a sample Ionic application that uses the Capacitor Camera Plugin.

Initial steps

Using the CLI, we create the following Ionic project:

ionic start photo-app blank --type=angular 
cd ./photo-app/

Next, we’ll create a custom service that will be used to manage the Capacitor Camera Plugin API methods, which we store in a subdirectory titled services that will be created as part of the CLI command:

ionic g service services/pictures

Initializing Capacitor

Following from this, we’ll initialize Capacitor (using photosApp as the app name and com.masteringIonic.photos as the app ID), add Android/iOS native platforms, and install the PWA Elements package:

npx cap init photosApp com.masteringIonic.photos
ionic build
npx cap add android
sudo gem install cocoapods
npx cap add ios
npm install @ionic/pwa-elements --save

Our initial configuration is now in place, so we can turn our attention towards developing the actual functionality for the application.

Picture this

Let’s start by amending the src/app/services/pictures.service.ts service as follows (amendments highlighted):

Press + to interact
/**
 * PicturesService
 *
 * This class uses the Capacitor API to interact with the device camera and
 * photolibrary to capture images for rendering to the application 
 */
import { Injectable } from '@angular/core';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { DomSanitizer } from '@angular/platform-browser';
@Injectable({
  providedIn: 'root'
})
export class PicturesService {
  /**
   * Creates an instance of PicturesService.
   */
  constructor(private sanitizer: DomSanitizer) { }
  /**
   * Uses the Capacitor getPhoto method to capture images using the device camera
   */
  public async selectImageWithCamera(): Promise<any> {
    const image: any = await Camera.getPhoto({
      quality: 100,
      allowEditing: true,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Camera
    });
    return this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
  }
  /**
   * Uses the Capacitor getPhoto method to capture images using the device photolibrary
   */
  public async selectPhotoFromLibrary(): Promise<any> {
    const image: any = await Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.Uri
    });
    return image.webPath;
  }
}

Within our PicturesService class, we import the necessary Capacitor plugin APIs followed by the DomSanitizer class from the Angular platform-browser package. This will be used to sanitize data that we capture through the Camera plugin API.

We then define two methods - selectImageWithCamera on ...