Wondering what’s next for npm?Check out our public roadmap! »

    @capacitor/camera
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

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

    Param Type
    options ImageOptions

    Returns: Promise<Photo>

    Since: 1.0.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. 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 Filsystem 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 and png. gif is only supported if using file input. 1.0.0

    ImageOptions

    Prop Type Description Default Since
    quality number The quality of image to return as JPEG, from 0-100 1.0.0
    allowEditing boolean Whether to allow the user to crop or make small edits (platform specific) 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 width of the saved image 1.0.0
    height number The height of the saved image 1.0.0
    preserveAspectRatio boolean This setting has no effect. Picture resizing always preserve aspect ratio. 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/pwa-elements 1.0.0
    promptLabelHeader string Text value to use when displaying the prompt. iOS and Android only: The title of the action sheet. : '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

    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
    Prompt 'PROMPT'
    Camera 'CAMERA'
    Photos 'PHOTOS'

    CameraDirection

    Members Value
    Rear 'REAR'
    Front 'FRONT'

    Install

    npm i @capacitor/camera

    DownloadsWeekly Downloads

    4,285

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    174 kB

    Total Files

    35

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar