Search code examples
cordovacordova-plugin-camera

cordova camera plugin is not loading after moving to targetSdkVersion 31


After updating my App to targetSdkVersion 31 camera is not loading anymore. When clicking on cameraBtn as shown bellow my app displays the alert "Camera unavailable". navigator.camera is undefined. I'm familiar with the plugin usage, I have been using it for the last years successfully, but for some reason now I'm moving to targetSdkVersion 31 it is not working anymore. I appreciate if anybody can give me directions here!

document.addEventListener('deviceready', function() {
    cameraBtn.addEventListener('click', function() {
        if (!navigator.camera) alert("Camera unavailable")
        else if (!navigator.camera.getPicture) alert(navigator.camera)
        navigator.camera.getPicture(
            function(imgData) { // success
            },
            function(msg) { // fail
            },
            {
                quality: 60,
                destinationType: Camera.DestinationType.DATA_URL,
                sourceType: Camera.PictureSourceType.CAMERA,
                mediaType: Camera.MediaType.PICTURE,
                encodingType: Camera.EncodingType.JPEG,
                cameraDirection: Camera.Direction.BACK,
                correctOrientation: true,
                targetWidth: 512,
                targetHeight: 512
            }
        );
    });
}); 

Here is my app plugin list:

C:\htdocs\app\myapp>cordova plugin list
cordova-plugin-barcodescanner 0.7.4 "BarcodeScanner"
cordova-plugin-camera 6.0.0 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.1.0 "Device"
cordova-plugin-geolocation 4.1.0 "Geolocation"
cordova-plugin-whitelist 1.3.4 "Whitelist"

And this is my config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.myapp" 
        version="1.8.1" 
        android-versionCode="10036" 
        xmlns="http://www.w3.org/ns/widgets" 
        xmlns:android="http://schemas.android.com/apk/res/android" 
        xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Myapp</name>
    <description>
    </description>
    <author email="[email protected]" href="http://www.mydomain.com.br">
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <config-file after="uses-permission" parent="/manifest" target="AndroidManifest.xml">
            <uses-permission android:name="android.permission.INTERNET" />
            <uses-permission android:name="android.permission.CAMERA" />
            <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
            <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
            <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
        </config-file>
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
            <application android:usesCleartextTraffic="true" />
        </edit-config>
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
            <activity android:exported="true" />
        </edit-config>
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <edit-config file="*-Info.plist" mode="merge" target="NSLocationAlwaysAndWhenInUseUsageDescription">
            <string>Myapp precisa da permissão para acessar a sua geolocalização para identificar a localização do seu dispositivo no módulo de Documentos de RH</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
            <string>Myapp precisa da permissão para acessar a sua geolocalização para identificar a localização do seu dispositivo no módulo de Documentos de RH</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSLocationAlwaysUsageDescription">
            <string>Myapp precisa da permissão para acessar a sua geolocalização para identificar a localização do seu dispositivo no módulo de Documentos de RH</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
            <string>Myapp precisa da permissão para acessar a sua câmera para anexar fotos aos seus chamados</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
            <string>Myapp precisa da permissão para acessar a sua galeria para anexar fotos aos seus chamados</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryAddUsageDescription ">
            <string>Myapp precisa da permissão para acessar a sua galeria para salvar as fotos que serão anexadas aos seus chamados</string>
        </edit-config>
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <plugin name="cordova-plugin-geolocation" spec="~4" />
    <plugin name="cordova-plugin-camera" spec="^6" />
    <plugin name="cordova-plugin-barcodescanner" spec="^0.7.4" />
    <preference name="android-minSdkVersion" value="30" />
    <preference name="android-targetSdkVersion" value="31" />
    <icon src="www/icon.png" />
    <icon height="57" platform="ios" src="ios/icon-57.png" width="57" />
    <icon height="72" platform="ios" src="ios/icon-72.png" width="72" />
    <icon height="114" platform="ios" src="ios/icon-114.png" width="114" />
    <icon height="120" platform="ios" src="ios/icon-120.png" width="120" />
    <icon height="144" platform="ios" src="ios/icon-144.png" width="144" />
    <icon height="152" platform="ios" src="ios/icon-152.png" width="152" />
    <icon height="1024" platform="ios" src="ios/icon-1024.png" width="1024" />
</widget>

Solution

  • I could solve the problem removing camera plugin and adding it with ANDROIDX_CORE_VERSION 1.8.0 as suggested on cordova-plugin-camera github

    cordova plugin add cordova-plugin-camera --variable ANDROIDX_CORE_VERSION=1.8.0
    

    Previously package.json was showing ANDROIDX_CORE_VERSION 1.6.+