Phonegap camera doesn't work

Question

My Android app need to takes picture but Camera plugin doesn't work. When I click on the button nothing happens.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"/>
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">    
    document.addEventListener("deviceready",onDeviceReady,false);
      function onDeviceReady() {              
          alert("ready");
        }
    function capturePhoto()
    {
      navigator.camera.getPicture(onSuccess, onFail, { quality: 50, 
      destinationType: Camera.DestinationType.FILE_URI }); 
    }

    function onSuccess(imageURI) {
      var image = document.getElementById('myImage');
      image.src = imageURI;
    }

    function onFail(message) {
      alert('Failed because: ' + message);
    }    

</script>
  </head>
  <body>
    <button onclick="capturePhoto()">Capture</button> <br>
    <button onclick="onDeviceReady()">alert</button> <br>
    <img id="myImage" src="" />
  </body>
</html>

I added second button only to check if button works(and it does).

config.xml

    <?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns= "http://www.w3.org/ns/widgets"
        xmlns:gap= "http://phonegap.com/ns/1.0"
        id= "testaplikacji"
        versionCode= "1"
        version = "1.0.0" >
    <name>Camera</name>
    <description>Camera test</description>
    <author>Sebastian</author>
    <gap:platform name="android" />
    <gap:plugin name="org.apache.cordova.dialogs" />
    <gap:plugin name="org.apache.cordova.camera" /> 
    <gap:plugin name="cordova-plugin-camera" />

    <feature name="Camera">
        <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
    </feature>


    <access origin="*"/>
    <gap:config-file platform="android" parent="/manifest" mode="add" xmlns:android="http://schemas.android.com/apk/res/android">
        <uses-permission android:name="android.permission.CAMERA"></uses-permission>
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    </gap:config-file>

</widget>

I tried with and without permissions. I tried different plugins. I tried with this gist: https://gist.github.com/dhavaln/2238017

And also code from this tutorial: https://www.youtube.com/watch?v=KlBfmHDZjmg

Nothing works. I waste a lot of time trying to make this works. Please help me.

Do you see the "ready" message when starting your app. (Without clicking on the alert button)? — NineBerry, May 14 '16 at 13:30
Try to use `adb logcat` to see whether there are any meaningful hints or warnings output while running the app. — NineBerry, May 14 '16 at 13:59
When I clicked on "capture" button I got this: I/chromium: [INFO:CONSOLE(15)] "Uncaught TypeError: Cannot read property 'getPicture' of undefined", source: file:///data/data/.../files/downloads/app_dir/index.html (15) — Sebastian M, May 14 '16 at 14:09
index.html line 15 is navigator.camera.getPicture... in capturePhoto() function. So now I know where is the problem. Thank you for suggesting using logcat. But I don't know why this error occurs. Do you have some ideas how can I fix it? — Sebastian M, May 14 '16 at 14:11
Do you use the phonegap cloud buid service or build the app on your own computer? — NineBerry, May 14 '16 at 14:21
I use phonegap cloud build service. And according to this service I've got installed "cordova-plugin-camera" pgb 1.2.0, "org.apache.cordova.camera" pgb 0.3.6 and "org.apache.cordova.dialogs" pgb 0.3.0. Could this problem be caused by having two camera plugins? — Sebastian M, May 14 '16 at 14:26
When `navigator.camera` is still undefined even after you have received the `deviceready` notification, this means that the camera plugin is not there or not working properly. — NineBerry, May 14 '16 at 14:32

NineBerry · Accepted Answer · 2016-05-14T15:16:59.500

I have tested this with the phonegap build server and the HTML code you supplied works (with the change from my other answer) when using this minimal config.xml file with your html file. Also, be sure not to upload the phonegap.js in the Zip archive to the build server. An extra one will be added automatically during the build.

<?xml version="1.0" encoding="UTF-8" ?>
    <widget xmlns   = "http://www.w3.org/ns/widgets"
        xmlns:gap   = "http://phonegap.com/ns/1.0"
        id          = "com.stackoverflow.example.SO37227132"
        versionCode = "10" 
        version     = "1.0.0" >

    <!-- versionCode is optional and Android only -->

    <name>PhoneGap Example</name>

    <description>
        An example for phonegap build docs. 
    </description>

    <author href="https://build.phonegap.com" email="support@phonegap.com">
        Hardeep Shoker 
    </author>

    <platform name="android" />
    <plugin name="org.apache.cordova.camera" source="pgb" />
</widget>

score 0 · Answer 2 · answered May 14 '16 at 13:20

0

You use a variable named image at two different places. But these are two different variables. Get the image reference where you need it in the onSuccess function.

function onSuccess(imageURI) 
{
      var image = document.getElementById('myImage');
      image.src = imageURI;
}

answered May 14 '16 at 13:20

NineBerry

26,306
3
62
93

I changed this but it didn't help. Still doesn't work. – Sebastian M May 14 '16 at 13:27

Phonegap camera doesn't work

2 Answers2