Home > database >  cordova camera plugin is not loading after moving to targetSdkVersion 31
cordova camera plugin is not loading after moving to targetSdkVersion 31

Time:12-03

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>

CodePudding user response:

have you mentioned the lines below in deviceready?

sourceType=navigator.camera.PictureSourceType;

also the try replacing Camera.MediaType.PICTURE with pictureSource.PHOTOLIBRARY and even the mediaType should be mentioned in deviceready

Please note : the cordova-plugin-camera should be of the latest version

CodePudding user response:

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.

Anybody can tell what exactly ANDROIDX_CORE_VERSION stands for?

  • Related