Camera DestinationType is undefined

Ionic Framework ionic-v3
1

I am implement native camera feature in Ionic 2, but whenever I run the camera, the error return as below.
Anybody has the same experience? Need the advice on how to fix this issue?

2 429482 group EXCEPTION: Error during evaluation of “click”
4 429485 error ORIGINAL EXCEPTION: TypeError: Cannot read property ‘FILE_URI’ of undefined
3 429483 error EXCEPTION: Error during evaluation of “click”
5 429485 error ORIGINAL STACKTRACE:
6 429486 error TypeError: Cannot read property ‘FILE_URI’ of undefined

My code:

takePhoto() {
var options = {
quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
saveToPhotoAlbum: false,
correctOrientation:true
};
// GitHub - apache/cordova-plugin-camera: Apache Cordova Plugin camera
Camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it’s base64:
this.imgSrc = “data:image/jpeg;base64,” + imageData;
}, (err) => {
});
}

I try to change the code from
Camera.DestinationType.FILE_URI
to
navigator.camera.DestinationType.FILE_URI
but the console return the error message as below:

error ORIGINAL EXCEPTION: TypeError: Cannot read property ‘DestinationType’ of undefined

2

Looks like you might have forgotten to install the camera plugin:

ionic plugin add cordova-plugin-camera

3

I still having the same error after I execute ionic plugin add cordova-plugin-camera.

4

That should work for sure.

First make sure that you have plugin installed. From project directory run:
ionic plugin list
and make sure Camera is there. If not run:
ionic plugin add cordova-plugin-camera

Here is code that I am using to take a picture and it is working:
let options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
allowEdit: true,
saveToPhotoAlbum: false,
cameraDirection: 1,
sourceType: Camera.PictureSourceType.CAMERA
};

navigator.camera.getPicture(
    (data)  => {
      let image = "data:image/jpeg;base64," + data;
    },
    (error) => { console.log("CAMERA ERROR") },
    options
);
5

Are you running on a device? It won’t work through the browser.

6

sava999,
Yes. The plugin exists.

joshmorony,
Can it run in emulator? I run with Genymotion emulator.

7

I hardcode the value and it is work now, but another problem trigger while displaying the picture after capture.

The error is

2 069457 error Uncaught TypeError: Cannot read property ‘constructor’ of null, http://192.168.56.1:8100/build/js/app.bundle.js, Line: 1282
3 074996 error Uncaught TypeError: Cannot read property ‘constructor’ of null, http://192.168.56.1:8100/build/js/app.bundle.js, Line: 1282

picture.js

takePhoto() {
var options = {
quality: 100,
destinationType: 1,
// destinationType: Camera.DestinationType.FILE_URI,
sourceType: 1,
// sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: 0,
// encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
saveToPhotoAlbum: false,
correctOrientation:true
};
Camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it’s base64:
this.imgSrc = “data:image/jpeg;base64,” + imageData;

}, (err) => {
});

}

picture.html

<img src="{{imgSrc}}" id="imgPlacement">

    <button block (click)="takePhoto()">Take Photo</button>
    <p>{{imgSrc}}</p>

That is no image show on the page, and the value for imgSrc is
image

Anybody able to give me some advice on this issue?

8

You don’t need “data:image/jpeg;base64,” if you are not using DATA_URL as destination type

9

Here
<img src="{{imgSrc}}" id="imgPlacement">
try
<img [src]="imgSrc" id="imgPlacement">
also

10

I tried the code as below.

Camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      // this.imgSrc = "data:image/jpeg;base64," + imageData;
      this.imgSrc = imageData;
    }, (err) => {
    });

Html

<img src="{{imgSrc}}" id="imgPlacement">

    <button block (click)="takePhoto()">Take Photo</button>
    <p>{{imgSrc}}</p>

I tried code below also, but both code still failed to display the picture.
<img [src]="imgSrc" id="imgPlacement">

image

Between, the error message still appear in the console log
757872 error Uncaught TypeError: Cannot read property 'constructor' of null, http://192.168.56.1:8100/build/js/app.bundle.js, Line: 1282

11

I found the image show in emulator, but not display in device (test with Samsung Note 3)