Search code examples
javascriptandroidhtmlphonegap-pluginsphonegap-build

Phonegap camera doesn't work

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.

Solution

  • 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="[email protected]">
        Hardeep Shoker 
    </author>

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