Cordova camera plugin works on emulator and not on Android device

Viewed 904

I'm building an app that allows the user to take photos. I'm using Cordova - JS/CSS/HTML - to write the script. The Cordova camera plugin works perfectly on my Android emulator in Android Studio, but I can't get it to work on my device. Here's what I'm working with:

IRL Phone: Samsung Galaxy S9+

Cordova version: 10.0.0

Cordova camera plugin version: 5.0.1

PhoneGap cli-6.5.0 (iOS 4.3.1 / Android 6.1.2 / Windows 4.4.3)

I'm not sure if it has something to do with an inconsistency in the build (I heard Cordova versions can have an effect on plugins in certain environments) or if my code is just not friendly for a real Android device.

Here's the plugin code:

let app = {
    init: function(){
        document.getElementById('btn').addEventListener('click', app.takephoto);
    },
    takephoto: function(){
        let opts = {
            quality: 80,
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.CAMERA,
            mediaType: Camera.MediaType.PICTURE,
            encodingType: Camera.EncodingType.JPEG,
            cameraDirection: Camera.Direction.BACK,
            targetWidth: 300,
            targetHeight: 400
        };

        navigator.camera.getPicture(app.ftw, app.wtf, opts);
    },
    ftw: function(imgURI){
        document.getElementById('msg').textContent = imgURI;
        document.getElementById('photo').src = imgURI;

    },
    wtf: function(msg){
        document.getElementById('msg').textContent = msg;
    }
};

document.addEventListener('deviceready', app.init);

Here's the HTML that runs the script on the app's page from the file camera.js in a separate folder:

        <div class="page">
            <p class="code"><img src="img/logo.png" alt="image" id="photo" /></p>
            <p class="node"><button id="btn">Take Picture</button></p>
            <p id="msg"></p>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script src="js/camera.js"></script>

And here's the information in my head tag:

<meta http-equiv="Content-Security-Policy" 
content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; 
style-src 'self' 'unsafe-inline'; 
media-src *; 
script-src 'self' 'unsafe-inline';
img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

<link rel="stylesheet" type="text/css" href="css/index.css" /> 
<title>4-Point Inspection</title>

Maybe this has something to do with the XML or build files? This is my first Cordova app so I'm a little new to this. Any ideas why it works on emulator and not on my Galaxy S9+?

EDIT: I have gone ahead and added my config.xml (found in \platforms\android\app\src\main\res\xml):

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <feature name="Camera">
        <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
    </feature>
    <feature name="Whitelist">
        <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
        <param name="onload" value="true" />
    </feature>
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </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:*" />
    <allow-intent href="market:*" />
    <preference name="loglevel" value="DEBUG" />
</widget>

And here is the AndroidManifest (found in \platforms\android\app\src\main):

<?xml version='1.0' encoding='utf-8'?>
2 Answers

Before starting camera check user allows inapp permission for Camera, like your day to day social apps requests at very first time you open camera after installing the app. Before that goto app manager and enable camera permission and check if camera opens.

You can use https://www.npmjs.com/package/cordova-plugin-android-permissions to get inApp permissions but only for android not for ios

Try updating your widget tag since your android namespace is missing xmlns:android="http://schemas.android.com/apk/res/android

<widget id="com.your.app.id" version="1.0.0"
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">
Related