Using Camera in Android

Sorry to be new and asking so many questions, I’m slowly getting things done I think…

Camera this time.

I add the camera control and it allows me to choose a file from the storage on my PC or phone if installed.

When installing to the phone, I am not asked any permissions for using the camera, and I’m guessing this is the reason why I can only choose an existing picture and not use the camera for a new one.

I’m reading as much as I can in the document, and have added a few things to the config poperties for PhoneGap found here: https://wiki.nsbasic.com/Using_the_PhoneGap_API

But again, I’m banging my head against a brick wall.

So far I’ve added to the config.xml file:

<plugin name="cordova-plugin-barcodescanner" source="npm" />

and

<gap:plugin name="cordova-plugin-camera" source="npm" >
<variable name="CAMERA_USAGE_DESCRIPTION" value="{id} camera use" />
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="{id} photo use" />
</gap:plugin>

<gap:plugin name="cordova-plugin-geolocation" source="npm" >
<variable name="GEOLOCATION_USAGE_DESCRIPTION" value="{id} Location use." />
</gap:plugin>

Is there an actual detailed step by step tutorial on getting the camera working on both an Android and iOS device that I can study? I can’t find anything at the moment.

Thanks

Anyone at all?

Surely I’m not the first person to want to build a native Android in my case, or iOS app that allows the user to take a picture with the camera. The camera example works fine, but it only allows you to choose an existing file, I want the user to be able to take a picture and then show it in a picture box.

I have done a lot more reading, even tried a few other things with the config.xml in project properties but I’m just grasping at straws now.

Hey, This works for me:

On the config.xml:
Call the “cordova-plugin-camera” plugin, source “npm” version “2.4.1”

On the code, to call the camera:

Function TakePhoto()
    options={quality : 25, _
    destinationType : 0, _
    sourceType : 1, _
    correctOrientation : True, _
    saveToPhotoAlbum : False, _
    allowEdit: False}
    navigator.camera.getPicture(onPictureReturned, onPictureError, options)
    NSB.WaitCursor(True)
End Function

Hi melux,

Thanks for the reply. I’ve tried a couple of things you’ve suggested but I’m obviously missing something.

I’ve added the following line to the config.xml file:

<plugin name=“cordova-plugin-camera” source “npm” version “2.4.1” />

But this results in an error when I try to make a native app with PhoneGap as a manformed config.xml file. Do I have this line correct? Is there anywhere in particular it needs to go in the xml file? I’ve just put in the lower section like this:

<!-- Platforms: Customize as needed. -->
<gap:platforms>
   <gap:platform name="android" />
         
   <gap:platform name="ios" />
   <gap:platform name="winphone" />
</gap:platforms>

<plugin name=“cordova-plugin-camera” source “npm” version “2.4.1” />

<plugin name="cordova-plugin-statusbar" source="npm" />
  <preference name="StatusBarOverlaysWebView" value="{phoneGapStatusBarOverlay}" />
  <preference name="StatusBarBackgroundColor" value="{phoneGapStatusBarColor}" />
  <preference name="StatusBarStyle" value="{phoneGapStatusBarStyle}" />

<plugin name="cordova-plugin-whitelist" source="npm" />
  <allow-navigation href="*" />
  <access origin="*" />
  <allow-intent href="*" />
</widget>

As I can’t get it to compile, I’m not sure yet what I’m supposed to be doing with the TakePhoto function you also posted. I take it that I need to ignore the camera icon (since I can’t add code to that control) and create a button or something that will call the TakePhoto() Function when clicked?

Thanks for your help.

Here’s what I use:

<plugin name='cordova-plugin-camera' spec='~4.0.3' />

Your placement in the file is fine.

Ok, think I’m getting somewhere. That now builds with PhoneGap - first problem solved :slight_smile:

When I install the app, it’s still not asking for camera permission, is that normal? My phone is running a rather old version of Android, I know in the newer versions security has become tighter at install time, not runtime, to get camera permission from the user?

Now that I have it at least buidling and installing without problems, what is the story with the TakePhoto function that @mexlum posted. I’ve seen similar to this in the wiki I think.

I’ve created a separate button with this code in the on_click event and it thows an error:

Uncaught TypeError: Cannot read property ‘getPicture’ of undefined. line 57 column 22

Thanks both of you for your help, I feel like I’m at least getting somewhere with this.

I’m still getting nowhere with being able to get a picture directly from the camera, only able to select an existing picture from the phone which is really not what I want to force the user to do.

When I was playing around with Android Studio last month I had a lot of issues resolving the problem, but in the end I think the problem was solved by adding pemission requests to the manifest - is this possibly what I need to do?

Something like this:

<uses-permission
    android:required="true"
    android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera2.full" />
<uses-feature android:name="android.hardware.camera2.autofocus" />

And if so, where would this go exactly? I’d be guessing in the config.xml in the Project properties?

Still plugging away at this, and slowly getting somewhere:

I found in this document https://wiki.nsbasic.com/Using_the_PhoneGap_API#Camera that I needed to add the following line to the config.xml in the phonegap properties…

<gap:plugin name="cordova-plugin-camera" source="npm" >
  <variable name="CAMERA_USAGE_DESCRIPTION" value="{id} camera use" />
  <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="{id}  photo use" />
</gap:plugin>

<gap:plugin name="cordova-plugin-geolocation" source="npm"  >
  <variable name="GEOLOCATION_USAGE_DESCRIPTION" value="{id} Location use." />
 </gap:plugin>

Which I’ve now done. When installing the app, I am now told the app wants to access the camera etc. SUCCESS

Now I’m at another problem, I’ve added a button (Button1) which will call the TakePhoto() Function whcih is copied from the same link above…

Function Button1_onclick()
     TakePhoto()
End Function

Function TakePhoto()
  options={quality : 75, _
    destinationType : 1, _
    sourceType : 1, _
    allowEdit: True}
  navigator.camera.getPicture(onPictureReturned, onPictureError, options)
End Function

Function onPictureReturned(ImageURI)
  Image1.firstChild.src=ImageURI
End Function

Function onPictureError(message)
  MsgBox "Failed because " & message
End Function

This is of course similar to what @mexlum sugggested above.

This throws up an error - Cannot read property ‘getpicture’ of undefined in line 61 coloumn 20

Any ideas?

I’ll keep plugging away and post if I find out what I’m now doing wrong.

Are you testing on the desktop or running in PhoneGap?

I am testing it and running it on both, obviously running in a browser is going to create issues because there is no camera attached - but yeah, I get this error on my phone after making a native Android app with phonegap.

Interestingly - the lines I posted above which are now forcing the app on my phone to ask for camera permissions I actually had in my very first post in this thread, but I had since removed them.

However, adding them back in in conjunction with <plugin name=‘cordova-plugin-camera’ spec=’~4.0.3’ /> is what was needed.

I was googling a bit about not being able to read the property ‘getpicture’ and am wondering if I actually need to install Cordova on my PC along with the Camera library which will then get linked in with my project at compile time? or is this something that phonegap should be taking care of for me?

The camera object is created by the PhoneGap plugin - so it won’t be available on the desktop.

Connect the Chrome Remote Debugger to your app running the PhoneGap apk on your device. You can use the Console tab to see if navigator.camera exists. If not, you need to address that first.

I’ll give that a go. Considering I haven’t installed Cordova and node.js which is a prerequisite for Cordova, is it safe to say that this is why navigator.camera.getPicture() is throwing the error?

There is no need to install Cordova or node.js to do this. You may be mixing up PhoneGap Build with PhoneGap CLI.

Finally got around to hooking up to remote debugging.

This is the error that is reported when I start my app:

Could not find cordova.js script tag. Plugin loading may fail.

And here is the section of code from phonegap.js where it is failing to load if that’s of any help working out what is wrong:

 // Tries to load all plugins' js-modules.
// This is an async process, but onDeviceReady is blocked on onPluginsReady.
// onPluginsReady is fired when there are no plugins to load, or they are all done.
exports.load = function(callback) {
    var pathPrefix = findCordovaPath();
    if (pathPrefix === null) {
        console.log('Could not find cordova.js script tag. Plugin loading may fail.');
        pathPrefix = '';
    }
    injectIfNecessary('cordova/plugin_list', pathPrefix + 'cordova_plugins.js', function() {
        var moduleList = require("cordova/plugin_list");
        handlePluginsObject(pathPrefix, moduleList, callback);
    }, callback);
};

EDIT:

So with a little more digging, it seems I am missing this line:

<script type="text/javascript" src="cordova.js"></script>

Where exactly should this be put, assuming this is all I need to get things going?

No, that’s not it. Your project needs either phonegap.js or cordova.js (I think they’re the same) and it’s added automatically as part of the build process.

Now, back to what I suggested before:

Hopefully I’m in the right spot now - in console navigator is available, but not the navigator.camera namespace:

That means the Camera plugin is not loading. You need to have another look at your config file.

Do you have your own PhoneGap Build account? (it’s free) If you look there, you can see the build log for more clues.

Here is the build log, so looks like I need to change a few things up with Corodova versions in the config.xml and hopefully I should be right. Will report back how it goes, or feel free to post if you can see something obvious:

    Build Date: 2018-11-01 23:25:24 +0000
--------------------------------------------------------------------------------
PLUGIN OUTPUT
--------------------------------------------------------------------------------
Fetching plugin "cordova-plugin-camera" via npm
Installing "cordova-plugin-camera" at "4.0.3" for android
Plugin doesn't support this project's cordova-android version. cordova-android: 6.1.2, failed version requirement: >=6.3.0
Skipping 'cordova-plugin-camera' for android
Fetching plugin "cordova-plugin-geolocation" via npm
Installing "cordova-plugin-geolocation" at "4.0.1" for android
Plugin doesn't support this project's cordova-android version. cordova-android: 6.1.2, failed version requirement: >=6.3.0
Skipping 'cordova-plugin-geolocation' for android
Fetching plugin "cordova-plugin-device@2.0.2" via npm
Installing "cordova-plugin-device" at "2.0.2" for android
Fetching plugin "cordova-plugin-splashscreen@5.0.2" via npm
Installing "cordova-plugin-splashscreen" at "5.0.2" for android
Fetching plugin "cordova-plugin-vibration@3.1.0" via npm
Installing "cordova-plugin-vibration" at "3.1.0" for android
Fetching plugin "phonegap-plugin-barcodescanner@5.0.1" via npm
Installing "phonegap-plugin-barcodescanner" at "5.0.1" for android
Fetching plugin "cordova-plugin-compat@^1.0.0" via npm
Installing "cordova-plugin-compat" at "1.2.0" for android
Subproject Path: CordovaLib
Fetching plugin "cordova-plugin-bluetooth-serial@0.4.7" via npm
Installing "cordova-plugin-bluetooth-serial" at "0.4.7" for android
Fetching plugin "cordova-plugin-insomnia@4.3.0" via npm
Installing "cordova-plugin-insomnia" at "4.3.0" for android
Fetching plugin "cordova-plugin-flashlight@3.2.0" via npm
Installing "cordova-plugin-flashlight" at "3.2.0" for android
Plugin dependency "cordova-plugin-compat@1.2.0" already fetched, using that version.
Dependent plugin "cordova-plugin-compat" already installed on android.
Fetching plugin "cordova-plugin-statusbar" via npm
Installing "cordova-plugin-statusbar" at "2.4.2" for android
Fetching plugin "cordova-plugin-whitelist" via npm
Installing "cordova-plugin-whitelist" at "1.3.3" for android

               This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

So I’ve changed my PhoneGap version in my project properties to cli-7.1.0 which according to this page: https://build.phonegap.com/current-support should take me up to Version 6.3.0 for Android Builds.

The built is taking a really long time, and eventually comes up with an error:

error
Error: Source path does not exist: icons/android/ldpi.png

In the PhoneGap Native Build status.

I’ll await some more advice, because I’m really just guessing at solutions for the moment.

Cheers

I use cli-8.0.0 with most projects these days.

Later versions of PhoneGap Build require you have the complete set of icons and splashscreens.

https://wiki.nsbasic.com/SplashScreens