Problem Solving for Camera on Ionic and Cordova with Android 13 API Level 33: Step-by-Step Guide
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);
});
}
I am passionate about technology and the many nuances of the IT world. Since my early university years, I have participated in significant Internet-related projects. Over the years, I have been involved in the startup, development, and management of several companies. In the early stages of my career, I worked as a consultant in the Italian IT sector, actively participating in national and international projects for companies such as Ericsson, Telecom, Tin.it, Accenture, Tiscali, and CNR. Since 2010, I have been involved in startups through one of my companies, Techintouch S.r.l. Thanks to the collaboration with Digital Magics SpA, of which I am a partner in Campania, I support and accelerate local businesses.
Currently, I hold the positions of:
CTO at MareGroup
CTO at Innoida
Co-CEO at Techintouch s.r.l.
Board member at StepFund GP SA
A manager and entrepreneur since 2000, I have been:
CEO and founder of Eclettica S.r.l., a company specializing in software development and System Integration
Partner for Campania at Digital Magics S.p.A.
CTO and co-founder of Nexsoft S.p.A, a company specializing in IT service consulting and System Integration solution development
CTO of ITsys S.r.l., a company specializing in IT system management, where I actively participated in the startup phase.
I have always been a dreamer, curious about new things, and in search of “new worlds to explore.”
