メインコンテンツまでスキップ
バージョン: v3

@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

This API requires the following permissions be added to your AndroidManifest.xml:

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

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.2)
  • $androidxMaterialVersion: version of com.google.android.material:material (default: 1.3.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(...)

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

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

ParamType
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.

ParamType
options
GalleryImageOptions

Returns:

Promise<GalleryPhotos>

Since: 1.2.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

ParamType
permissions
CameraPluginPermissions

Returns:

Promise<PermissionStatus>

Since: 1.0.0


Interfaces

Photo

PropTypeDescriptionSince
base64StringstringThe base64 encoded string representation of the image, if using CameraResultType.Base64.1.0.0
dataUrlstringThe url starting with 'data:image/jpeg;base64,' and the base64 encoded string representation of the image, if using CameraResultType.DataUrl.1.0.0
pathstringIf 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
webPathstringwebPath returns a path that can be used to set the src attribute of an image for efficient loading and rendering.1.0.0
exifanyExif data, if any, retrieved from the image1.0.0
formatstringThe format of the image, ex: jpeg, png, gif. iOS and Android only support jpeg. Web supports jpeg and png. gif is only supported if using file input.1.0.0
savedbooleanWhether 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

PropTypeDescriptionDefaultSince
qualitynumberThe quality of image to return as JPEG, from 0-1001.0.0
allowEditingbooleanWhether 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 supported1.0.0
saveToGallerybooleanWhether to save the photo to the gallery. If the photo was picked from the gallery, it will only be saved if edited.: false1.0.0
widthnumberThe width of the saved image1.0.0
heightnumberThe height of the saved image1.0.0
preserveAspectRatiobooleanThis setting has no effect. Picture resizing always preserve aspect ratio.1.0.0
correctOrientationbooleanWhether to automatically rotate the image "up" to correct for orientation in portrait mode: true1.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.Prompt1.0.0
direction
CameraDirection
iOS and Web only: The camera direction.: CameraDirection.Rear1.0.0
presentationStyle'fullscreen' | 'popover'iOS only: The presentation style of the Camera.: 'fullscreen'1.0.0
webUseInputbooleanWeb 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/v3/pwa-elements1.0.0
promptLabelHeaderstringText value to use when displaying the prompt.: 'Photo'1.0.0
promptLabelCancelstringText value to use when displaying the prompt. iOS only: The label of the 'cancel' button.: 'Cancel'1.0.0
promptLabelPhotostringText value to use when displaying the prompt. The label of the button to select a saved image.: 'From Photos'1.0.0
promptLabelPicturestringText value to use when displaying the prompt. The label of the button to open the camera.: 'Take Picture'1.0.0

GalleryPhotos

PropTypeDescriptionSince
photosGalleryPhoto[]Array of all the picked photos.1.2.0

GalleryPhoto

PropTypeDescriptionSince
pathstringFull, platform-specific file URL that can be read later using the Filesystem API.1.2.0
webPathstringwebPath returns a path that can be used to set the src attribute of an image for efficient loading and rendering.1.2.0
exifanyExif data, if any, retrieved from the image1.2.0
formatstringThe format of the image, ex: jpeg, png, gif. iOS and Android only support jpeg. Web supports jpeg, png and gif.1.2.0

GalleryImageOptions

PropTypeDescriptionDefaultSince
qualitynumberThe quality of image to return as JPEG, from 0-1001.2.0
widthnumberThe width of the saved image1.2.0
heightnumberThe height of the saved image1.2.0
correctOrientationbooleanWhether to automatically rotate the image "up" to correct for orientation in portrait mode: true1.2.0
presentationStyle'fullscreen' | 'popover'iOS only: The presentation style of the Camera.: 'fullscreen'1.2.0
limitnumberiOS only: Maximum number of pictures the user will be able to choose.0 (unlimited)1.2.0

PermissionStatus

PropType
camera
CameraPermissionState
photos
CameraPermissionState

CameraPluginPermissions

PropType
permissionsCameraPermissionType[]

Type Aliases

CameraPermissionState

PermissionState | 'limited'

PermissionState

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

CameraPermissionType

'camera' | 'photos'

Enums

CameraResultType

MembersValue
Uri'uri'
Base64'base64'
DataUrl'dataUrl'

CameraSource

MembersValueDescription
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 fron the gallery or photo album.

CameraDirection

MembersValue
Rear'REAR'
Front'FRONT'