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.

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.

Example

import { Plugins } from '@avocadojs/core';

async takePicture() {
  const image = await Plugins.Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: 'base64'
  });
  // image.base64_data will contain the base64 encoded result as a JPEG. Make sure to
  // add the proper base64 image prefix:
  var imageUrl = 'data:image/jpeg;base64,' + image.base64_data;
  // can be set to the src of an image now
}

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:

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {
  Plugins
} from '@avocadojs/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 image = await Plugins.Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: 'base64'
    })
    this.image = this.sanitizer.bypassSecurityTrustResourceUrl(image && ('data:image/jpeg;base64,' + image.base64_data));
  }
}

Component template:

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

API