@capacitor/camera

What is @capacitor/camera?

@capacitor/camera is a Capacitor plugin that provides an API for accessing the device's camera and photo gallery. It allows developers to capture photos, choose images from the gallery, and manage image data in a cross-platform manner.

What are @capacitor/camera's main functionalities?

Capture Photo

This feature allows you to capture a photo using the device's camera. The code sample demonstrates how to use the Camera API to take a photo and log the image data.

const { Camera, CameraResultType } = require('@capacitor/camera');

async function takePhoto() {
  const image = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 90
  });
  console.log('Photo taken:', image);
}

Pick Image from Gallery

This feature allows you to select an image from the device's photo gallery. The code sample shows how to use the Camera API to pick an image and log the selected image data.

const { Camera, CameraResultType } = require('@capacitor/camera');

async function pickImage() {
  const image = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Photos,
    quality: 90
  });
  console.log('Image selected:', image);
}

Convert Image to Base64

This feature allows you to capture a photo and convert it to a Base64 string. The code sample demonstrates how to use the Camera API to take a photo and retrieve its Base64 representation.

const { Camera, CameraResultType } = require('@capacitor/camera');

async function convertImageToBase64() {
  const image = await Camera.getPhoto({
    resultType: CameraResultType.Base64,
    source: CameraSource.Camera,
    quality: 90
  });
  console.log('Base64 image data:', image.base64String);
}

Other packages similar to @capacitor/camera

react-native-camera

react-native-camera is a popular library for React Native that provides camera functionalities, including photo and video capture. It offers more advanced features like barcode scanning and face detection, which are not available in @capacitor/camera.

cordova-plugin-camera

cordova-plugin-camera is a Cordova plugin that provides similar functionalities to @capacitor/camera, such as capturing photos and selecting images from the gallery. It is widely used in Cordova-based projects but lacks the modern API design and cross-platform support of Capacitor.

expo-camera

expo-camera is a module for Expo projects that provides an API for accessing the device's camera. It offers similar functionalities to @capacitor/camera but is specifically designed for use with the Expo framework, which may not be suitable for all projects.

README

@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:

<!-- Trigger Google Play services to install the backported photo picker module. -->
<!--suppress AndroidDomInspection -->
<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, the devices that don't support the Photo Picker, the Photo Picker component fallbacks 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.3.7)
• androidxMaterialVersion: version of com.google.android.material:material (default: 1.12.0)

PWA Notes

PWA Elements are required for Camera plugin to work.

Example

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

const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });

  // image.webPath will contain a path that can be set as an image src.
  // You can access the original file using image.path, which can be
  // passed to the Filesystem API to read the raw data of the image,
  // if desired (or pass resultType: CameraResultType.Base64 to getPhoto)
  var imageUrl = image.webPath;

  // Can be set to the src of an image now
  imageElement.src = imageUrl;
};

API

• getPhoto(...)
• pickImages(...)
• pickLimitedLibraryPhotos()
• getLimitedLibraryPhotos()
• checkPermissions()
• requestPermissions(...)
• Interfaces
• Type Aliases
• Enums

getPhoto(...)

getPhoto(options: ImageOptions) => Promise<Photo>

Prompt the user to pick a photo from an album, or take a new photo with the camera.

Param	Type
options	ImageOptions

Returns: Promise<Photo>

Since: 1.0.0

pickImages(...)

pickImages(options: GalleryImageOptions) => Promise<GalleryPhotos>

Allows the user to pick multiple pictures from the photo gallery. On iOS 13 and older it only allows to pick one picture.

Param	Type
options	GalleryImageOptions

Returns: Promise<GalleryPhotos>

Since: 1.2.0

pickLimitedLibraryPhotos()

pickLimitedLibraryPhotos() => Promise<GalleryPhotos>

iOS 14+ Only: Allows the user to update their limited photo library selection. On iOS 15+ returns all the limited photos after the picker dismissal. On iOS 14 or if the user gave full access to the photos it returns an empty array.

Returns: Promise<GalleryPhotos>

Since: 4.1.0

getLimitedLibraryPhotos()

getLimitedLibraryPhotos() => Promise<GalleryPhotos>

iOS 14+ Only: Return an array of photos selected from the limited photo library.

Returns: Promise<GalleryPhotos>

Since: 4.1.0

checkPermissions()

checkPermissions() => Promise<PermissionStatus>

Check camera and photo album permissions

Returns: Promise<PermissionStatus>

Since: 1.0.0

requestPermissions(...)

requestPermissions(permissions?: CameraPluginPermissions | undefined) => Promise<PermissionStatus>

Request camera and photo album permissions

Param	Type
permissions	CameraPluginPermissions

Returns: Promise<PermissionStatus>

Since: 1.0.0

Interfaces

Photo

Prop	Type	Description	Since
base64String	string	The base64 encoded string representation of the image, if using CameraResultType.Base64.	1.0.0
dataUrl	string	The url starting with 'data:image/jpeg;base64,' and the base64 encoded string representation of the image, if using CameraResultType.DataUrl. Note: On web, the file format could change depending on the browser.	1.0.0
path	string	If using CameraResultType.Uri, the path will contain a full, platform-specific file URL that can be read later using the Filesystem API.	1.0.0
webPath	string	webPath returns a path that can be used to set the src attribute of an image for efficient loading and rendering.	1.0.0
exif	any	Exif data, if any, retrieved from the image	1.0.0
format	string	The format of the image, ex: jpeg, png, gif. iOS and Android only support jpeg. Web supports jpeg, png and gif, but the exact availability may vary depending on the browser. gif is only supported if webUseInput is set to true or if source is set to Photos.	1.0.0
saved	boolean	Whether if the image was saved to the gallery or not. On Android and iOS, saving to the gallery can fail if the user didn't grant the required permissions. On Web there is no gallery, so always returns false.	1.1.0

ImageOptions

Prop	Type	Description	Default	Since
quality	number	The quality of image to return as JPEG, from 0-100 Note: This option is only supported on Android and iOS		1.0.0
allowEditing	boolean	Whether to allow the user to crop or make small edits (platform specific). On iOS 14+ it's only supported for CameraSource.Camera, but not for CameraSource.Photos.		1.0.0
resultType	CameraResultType	How the data should be returned. Currently, only 'Base64', 'DataUrl' or 'Uri' is supported		1.0.0
saveToGallery	boolean	Whether to save the photo to the gallery. If the photo was picked from the gallery, it will only be saved if edited.	: false	1.0.0
width	number	The desired maximum width of the saved image. The aspect ratio is respected.		1.0.0
height	number	The desired maximum height of the saved image. The aspect ratio is respected.		1.0.0
correctOrientation	boolean	Whether to automatically rotate the image "up" to correct for orientation in portrait mode	: true	1.0.0
source	CameraSource	The source to get the photo from. By default this prompts the user to select either the photo album or take a photo.	: CameraSource.Prompt	1.0.0
direction	CameraDirection	iOS and Web only: The camera direction.	: CameraDirection.Rear	1.0.0
presentationStyle	'fullscreen' | 'popover'	iOS only: The presentation style of the Camera.	: 'fullscreen'	1.0.0
webUseInput	boolean	Web only: Whether to use the PWA Element experience or file input. The default is to use PWA Elements if installed and fall back to file input. To always use file input, set this to true. Learn more about PWA Elements: https://capacitorjs.com/docs/web/pwa-elements		1.0.0
promptLabelHeader	string	Text value to use when displaying the prompt.	: 'Photo'	1.0.0
promptLabelCancel	string	Text value to use when displaying the prompt. iOS only: The label of the 'cancel' button.	: 'Cancel'	1.0.0
promptLabelPhoto	string	Text value to use when displaying the prompt. The label of the button to select a saved image.	: 'From Photos'	1.0.0
promptLabelPicture	string	Text value to use when displaying the prompt. The label of the button to open the camera.	: 'Take Picture'	1.0.0

GalleryPhotos

Prop	Type	Description	Since
photos	GalleryPhoto[]	Array of all the picked photos.	1.2.0

GalleryPhoto

Prop	Type	Description	Since
path	string	Full, platform-specific file URL that can be read later using the Filesystem API.	1.2.0
webPath	string	webPath returns a path that can be used to set the src attribute of an image for efficient loading and rendering.	1.2.0
exif	any	Exif data, if any, retrieved from the image	1.2.0
format	string	The format of the image, ex: jpeg, png, gif. iOS and Android only support jpeg. Web supports jpeg, png and gif.	1.2.0

GalleryImageOptions

Prop	Type	Description	Default	Since
quality	number	The quality of image to return as JPEG, from 0-100 Note: This option is only supported on Android and iOS.		1.2.0
width	number	The desired maximum width of the saved image. The aspect ratio is respected.		1.2.0
height	number	The desired maximum height of the saved image. The aspect ratio is respected.		1.2.0
correctOrientation	boolean	Whether to automatically rotate the image "up" to correct for orientation in portrait mode	: true	1.2.0
presentationStyle	'fullscreen' | 'popover'	iOS only: The presentation style of the Camera.	: 'fullscreen'	1.2.0
limit	number	Maximum number of pictures the user will be able to choose. Note: This option is only supported on Android 13+ and iOS.	0 (unlimited)	1.2.0

PermissionStatus

Prop	Type
camera	CameraPermissionState
photos	CameraPermissionState

CameraPluginPermissions

Prop	Type
permissions	CameraPermissionType[]

Type Aliases

CameraPermissionState

PermissionState | 'limited'

PermissionState

'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'

CameraPermissionType

'camera' | 'photos'

Enums

CameraResultType

Members	Value
Uri	'uri'
Base64	'base64'
DataUrl	'dataUrl'

CameraSource

Members	Value	Description
Prompt	'PROMPT'	Prompts the user to select either the photo album or take a photo.
Camera	'CAMERA'	Take a new photo using the camera.
Photos	'PHOTOS'	Pick an existing photo from the gallery or photo album.

CameraDirection

Members	Value
Rear	'REAR'
Front	'FRONT'