@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 ofandroidx.exifinterface:exifinterface(default:1.4.1)androidxMaterialVersion: version ofcom.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 }));
}
dismiss() {
// Hide your custom camera UI (called by the plugin after receiving 'onPhoto')
}
}
customElements.define('pwa-camera-modal', MyCameraModal);
Examples
Taking a photo
import { Camera } from '@capacitor/camera';
const takePicture = async () => {
try {
const result = await Camera.takePhoto({
quality: 90,
includeMetadata: true,
});
// result.webPath can be set directly as the src of an image element
imageElement.src = result.webPath;
// On native: pass result.uri to the Filesystem API to get the full-resolution base64,
// or use result.thumbnail for a lower-resolution base64 preview.
// On Web: result.thumbnail contains the full image base64 encoded.
console.log('Format:', result.metadata?.format);
console.log('Resolution:', result.metadata?.resolution);
} catch (e) {
const error = e as any;
// error.code contains the structured error code (e.g. 'OS-PLUG-CAMR-0003')
// when thrown by the native layer. See the Errors section for all codes.
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
console.error('takePhoto failed:', message);
}
};
Choosing from the gallery
import { Camera, MediaTypeSelection } from '@capacitor/camera';
const pickMedia = async () => {
try {
const { results } = await Camera.chooseFromGallery({
mediaType: MediaTypeSelection.All, // photos, videos, or both
allowMultipleSelection: true,
limit: 5,
includeMetadata: true,
});
for (const item of results) {
console.log('Type:', item.type); // MediaType.Photo or MediaType.Video
console.log('webPath:', item.webPath);
console.log('Format:', item.metadata?.format);
console.log('Size:', item.metadata?.size);
}
} catch (e) {
const error = e as any;
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
console.error('chooseFromGallery failed:', message);
}
};
Recording and playing a video
import { Camera } from '@capacitor/camera';
const recordAndPlay = async () => {
let videoUri: string | undefined;
try {
const result = await Camera.recordVideo({
saveToGallery: false,
isPersistent: true, // keep the file available across app launches
includeMetadata: true,
});
videoUri = result.uri;
console.log('Duration:', result.metadata?.duration);
console.log('Saved to gallery:', result.saved);
} catch (e) {
const error = e as any;
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
console.error('recordVideo failed:', message);
return;
}
if (videoUri) {
try {
await Camera.playVideo({ uri: videoUri });
} catch (e) {
const error = e as any;
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
console.error('playVideo failed:', message);
}
}
};
Editing a photo from a base64 string
editPhoto opens an in-app editor from a base64-encoded image and returns the edited image as a base64 string in outputImage.
import { Camera } from '@capacitor/camera';
const editFromBase64 = async (base64Image: string) => {
try {
const { outputImage } = await Camera.editPhoto({
inputImage: base64Image, // raw base64, no data URL prefix
});
// outputImage is the edited image, base64 encoded
imageElement.src = `data:image/jpeg;base64,${outputImage}`;
} catch (e) {
const error = e as any;
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
console.error('editPhoto failed:', message);
}
};
Editing a photo from a URI
editURIPhoto opens an in-app editor from a file URI (e.g. from takePhoto or the Filesystem API) and returns a MediaResult.
import { Camera } from '@capacitor/camera';
const editFromURI = async (uri: string) => {
try {
const result = await Camera.editURIPhoto({
uri,
saveToGallery: false,
includeMetadata: true,
});
// result.webPath can be used directly as an image src
imageElement.src = result.webPath;
console.log('Format:', result.metadata?.format);
console.log('Size:', result.metadata?.size);
console.log('Saved to gallery:', result.saved);
} catch (e) {
const error = e as any;
const message = error.code ? `[${error.code}] ${error.message}` : error.message;
console.error('editURIPhoto failed:', message);
}
};
Migrating to the New API
Version 8.1.0 introduces a new improved API and deprecates getPhoto and pickImages.
Replacing getPhoto
getPhoto handled three sources via CameraSource: Camera, Photos, and Prompt. Camera and Photos now map to different methods, while Prompt was removed.
CameraSource.Camera to takePhoto
CameraResultType.Base64 and CameraResultType.DataUrl are not supported in the new API. See Result type changes for alternatives.
// Before
const photo = await Camera.getPhoto({
source: CameraSource.Camera,
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri,
direction: CameraDirection.Rear,
width: 1280,
height: 720,
});
const imageUrl = photo.webPath;
// After
const result = await Camera.takePhoto({
quality: 90,
editable: 'in-app', // replaces allowEditing: true
cameraDirection: CameraDirection.Rear, // replaces direction
targetWidth: 1280, // replaces width (1)
targetHeight: 720, // replaces height (1)
});
const imageUrl = result.webPath;
(1) width/height each worked independently and set a maximum dimension while preserving aspect ratio. targetWidth/targetHeight must be used together — setting only one has no effect.
CameraSource.Photos to chooseFromGallery
// Before
const photo = await Camera.getPhoto({
source: CameraSource.Photos,
quality: 90,
resultType: CameraResultType.Uri,
});
const imageUrl = photo.webPath;
// After
const { results } = await Camera.chooseFromGallery({
quality: 90,
});
const imageUrl = results[0].webPath;
CameraSource.Prompt (or default)
getPhoto previously displayed a native prompt letting the user choose between the camera and the gallery. This prompt is no longer part of the plugin. You should build the prompt using your own UI (for example, with @capacitor/action-sheet) and then call takePhoto or chooseFromGallery based on the user's selection.
// Before
const photo = await Camera.getPhoto({
// source defaults to CameraSource.Prompt
quality: 90,
resultType: CameraResultType.Uri,
});
// After: show your own UI to determine the source, then call the appropriate method
const result = await Camera.takePhoto({ quality: 90 });
// or
const { results } = await Camera.chooseFromGallery({ quality: 90 });
Result type changes
getPhoto returned a Photo object where the fields available depended on resultType. The new API removes resultType entirely — MediaResult has a fixed set of fields regardless of how the photo was taken.
Photo field | MediaResult equivalent |
|---|---|
path | uri |
webPath | webPath |
base64String | thumbnail (on Web, contains the full image base64 encoded; on native, contains a thumbnail) |
dataUrl | No direct equivalent — see note below |
saved | saved |
format | metadata.format (requires includeMetadata: true) |
exif | metadata.exif (requires includeMetadata: true) |
Constructing a data URL — two options are available depending on your needs:
On all platforms, you can combine thumbnail and metadata.format (requires includeMetadata: true). On native, thumbnail is lower-resolution:
const dataUrl = `data:image/${result.metadata.format};base64,${result.thumbnail}`;