Use the native camera in Ionic with Capacitor

Libraries and Versions

Last Reviewed: Nov 10, 2020

We're going to use capacitor to communicate with the native layer of the phone. In this example, we'll use the Camera API to be able to take pictures with the phone's camera.

You can find capacitor's official docs here, but I'll do my best to explain every bit we need to get our functionality ready.

Let's start with understanding a bit more about capacitor and its role in mobile development. The easiest way to "get it" is by seeing it as a replacement for Cordova.

Capacitor allows you to wrap your app into a native container and helps you communicate with the phone's native capabilities. You can use it to create a native build of your application (iOS and Android).

Configuring Capacitor

Before we start working with capacitor, let's take a moment to remove the @ionic-native packages, open the terminal and type:

npm rm @ionic-native/core @ionic-native/splash-screen @ionic-native/status-bar

Capacitor has working APIs to replace those plugins, so there's no need to keep them installed anymore.

After you uninstall them, you'll have to remove them from 3 different places:

• The app.component.ts file.
• The app.module.ts file.
• The app.component.spec.ts file.

Now, let's start working with capacitor.

The first thing we need to do to 'activate' capacitor is to enable it through the Ionic CLI, so open your terminal (while inside of the project's folder) and type:

ionic integrations enable capacitor

It will create the necessary files and install the capacitor packages, one thing to keep in mind, it creates a file called capacitor.config.json where you need to go and edit your appId.

By default, it sets it up to be io.ionic.starter, It's a good idea to change it to something more on-brand. The usual convention is to go with com.myDomainName.myProjectName so I'll name it com.javebratt.myApp.

Before adding the android/ios platforms, we need to generate a build of our project, or else capacitor will have unexpected errors.

Open your terminal and type:

ionic build

That command will generate a build of our application inside the www/ folder, which is the folder Capacitor is watching.

> SIDE-NOTE: That command generates a development build. If you want to create a production build for your application, add the --prod flag.

Now we can add our platforms. You can add either iOS or Android by using the commands:

ionic cap add ios
ionic cap add android

Remember that you need XCode installed on a Mac to build for iOS. Once you add your platforms, it's time to sync them and copy them over the build to the platform's respective folder. You do that by opening up the terminal and typing:

ionic cap sync

Using the Camera API

Now capacitor is ready to use, and we'll, and we'll start by connecting the camera API.

In this part of the lesson, you'll learn how to take pictures with the phone's camera.

For using the camera API the first thing we need is to import capacitor in the file we're using:

import { Plugins, CameraResultType } from '@capacitor/core';
const { Camera } = Plugins;

Then you can create a function that takes the picture:

async takePicture() {
  try {
    const profilePicture = await Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.Base64,
    });
    this.guestPicture = profilePicture.base64String;
  } catch (error) {
    console.error(error);
  }
}

• The line Camera.getPhoto({}); opens up the camera for you to take the picture, you can see all the properties here.
• And profilePicture.base64String returns a base64 string of the picture (I did the PR that made that happen :P)

And that's it. You can use that base64 string to upload to your favorite storage provider, in the next lesson we'll see how to upload it to Firebase Cloud Storage.

But Jorge, you said it was going to work on the web

Heck yeah, you can! That's the beauty of using Capacitor.

Some Capacitor plugins, such as Camera, have web-based UI available when not running natively.

For example, calling Camera.getPhoto() will load a responsive photo-taking experience when running on the web.

To enable these controls, you must add @ionic/pwa-elements to your app.

For that, the first thing to do is to stop our ng serve or ionic serve.

Then in the terminal, you type:

npm install @ionic/pwa-elements

And then go into the main.ts file and define the custom elements:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from '@ionic/pwa-elements/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.log(err));

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

And that is it. Now you have a fully functional way of capturing photos with your camera.

Do let me know in the comments if there are any questions 😃