Grant camera permission

Ionic Framework ionic-v3
1

Hi all,

Im running my app but cordova plugins like Camera, Gallery are not requesting permissions.
My ionic info:

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

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.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

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Hope some one know a fix for enabling the camera and gallery.

Thanks in advance

2

Some one know a solution for this?
Already tested Diagnostic and it’s not working:


    PERMISSION = {
        WRITE_EXTERNAL: this.diagnostic.permission.WRITE_EXTERNAL_STORAGE,
        READ_EXTERNAL: this.diagnostic.permission.READ_EXTERNAL_STORAGE,
        CAMERA: this.diagnostic.permission.CAMERA,
    };


constructor()
{
  if(this.platform.is('android')){
     this.requestAllPermissions();
  }
}

requestAllPermissions()
    {
        const permissions = Object.keys(this.PERMISSION).map(k => this.PERMISSION[k]);
        this.diagnostic.requestRuntimePermissions(permissions).then((status) => {
            alert(JSON.stringify(status));
        }, error => {
            console.error('permission error:', error);
        });
    }

Now im getting a alert message with the following:

{"WRITE_EXTERNAL_STORAGE:"DENIED_ALWAYS","READ_EXTERNAL_STORAGE":"DENIED_AWLAYS",CAMERA: "DENIED_ALWAYS"}

So, i don’t know how to fix this issue.

3

Did you forgot to add this plugin ?

Also I only see an alert wich displays the status of your permissions but not an handler wich interacts when you press YES or NO.

4

I’ve that plugin already in my app.
I don’t have to create a modal to press yes or no?
It’s a plugin to request the permission and it will trigger the popup from android it’s self?

5

Ive never used this plugin and ive never had problems with iOS permissions, so i am not sure how it works on android.

You should edit your code like its posted in the Ionic Docs. Since i see that you arent using the constructor properly and also don’t see that you imported that plugin into your page. Try to call the permission handler like that when you try to acces your camera.

6

Already implemented that code.
Just minimized it to post it here.

I included the plugin and also in the constructor.
I will post my full code below.

// Ionic
import { Component, Pipe } from "@angular/core";
import { AlertController, NavController, Platform } from "ionic-angular";
import { DomSanitizer } from '@angular/platform-browser';


// Pagina's
import { AuthenticationAuthPage } from '../../../pages/authentication/auth/auth';
import { InventarisatieStreetsPage } from '../../../pages/inventarisatie/streets/streets';
import { GeneralOptionsPage } from '../../../pages/general/options/options';

// Globals
import "rxjs/add/operator/map";
import { Device } from '@ionic-native/device';
import { AndroidPermissions } from '@ionic-native/android-permissions';
import { Diagnostic } from '@ionic-native/diagnostic';


// Providers
import { Handlers } from '../../../providers/handlers/handlers';
import { AuthService } from "../../../providers/auth-service/auth-service";
import { LocalstorageProvider } from "../../../providers/localstorage/localstorage";
import { CallsProvider } from "../../../providers/calls/calls";

@Pipe({
    name: 'projects'
})

@Component({
    selector: 'page-projecten',
    templateUrl: 'projecten.html'
})

export class InventarisatieProjectenPage {

    // Object
    oProjects               :   any;
    oStreetList             :   object;

    // Array
    aItems                  :   any;
    aItemsForGrid           :   any;
    aSelectedItem           :   any;

    // String
    sSearchQuery            : string = '';
    sAppname                : string;
    sLogo                   : string;
    sColor                  : string;
    sUsername               : string;
    sSearchString           : string = '';
    sWhite                  : string;

    // Number
    iApp                    :   number;

    // Opties
    oOptions                :   any = {
        'bSave': '',
        'iQuality': ''
    }

    // You can add many other permissions
    PERMISSION = {
        WRITE_EXTERNAL: this.diagnostic.permission.WRITE_EXTERNAL_STORAGE,
        READ_EXTERNAL: this.diagnostic.permission.READ_EXTERNAL_STORAGE,
        CAMERA: this.diagnostic.permission.CAMERA,
    };

    // Constructor
    constructor(
        private localstorage        :   LocalstorageProvider,
        private device              :   Device,
        private handler             :   Handlers,
        private auth                :   AuthService,
        private navCtrl             :   NavController,
        private calls               :   CallsProvider,
        private alertCtrl           :   AlertController,
        private _DomSanitizer       :   DomSanitizer,
        private platform            :   Platform,
        private androidPermissions  :   AndroidPermissions,
        private diagnostic          :   Diagnostic
    ) 
    {
        // If we navigated to this page, we will have an item available as a nav param
        this.handler.alertToast('Welkom terug '+ this.auth.getUsername());
        this.sLogo = this.localstorage.getStorage('logo');
        this.sColor = this.localstorage.getStorage('color');
        this.sWhite = '#fff';

        if(this.platform.is('android'))
        {
            this.requestAllPermissions();
        }
    }

    // There is also a method that takes an array of permissions to ask for them at once
    requestAllPermissions()
    {
        const permissions = Object.keys(this.PERMISSION).map(k => this.PERMISSION[k]);
        this.diagnostic.requestRuntimePermissions(permissions).then((status) => {
            alert(JSON.stringify(status));
        }, error => {
            alert('Error: '+ error);
        });
    }

    /**
     * Update de list met de gegevens zoals opgeslagen in de auth-service provider.
     * Deze functie wordt aangeroepen als je bijvoorbeeld terugkomt van een create of edit pagina.
     */
    ionViewDidEnter()
    {
        this.getProjects();
        this.initalizeOptions();

        if(this.platform.is('android'))
        {
            this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
                success => alert('Succes granted the permissions'),
                err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)
            );

            this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.CAMERA, this.androidPermissions.PERMISSION.GET_ACCOUNTS]);
        }
    }
7

No popup nothing ? :disappointed_relieved:

Try instead of ionViewDidEnter() -> ionViewDidLoad() so you will make sure that the page totally loads the full code. Else try to add a button wich executes the docs code just for testing ofc.

ionViewDidLoad()


            this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
                success => alert('Succes granted the permissions'),
                err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)
            );

            this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.CAMERA, this.androidPermissions.PERMISSION.GET_ACCOUNTS]);
8

No popup showing up yes.

I will try to put it in ionViewDidLoad().
Will let you know.

9

Just based on your suggestion to put it in a ionViewDidLoad().
Unfortunately it didn’t work.

Hope some one know’s a suggestion to solve this and let Android give the push notification to allow this element of my device.

@cherry Thanks for your help. If you know something else please let me know.

10

I might found your solution. You didn’t imported your camera, that could have caused the problem. :grin:

import { Camera, CameraOptions } from '@ionic-native/camera';

11

Should not been the problem.
On the page where I execute the camera request is it included in the header.

But on this page I’m only asking for the permissions and further nothing to do with the camera it self.

12

how did you solve this ?

13

Issue: Camera Authorization on API 23 and above
A way to solve:

  1. 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?',result.hasPermission)
      },
      err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)
    );

Good evening