Thursday 31 December 2020

Cordova camera plugin works on emulator and not on Android device

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

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



from Cordova camera plugin works on emulator and not on Android device

No comments:

Post a Comment