How can I use the native smartphone camera in Ionic 2?

Question

Ionic 1 seems to have had some cordova plugin that allowed you to do it. I really need a step-by-step on how to do this with Ionic 2. No resources seem available online.

Thanks!

Answer 1

When in your project folder, run:

$ ionic plugin add cordova-plugin-camera --save

Then you have the navigator.camera available as a global.

import {Page, Platform, NavParams} from 'ionic/ionic'; import {NgZone} from 'angular2/core';






constructor(platform:Platform, navParams: NavParams, _zone : NgZone) {
this._zone = _zone;
this.platform = platform;
this.images = [];}



takePhoto() {
this.platform.ready().then(() => {
  let options = {
    quality: 80,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.CAMERA,
    allowEdit: false,
    encodingType: Camera.EncodingType.JPEG,
    saveToPhotoAlbum: false
  };
  // https://github.com/apache/cordova-plugin-camera#module_camera.getPicture
  navigator.camera.getPicture(
    (data) => {
      let image = "data:image/jpeg;base64," + data;
       this._zone.run(()=> this.images.unshift({
         src: image
       }))
    }, (error) => {
      alert(error);
    }, options
  );
});}

Made a demo project here; tested in Android only, please try out.

https://github.com/marcusasplund/ionic2-camera-demo/

Answer 2

Step 1: add ionic-native by running following command :

npm install ionic-native --save

Step2: Add cordova camera plugin for adding camera image or choosing images form gallery.

Run the following command to add plugin to your project:

cordova plugin add cordova-plugin-camera

Sample code for using plugin:

// Returns a image path location of  : file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1460010653820.jpg
takeNewImage(){
    var option = {
        sourceType:1,
        quality: 20,
        destinationType: 0,
        encodingType: 0
    };
    Camera.getPicture(option).then((imageData)=>{
        this.cameraSuccessCallback(imageData);
    },(error)=>{
        this.cameraErrorCallback(error);
    });
}
// Returns a file URI : content://media/external/images/media/51516
chooseImage(){
    var option = {
        sourceType:0,
        quality: 20,
        destinationType: 0,
        encodingType: 0
    };
    Camera.getPicture(option).then((imageData)=>{
        this.cameraSuccessCallback(imageData);
    },(error)=>{
        this.cameraErrorCallback(error);
    });
}
cameraSuccessCallback(imageData) {
    console.log("Getting image data as base64 string from camera/Gallery success.");
    console.log(imageData);
    var cardImage = document.getElementById("image-preview");
    cardImage.src = "data:image/jpeg;base64,"+imageData;
}

cameraErrorCallback(message) {
    alert('Loading image failed due to: ' + message);
}

imageData is the base64 string value for the image.

Reference

1. cordova-plugin-camera
2. Ionic2 Forum discussion
3. Ionic2 official documentation