Risoluzione Problemi Camera su Ionic e Cordova con Android 13 Api Level 33: Guida Passo-Passo

APPUNTI, INFORMATICA, SVILUPPO SW, TUTORIAL

Recentemente, mi sono imbattuto in una sfida apparentemente semplice che, a causa di incompatibilità di versione e recenti aggiornamenti su Android, ha finito per consumare un’intera mattinata. Questa esperienza mi ha motivato a condividere alcuni suggerimenti cruciali per risparmiare tempo prezioso, tempo che potrebbe essere altrimenti impiegato in attività più produttive. Se vi trovate a lavorare su un’app che necessita dell’accesso alla fotocamera del dispositivo e vi state scontrando con le nuove politiche di permessi di Android, che richiedono una richiesta in tempo reale, ma senza successo, vi invito a seguire i passaggi che ho delineato di seguito.

Per superare le difficoltà legate all’utilizzo della fotocamera in un’app Ionic con Cordova per API livello 33 (Android 13), ecco una guida passo-passo:

Configurazione dell’ambiente:

ionic --version
7.2.0

nvm current
v18.19.0

gradle --version

------------------------------------------------------------
Gradle 7.4.2
------------------------------------------------------------

Build time: 2022-03-31 15:25:29 UTC
Revision: 540473b8118064efcc264694cbcaa4b677f61041

Kotlin: 1.5.31
Groovy: 3.0.9
Ant: Apache Ant(TM) version 1.10.11 compiled on July 10 2021
JVM: 17.0.10 (Eclipse Adoptium 17.0.10+7)
OS: Windows 11 10.0 amd64

javac -version
javac 17.0.10

node --version
v18.19.0

cordova --version
12.0.0 (cordova-lib@12.0.1)

1. Aggiornamento del Plugin della Camera

Apri il terminale nel tuo progetto e esegui il comando per rimuovere la versione corrente del plugin della camera:

$ionic cordova plugin remove cordova-plugin-camera

Installa l’ultima versione del plugin della camera:

$ionic cordova plugin add cordova-plugin-camera@latest

Aggiungi anche il plugin per i permessi di runtime, se non è già incluso nel tuo progetto:

$ionic cordova plugin add cordova-plugin-android-permissions@latest

2. Verifica delle Impostazioni di Configurazione

Modifica il file config.xml nel tuo progetto per assicurarti che non ci siano restrizioni sulla versione massima del SDK. Rimuovi o aggiorna qualsiasi riferimento a android-maxSdkVersion per assicurarti che l’app sia compatibile con Android 13. Nel mio caso ho lasciato solo questa preference:

<preference name="android-targetSdkVersion" value="33" />

3. Aggiornamento di Cordova-Android

Verifica la versione attuale di Cordova-Android nel tuo progetto con:

$ionic cordova platform ls

Aggiorna Cordova-Android alla versione che supporta Android 13, se necessario. Al momento della mia ultima conoscenza, dovresti mirare almeno alla versione 10.x di Cordova-Android:

$ionic cordova platform remove android

$ionic cordova platform add android@latest

Assicurati di controllare la documentazione ufficiale di Cordova per la versione specifica compatibile con Android 13.

4. Controllo dei Permessi

Aggiungi il codice per la richiesta dei permessi a runtime nel tuo progetto, seguendo le linee guida ufficiali di Android e Cordova. Questo è particolarmente importante per Android 13, che ha politiche di permessi più stringenti.

Un esempio di richiesta dei permessi in Ionic/Cordova potrebbe essere:

document.addEventListener('deviceready', function () {

      var permissions = cordova.plugins.permissions;

      permissions.requestPermission(permissions.CAMERA, successCallback, errorCallback);

      function successCallback() {

        console.log('Camera permission granted');

      }

      function errorCallback() {

        console.log('Camera permission denied');

      }

    }, false);

5. Inserisci la configurazione per indirizzare i permessi su AndroidManifest.xml

Nel config.xml inserire  nella sezione platform android la seguente configurazione:

<platform name="android">

       ....

       <config-file mode="merge" parent="/*" target="AndroidManifest.xml">

            <uses-permission android:name="android.permission.CAMERA" />

            <uses-feature android:name="android.hardware.camera" />

            <uses-feature android:name="android.hardware.camera.autofocus" />

        </config-file>

 ...

ed aggiungere nella configurazione del widget in testa al file config.xml la seguente direttiva:

<widget ...  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">

6. Test su Dispositivo Reale

Esegui l’app sul dispositivo. Dopo aver apportato tutte le modifiche, testa l’app su un dispositivo reale con Android 13 per assicurarti che la camera funzioni correttamente.

ionic cordova run android --device

Questi passaggi dovrebbero aiutarti a risolvere il problema con la camera in Ionic su Android 13. Tuttavia, se incontri ancora difficoltà, considera di controllare i forum di sviluppo come Stack Overflow o i canali ufficiali di supporto di Ionic e Cordova per soluzioni specifiche o problemi noti.

Inoltre, come già menzionato, se continui a riscontrare problemi con Cordova, potresti valutare di migrare il tuo progetto a Capacitor, che offre un’approccio più moderno e integrato per incorporare funzionalità native nelle app Ionic

P.S.

Vi lascio anche un esempio per lo start video da usare nel codice angular/ionic

startVideo() {

    const facingMode = 'environment'; // Use the rear camera

    const constraints = {

      video: { facingMode: facingMode, width: { exact: window.innerWidth } },

      audio: false

    };

    navigator.mediaDevices.getUserMedia(constraints)

      .then(stream => {

        this.videoElement.nativeElement.srcObject = stream;

      })

      .catch(err => {

        console.error("Error accessing the webcam", err);

      });

  }
Se vuoi farmi qualche richiesta o contattarmi per un aiuto riempi il seguente form

    Comments

    Copyright © Domenico Soriano - All Rights Reserved