@capacitor/camera

The Camera API provides the ability to take a photo with the camera or choose an existing one from the photo album.

Install

npm install @capacitor/camera
npx cap sync

iOS

iOS requires the following usage description be added and filled out for your app in Info.plist:

• NSCameraUsageDescription (Privacy - Camera Usage Description)
• NSPhotoLibraryAddUsageDescription (Privacy - Photo Library Additions Usage Description)
• NSPhotoLibraryUsageDescription (Privacy - Photo Library Usage Description)

Read about Configuring Info.plist in the iOS Guide for more information on setting iOS permissions in Xcode

Android

When picking existing images from the device gallery, the Android Photo Picker component is now used. The Photo Picker is available on devices that meet the following criteria:

• Run Android 11 (API level 30) or higher
• Receive changes to Modular System Components through Google System Updates

Older devices and Android Go devices running Android 11 or 12 that support Google Play services can install a backported version of the photo picker. To enable the automatic installation of the backported photo picker module through Google Play services, add the following entry to the <application> tag in your AndroidManifest.xml file:

<service android:name="com.google.android.gms.metadata.ModuleDependencies"
    android:enabled="false"
    android:exported="false"
    tools:ignore="MissingClass">
    <intent-filter>
        <action android:name="com.google.android.gms.metadata.MODULE_DEPENDENCIES" />
    </intent-filter>
    <meta-data android:name="photopicker_activity:0:required" android:value="" />
</service>

If that entry is not added, on devices that don't support the Photo Picker, the Photo Picker component falls back to Intent.ACTION_OPEN_DOCUMENT.

The Camera plugin requires no permissions, unless using saveToGallery: true, in that case the following permissions should be added to your AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

You can also specify those permissions only for the Android versions where they will be requested:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="29"/>

The storage permissions are for reading/saving photo files.

Read about Setting Permissions in the Android Guide for more information on setting Android permissions.

Additionally, because the Camera API launches a separate Activity to handle taking the photo, you should listen for appRestoredResult in the App plugin to handle any camera data that was sent in the case your app was terminated by the operating system while the Activity was running.

Variables

This plugin will use the following project variables (defined in your app's variables.gradle file):

• androidxExifInterfaceVersion: version of androidx.exifinterface:exifinterface (default: 1.4.1)
• androidxMaterialVersion: version of com.google.android.material:material (default: 1.13.0)

PWA Notes

On Web, takePhoto can use the PWA Elements pwa-camera-modal custom element to provide a native-like camera UI. If the element is not registered, the plugin falls back to an <input type="file"> picker. chooseFromGallery always uses <input type="file"> on Web, regardless of whether PWA Elements are installed.

Installing PWA Elements programmatically

See the PWA Elements installation guide for full instructions.

Providing a custom camera element

Instead of using @ionic/pwa-elements, you can register your own pwa-camera-modal custom element. The plugin interacts with it using the following interface:

Member	Type	Description
facingMode	string property	Set to 'user' (front camera) or 'environment' (rear camera) before presenting
componentOnReady()	method → Promise<void>	Called by the plugin after creating the element; resolve when the element is ready
present()	method	Called by the plugin to display the camera UI
dismiss()	method	Called by the plugin to close the camera UI after a photo is taken or cancelled
onPhoto	event	Dispatched when the user takes a photo or cancels. event.detail must be a Blob (photo taken), null (user cancelled), or an Error (something went wrong)

class MyCameraModal extends HTMLElement {
  facingMode = 'environment';

  componentOnReady() {
    return Promise.resolve();
  }

  present() {
    // Show your custom camera UI, then dispatch exactly one 'onPhoto' event when done:
    //   - Blob: user took a photo
    //   - null: user cancelled
    //   - Error: something went wrong
    // Example:
    this.dispatchEvent(new CustomEvent('onPhoto', { detail: photoBlob })