Capture Photos in Ionic with Capacitor Camera Plugin: A Step‑by‑Step Guide

Desired outcome

Take a picture using the device camera and show it inside an Ionic web view, working on both iOS and Android without writing native code.

Prerequisites

• Node ≥ 18 and npm (or yarn) installed.
• Ionic CLI (npm i -g @ionic/cli).
• An existing Ionic project (Angular, React, or Vue) with @capacitor/core already added.
• Native tooling: Xcode 15+ for iOS, Android Studio Koala+ with SDK 34 for Android.
• Camera permission keys configured in the native projects (see Permission configuration below).

Permission configuration

iOS

Open ios/App/App/Info.plist and add:

<key>NSCameraUsageDescription</key>
<string>This app needs camera access to capture photos.</string>

Android

Edit android/app/src/main/AndroidManifest.xml inside the <manifest> element:

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="false" />

The required="false" flag lets the app run on devices without a camera (e.g., some tablets) while still requesting the permission when hardware exists.

Focused procedure

1. Install the Camera plugin
   Run in the project root (where package.json lives):
   

   npm i @capacitor/camera
   npx cap sync

   npx cap sync copies web assets to each native project and updates the native Gradle / CocoaPods files. It must be run after every plugin install or native config change.

2. Add a capture button and image placeholder
   In an Ionic page component (example uses Angular syntax; adapt for React/Vue):
   

   <ion-button (click)="takePhoto()" expand="block">Take photo</ion-button>
   <ion-img *ngIf="photo" [src]="photo" alt="Captured photo"></ion-img>

3. Implement the capture logic
   

   import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
   
   async takePhoto() {
     try {
       const image = await Camera.getPhoto({
         quality: 90,
         allowEditing: false,
         resultType: CameraResultType.Uri,   // returns a safe file:// or capacitor:// URI
         source: CameraSource.Camera
       });
       // image.webPath is a URL the web view can render directly
       this.photo = image.webPath;
     } catch (err) {
       // Handle permission denial, no camera hardware, or user cancel
       console.error('Camera error', err);
       this.handleCameraError(err);
     }
   }

   Using CameraResultType.Uri avoids loading large base‑64 strings into memory. If you need a base‑64 string (e.g., for upload), switch to CameraResultType.Base64 and be aware of the memory impact.

4. Run on a device or emulator
   Open the native IDEs:
   

   npx cap open ios   # opens Xcode
   npx cap open android # opens Android Studio

   Build and run on a physical device (recommended) or an emulator/simulator that has a camera backend.

Expected checks

• The Camera.getPhoto promise resolves with an object containing webPath (or base64String).
• The <ion-img> renders the captured photo without CORS or mixed‑content warnings.
• At runtime the system permission dialog appears on first use; subsequent calls use the granted state.
• npx cap sync finishes with no errors, and the native builds succeed in Xcode / Android Studio.

Recovery options

Permission denied

If the user taps “Don’t Allow”, the promise rejects with a PERMISSION_DENIED code. Show a friendly toast and provide a button that opens the app’s system settings:

import { openSettings } from '@capacitor/app';

async handleCameraError(err) {
  if (err.code === 'PERMISSION_DENIED') {
    const confirmed = await this.showSettingsPrompt();
    if (confirmed) await openSettings();
  }
}

No camera hardware

On devices lacking a camera, Camera.getPhoto rejects with NOT_SUPPORTED. Offer a file‑picker fallback using CameraSource.Photos or the Capacitor Filesystem picker.

Sync failures

If npx cap sync reports missing pods or Gradle errors:
1. Delete node_modules, ios/App/Pods, android/app/build.
2. Run npm ci (or npm install).
3. Run npx cap sync again.
This clean‑reinstall resolves most version‑mismatch issues.

Limitations & practical verification

• Browser fallback: The Capacitor Camera plugin does not provide a camera UI in a plain desktop browser. For progressive‑web‑app testing, implement a fallback that uses navigator.mediaDevices.getUserMedia and a canvas capture.
• Memory: Base64 results can exceed 10 MB for high‑resolution photos, risking out‑of‑memory crashes on low‑end devices. Prefer CameraResultType.Uri (file URI) for display and only convert to base64 when uploading.
• Orientation: The returned URI respects EXIF orientation on iOS; on Android you may need to read the EXIF tag and rotate via CSS or canvas if the image appears sideways.

Verification checklist (run on a physical device):

1. Launch the app, tap “Take photo”.
2. System camera UI opens; capture a picture.
3. App returns to the Ionic page and the image appears instantly.
4. Inspect the native console (Xcode log or logcat) – you should see the plugin result object with a webPath like capacitor://localhost/_capacitor_file_/.../IMG_1234.jpg.
5. Rotate the device; confirm the image orientation stays correct.

If any step fails, consult the native logs for missing permission keys or denied authorization and apply the recovery steps above.