Problem Solving for Camera on Ionic and Cordova with Android 13 API Level 33: Step-by-Step Guide

SOFTWARE DEVELOPMENT

Recently, I encountered a seemingly simple challenge that, due to version incompatibility and recent updates on Android, ended up consuming an entire morning. This experience motivated me to share some crucial tips to save precious time, time that could otherwise be spent on more productive activities. If you find yourself working on an app that requires access to the device’s camera and you are struggling with Android’s new permission policies, which require a real-time request, but without success, I invite you to follow the steps I have outlined below.

To overcome the difficulties related to using the camera in an Ionic app with Cordova for API level 33 (Android 13), here is a step-by-step guide:

Environment Setup:

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. Camera Plugin Update

Open the terminal in your project and run the command to remove the current version of the camera plugin:

$ionic cordova plugin remove cordova-plugin-camera

Install the latest version of the camera plugin:

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

Also add the runtime permissions plugin, if it’s not already included in your project:

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

2. Configuration Settings Check

Edit the config.xml file in your project to ensure there are no restrictions on the maximum SDK version. Remove or update any references to android-maxSdkVersion to ensure the app is compatible with Android 13. In my case, I only left this preference:

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

3. Updating Cordova-Android

Check the current version of Cordova-Android in your project with:

$ionic cordova platform ls

Update Cordova-Android to the version that supports Android 13, if necessary. As of my last knowledge, you should aim for at least version 10.x of Cordova-Android:

$ionic cordova platform remove android

$ionic cordova platform add android@latest

Make sure to check the official Cordova documentation for the specific version compatible with Android 13.

4. Permissions Check

Add code for requesting permissions at runtime to your project, following the official guidelines of Android and Cordova. This is particularly important for Android 13, which has stricter permission policies.

An example of requesting permissions in Ionic/Cordova might be:

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. Insert the Configuration to Direct Permissions in AndroidManifest.xml

In the config.xml, insert the following configuration in the android platform section:

<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>

 ...

and add the following directive in the widget configuration at the top of the config.xml file:

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

6. Test on a Real Device

Run the app on the device. After making all the changes, test the app on a real device with Android 13 to ensure that the camera functions correctly.

ionic cordova run android --device

These steps should help you resolve the issue with the camera in Ionic on Android 13. However, if you still encounter difficulties, consider checking development forums like Stack Overflow or the official support channels of Ionic and Cordova for specific solutions or known issues.

Moreover, as already mentioned, if you continue to experience issues with Cordova, you might consider migrating your project to Capacitor, which offers a more modern and integrated approach for incorporating native functionalities into Ionic apps.

P.S.

I also leave you with an example for starting the video to use in the angular/ionic code.

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