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 abase64
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 ๐