Camera not working in .APK but works in Ionic view

[wthijmen]

Hi All,

Is this a known issue?
When I’m running my app from ionic view it works…
But whem I’m running it in the .APK debug on my device it doesn’t work.
Same for the gallery cordova plugin.

Ionic info

cli packages: (/home/thijmen/Desktop/abk/node_modules)

    @ionic/cli-utils  : 1.13.0
    ionic (Ionic CLI) : 3.13.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.3.0 ios 4.5.2
    Ionic Framework    : ionic-angular 3.3.0

System:

    Node : v6.11.4
    npm  : 5.5.1 
    OS   : Linux 4.10

Misc:

    backend : pro

Hope some one can help me out.

Thanks in advance

[Debasis123]

have you added platform ?

Try

1. remove platform and again add.
2. uninstall camera plugin and install again

[wthijmen]

@Debasis123

have you added platform ?

Try

remove platform and again add.
uninstall camera plugin and install again

Already tried.
Platform android installed (6.2.3)
And camera plugin installed.

My Package.json

{
  "name": "****",
  "version": "1.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.1.2",
    "@angular/compiler": "4.1.2",
    "@angular/compiler-cli": "4.1.2",
    "@angular/core": "4.1.2",
    "@angular/forms": "4.1.2",
    "@angular/http": "4.1.2",
    "@angular/platform-browser": "4.1.2",
    "@angular/platform-browser-dynamic": "4.1.2",
    "@ionic-native/camera": "^3.12.1",
    "@ionic-native/core": "^4.2.0",
    "@ionic-native/device": "^4.3.2",
    "@ionic-native/network": "^4.3.2",
    "@ionic-native/onesignal": "^4.3.2",
    "@ionic-native/push": "^4.3.2",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/cloud-angular": "^0.12.0",
    "@ionic/storage": "2.0.1",
    "@types/pouchdb": "6.3.0",
    "angular2-signaturepad": "^2.5.0",
    "cordova": "^7.1.0",
    "cordova-android": "6.2.3",
    "cordova-browser": "^4.1.0",
    "cordova-ios": "^4.5.2",
    "cordova-plugin-add-swift-support": "^1.7.0",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-camera": "^2.4.1",
    "cordova-plugin-compat": "^1.1.0",
    "cordova-plugin-console": "^1.1.0",
    "cordova-plugin-device": "^1.1.6",
    "cordova-plugin-ionic": "^1.1.9",
    "cordova-plugin-ionic-webview": "^1.1.15",
    "cordova-plugin-network-information": "^1.3.3",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.3",
    "cordova-plugin-tts": "^0.2.3",
    "cordova-plugin-whitelist": "^1.3.2",
    "font-awesome": "4.7.0",
    "gulp": "^3.9.1",
    "ionic": "^3.13.0",
    "ionic-angular": "3.3.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionic-tooltips": "^2.0.0",
    "ionicons": "3.0.0",
    "jquery": "^3.2.1",
    "jsdom": "^11.3.0",
    "konva": "^1.7.2",
    "npm": "^5.5.1",
    "phonegap-plugin-push": "^2.0.0",
    "pouchdb": "^6.3.4",
    "pouchdb-browser": "^6.3.4",
    "rxjs": "5.4.0",
    "sudo": "^1.0.3",
    "superagent": "^3.6.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.0.0",
    "ionic": "^3.13.1",
    "typescript": "2.3.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-ionic": {
        "APP_ID": "****",
        "CHANNEL_NAME": "Master",
        "UPDATE_METHOD": "background",
        "UPDATE_API": "https://api.ionicjs.com",
        "MAX_STORE": "2"
      },
      "cordova-plugin-ionic-webview": {},
      "phonegap-plugin-push": {
        "SENDER_ID": "****"
      }
    },
    "platforms": [
      "browser",
      "ios",
      "android"
    ]
  }
}

[wthijmen]

Does some one know a quick fix for this?

[wthijmen]

Ok, I’ve found the problem.
Above API 23 for Android, It needs a confirmation inside the app of allowing the plugin to use the camera.
It´s about asking permissions with Diagnostics. Can been done with all AndroidManifest.xml features.

Installation of Diagnostic

ionic plugin add cordova.plugins.diagnostic

Above your TS file

import { Diagnostic } from 'ionic-native';

Sample code to give the user the choice to use the Camera plugin.

Diagnostic.isCameraAuthorized().then((authorized) => {
    if(authorized)
        this.initializePreview();
    else {
        Diagnostic.requestCameraAuthorization().then((status) => {
            if(status == Diagnostic.permissionStatus.GRANTED)
                this.initializePreview();
            else {
                // Permissions not granted
                // Therefore, create and present toast
                this.toastCtrl.create(
                    {
                        message: "Cannot access camera", 
                        position: "bottom",
                        duration: 5000
                    }
                ).present();
            }
        });
    }
});

Hope it will help some one in the future.

[umeshionic1234]

Thanks for solution …but am getting this error :

…can you add code in type script please

[wthijmen]

Update your plugin Diagnotic probably or Ionic version.
Can you publish your ionic info?

[umeshionic1234]

can you send me your email id ?

[wthijmen]

@umeshionic1234

can you send me your email id ?

U can ask your questions related to this here in the topic so other people will see how it’s resolved.

[umeshionic1234]

problem solved thank you

[Sujan12]

How did you solve the problem? Please share the solution for future readers.

[sureshgowd1321]

Is this problem fixed ? Whats the solution

[eulier1]

To this date, i test Diagnostic directive. I didn’t work using genymotion.

Ionic:

   ionic (Ionic CLI)  : 4.2.1 (/home/art-uro/.nvm/versions/node/v8.11.1/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : android 6.3.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.1, (and 6 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/art-uro/Android/Sdk/)
   NodeJS            : v8.11.1 (/home/art-uro/.nvm/versions/node/v8.11.1/bin/node)
   npm               : 5.6.0
   OS                : Linux 4.15

Genymotion:
  Emulated : Samsung Galaxy S6
  Android: 6.0.0

But i could make this work. Hope this help

Grant camera permission

Issue: Camera Authorization on API 23 and above A way to solve: Use this plugin & follow the steps to install it. https://ionicframework.com/docs/native/android-permissions/ and before call camera use the “requestPermission” method from “androidPermissions” object ( remember do the step 1) this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA) .then( result => { // code where you call camera directive console.log('Has permission?',re…

[pratibhapanch]

I wanted to use camera plugin in my app. I requested camera permission, but after allowing camera is not opening

Trying it on Following device

• Moto g4 plus
  with android version 7.0

Following is Ionic info
cli packages: (C:\Users\username\AppData\Roaming\npm\node_modules)
@ionic/cli-utils : 1.19.3
ionic (Ionic CLI) : 3.20.1
global packages:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
local packages:
@ionic/app-scripts : 3.2.0
Cordova Platforms : android 7.0.0 browser 5.0.4
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 25.2.5
Node : v8.11.1
npm : 5.6.0
OS : Windows 10
Environment Variables:
ANDROID_HOME : C:\android-sdk-win
Misc:
backend : pro

Following is my code

openCamera(){

	this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
		result => {
			alert(result.hasPermission);
			if(!result.hasPermission) {
				this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)
				.then( cam => {
					alert('permission result '+ JSON.stringify(cam) );
					this.capturingPicture();
				})
				.catch( error => {
					alert('permission error occured '+ JSON.stringify(error) );
				});
			} else {
				this.capturingPicture();
			}
		},
		err => {
			this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA); 
		});
}

capturingPicture alert is displaying but device camera is not opening.

capturingPicture(){
	alert('capturingPicture');

	const options: CameraOptions = {
		mediaType: this.camera.MediaType.PICTURE,
		quality : 75, 
                   destinationType : this.camera.DestinationType.DATA_URL, 
                   sourceType : this.camera.PictureSourceType.CAMERA, 
                  allowEdit : true,
                  encodingType: this.camera.EncodingType.JPEG,
                  targetWidth: 300,
                  targetHeight: 300,
                 saveToPhotoAlbum: false
	};
	  
	this.camera.getPicture(options).then((imageData) => {
		let base64Image = 'data:image/jpeg;base64,' + imageData;
		alert('image data => '+ imageData);
	}, (err) => {
		// Handle error
		alert('get picture error => '+ err);
	});
}

As per documentation, wrote code, but still not getting whether it is code/plugin/verions/OS etc issue.
Please guide me with this.

thank you.

[amjadsalhab]

did you fixed this sir?

[saravanans55]

At the first time your code not worked for me, after that I just removed that “if(status == Diagnostic.permissionStatus.GRANTED)” condition, Then now it’s working fine for me. Thanks @wthijmen