Capture Photos in Ionic with Capacitor Camera: A Practical Guide

Use Capacitor Camera in Ionic to Capture Photos

When building an Ionic app that needs to take pictures, the Capacitor Camera plugin gives a single API that works on iOS, Android, and the web. The core idea is to call Camera.getPhoto() with options, receive a Photo object, and then render or process the image. Below is the practical how‑to, from install to debugging.

Quick Answer

Install @capacitor/camera, add the required native permissions, and use a service like this:

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

export class PhotoService {
  async takePhoto() {
    const photo = await Camera.getPhoto({
      resultType: CameraResultType.Base64,
      quality: 90,
      source: CameraSource.Camera
    });
    return photo;
  }
}

Display the image with <img [src]="photo.webPath">.

How It Works

The plugin bridges JavaScript and native APIs. On iOS and Android it uses the platform camera intent; on the web it falls back to the file‑input element. The returned Photo contains:

• webPath – a URL usable in <img>
• base64String – the raw image data if requested
• dataUrl – a base64 data URI
• filePath – native file path (Android only)

Working Example

1. Install the plugin
   

   npm install @capacitor/camera
       npx cap sync
       

2. Create a service
   

   // photo.service.ts
   import { Injectable } from '@angular/core';
   import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
   
   @Injectable({ providedIn: 'root' })
   export class PhotoService {
     async capture(): Promise<any> {
       const photo = await Camera.getPhoto({
         resultType: CameraResultType.Base64,
         quality: 80,
         source: CameraSource.Camera
       });
       return photo;
     }
   }
   

3. Use in a component
   

   // photo-page.component.ts
   import { Component } from '@angular/core';
   import { PhotoService } from '../services/photo.service';
   
   @Component({
     selector: 'app-photo-page',
     templateUrl: './photo-page.component.html'
   })
   export class PhotoPageComponent {
     photo: any;
   
     constructor(private photoSvc: PhotoService) {}
   
     async onTakePhoto() {
       this.photo = await this.photoSvc.capture();
     }
   }
   

4. Template
   

   <ion-button (click)="onTakePhoto()">Take Photo</ion-button>
   <ion-img *ngIf="photo" [src]="photo.webPath"></ion-img>
   

Platform‑Specific Configuration

Capacitor generates native projects. You must add permission strings before building.

iOS

// ios/App/App/Info.plist
NSCameraUsageDescription
We need camera access to capture photos.

Android

// android/app/src/main/AndroidManifest.xml

After editing, run npx cap sync android to propagate changes.

Common Pitfalls

• Missing Permissions – If NSCameraUsageDescription or android.permission.CAMERA is omitted, the plugin will silently fail or throw an error. Check Logcat or Xcode console for “Permission denied”.
• Wrong quality value – The quality option must be 0–100. Values >100 are clamped to 100, but passing NaN yields a crash on Android.
• Using resultType: CameraResultType.Uri on the web – The web fallback does not support Uri; it returns a data URL instead, causing photo.webPath to be undefined.
• Accessing photo.filePath before the promise resolves – The file path is only available after the async call finishes. Trying to read it earlier will throw a runtime error.
• Large images on the web – Browsers may reject files larger than ~5 MB or exceed memory limits. Prefer quality: 70 and resultType: CameraResultType.Base64 for thumbnails.

Limitations and Edge Cases

• On the web, the plugin uses the <input type="file"> element, which requires a user gesture. Programmatic calls will be blocked by the browser.
• iOS 14+ requires the NSPhotoLibraryAddUsageDescription key if you plan to save captured photos to the library.
• Android 13+ introduces the android.permission.CAMERA_ROLL for saving to the gallery; add it if you implement that feature.
• The CameraSource.Prompt option shows both camera and gallery; on the web it opens the file picker only.
• Memory usage scales with quality and image resolution. For high‑resolution images, consider using CameraResultType.Uri on native platforms and streaming the file to the server.

Verifying Success

1. Run ionic serve and click the button. The browser should open a file picker; select an image and confirm it renders.
2. On a device, run ionic capacitor run ios --livereload or ionic capacitor run android --livereload. Tap the button; the native camera should launch, and the captured photo should appear.
3. Open Xcode or Android Studio logcat. Look for the permission prompt and ensure no error messages like Permission denied appear.
4. Inspect the Photo object in the console: console.log(photo). Verify that webPath is a valid URL and base64String is non‑empty.
5. For production builds, test the app on both iOS and Android devices to confirm that the camera works after the app is installed.

Summary

Capacitor’s Camera plugin simplifies photo capture across platforms, but careful attention to permissions, option values, and platform quirks is essential. By following the installation steps, adding the required native keys, and handling the Photo object correctly, you can deliver a smooth camera experience in your Ionic app.