Capture Photos in Ionic with the Capacitor Camera Plugin

The Photo Capture Problem in Hybrid Apps

Hybrid apps run web code inside a native shell. For years, capturing a photo meant wiring up Cordova plugins, managing permission callbacks differently on each platform, and accepting inconsistent image quality. The Capacitor Camera plugin replaces that legacy approach with a single async API that talks to the device's real camera app.

Why Native Intents Beat Web Fallbacks

When you call the Capacitor Camera plugin, it launches the platform's native camera application through an intent—a request for another app to perform an action. On Android and iOS this means the photo is processed by the operating system's optimized camera pipeline, not squeezed through a browser canvas. The result is better compression, higher resolution, and lower memory pressure in your app.

A Minimal Worked Example

Install the plugin in your Ionic project root:

npm install @capacitor/camera

Add and sync the native platform so Capacitor can inject the required configuration. Run these commands from your terminal in the project root; you need Android Studio or Xcode installed for the native sync step:

ionic cap add android && ionic cap sync android

After sync, Capacitor adds the CAMERA permission to AndroidManifest.xml automatically. Verify by opening android/app/src/main/AndroidManifest.xml and looking for the uses-permission entry.

In an Ionic component, import the plugin and call it inside an async function:

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

async takePhoto() {
  const photo = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Base64,
    cameraDirection: CameraDirection.Rear,
  });
  // photo.base64String contains the image data
}

The resultType option controls what comes back. Base64 returns a text-encoded string suitable for immediate display or upload. Uri returns a file path you can load later. The allowEditing option lets the user crop before the photo returns, though behavior varies slightly by platform.

Trade-offs and Platform Limits

Web builds do not use native intents. They rely on the browser's MediaDevices API—the same interface used by web conferencing tools. This means your web deployment must be served over HTTPS, and some desktop browsers without a connected camera will fail rather than fall back gracefully. On Android devices running API level 20 or lower, the plugin may fall back to a web camera view or fail if no camera hardware is present.

Another limitation is memory. Base64 strings inflate image size by roughly 33 percent. For high-resolution photos, prefer resultType: CameraResultType.Uri and load the file path into an image element instead of holding the base64 string in memory.

Verify Before You Ship

To confirm the integration works, run the app on a physical device or emulator with a camera. Trigger takePhoto and check that the returned base64 string is non-empty and renders in an img tag. On Android, inspect the generated AndroidManifest.xml to confirm the CAMERA permission was injected. If the permission dialog never appears, verify that you ran ionic cap sync after installing the plugin.

If you need to remove the plugin later, uninstall it with npm uninstall @capacitor/camera and run ionic cap sync again to strip the native configuration.