The Camera Plugin

Learn how to use the Awesome Cordova Plugins Camera plugin in a simple Ionic app.

Camera

Now that we’ve covered the basics of plugins and their management, let’s look at an example of how we can use selected Cordova plugins within our Ionic apps.

One of the handiest features of modern smartphones is the ability to effortlessly capture photographs and record videos via the built-in camera device.

We’ll use the Awesome Cordova Plugins Camera plugin to implement image capture functionality in a brand new app.

Installing the plugin

We start by running the following commands:

ionic start photo-app blank --type=angular
cd photo-app
ionic cordova platform add ios
ionic cordova platform add android
ionic cordova plugin add cordova-plugin-camera
npm install --save @awesome-cordova-plugins/camera
ionic g service services/pictures

Here, we’ve simply performed the following steps:

  • Created a new Ionic project called photo-app that uses a blank project template.
  • Added the iOS and Android platforms.
  • Installed the Awesome Cordova Plugins Camera plugin and associated NPM package along with the core Awesome Cordova Plugins package.
  • Create a pictures service which we’ll use to manage the camera plugin methods.

Rooting the plugin

Our next step will be to update the project root module with the recently installed Awesome Cordova Plugins Camera plugin.

In the photo-app/src/app/app.module.ts root module, we make the following amendments (highlighted):

Get hands-on with 1200+ tech skills courses.