pwa
ios
android
electron

Camera

The Camera API allows a user to pick a photo from their photo album or take a picture. On iOS, this uses UIImagePickerController, and on Android this API sends an intent which will be handled by the core Camera app by default.

getPhoto()

iOS Notes

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

Name: Privacy - Camera Usage Description Key: NSCameraUsageDescription

Read about Setting iOS Permissions in the iOS Guide for more information on setting iOS permissions in Xcode

Android Notes

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

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

The first permission is for Camera access, and the storage permissions are for reading/saving photo files.

Read about Setting Android 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.

Example

import { Plugins, CameraResultType } from '@capacitor/core';

const { Camera } = Plugins;

async takePicture() {
  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;
}

Angular example

By default, Angular (>= 2.x) won't trust dynamic image urls. To trust the URL, inject DomSanitizer and make sure to allow the image URL to be trusted.

This example also demonstrates how to set the default source of the image. By default, getPhoto will prompt the user to take a picture or select a photo from their existing photos.

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';

@IonicPage()
@Component({
  selector: 'page-camera',
  templateUrl: 'camera.html',
})
export class CameraPage {
  image: SafeResourceUrl;

  constructor(public navCtrl: NavController, public navParams: NavParams, private zone: NgZone, private sanitizer: DomSanitizer) {
  }

  async takePicture() {
    const { Camera } = Plugins;

    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Base64,
      source: CameraSource.Camera
    });

    // Example of using the Base64 return type. It's recommended to use CameraResultType.Uri
    // instead for performance reasons when showing large, or a large amount of images.
    this.image = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.base64Data));
  }
}

Component template:

  <img [src]="image" />
  <button (click)="takePicture()" ion-button color="primary">Take Picture</button>

API

CameraPlugin

getPhoto

getPhoto(options:
CameraOptions
): Promise<
CameraPhoto
>
Prompt the user to pick a photo from an album, or take a new photo with the camera.
options
CameraOptions
Returns: Promise<
CameraPhoto
>

Interfaces

interface CameraOptions {
// Whether to allow the user to crop or make small edits (platform specific)
allowEditing ?: boolean
// Whether to automatically rotate the image "up" to correct for orientation in portrait mode Default: true
correctOrientation ?: boolean
// The height of the saved image
height ?: number
// The quality of image to return as JPEG, from 0-100
quality ?: number
// How the data should be returned. Currently, only 'base64' or 'uri' is supported
resultType :
CameraResultType
// Whether to save the photo to the gallery/photostream
saveToGallery ?: boolean
// The source to get the photo from. By default this prompts the user to select either the photo album or take a photo. Default: CameraSource.Prompt
source ?:
CameraSource
// The width of the saved image
width ?: number
}
interface CameraPhoto {
// The base64 encoded data of the image, if using CameraResultType.Base64.
base64Data ?: string
// Exif data, if any, retrieved from the image
exif ?: any
// The format of the image. Currently, only "jpeg" is supported.
format : string
// If using CameraResultType.Uri, the path will contain a full, platform-specific file URL that can be read later using the Filsystem API.
path ?: string
// webPath returns a path that can be used to set the src attribute of an image for efficient loading and rendering.
webPath ?: string
}