CODEWITHSUNDEEP
javascriptandroidcordovacamera
Ian Powell
Ian Powell

Reputation: 131

Phonegap(3.0.0) Camera not successful on first try

For testing purposes I copied the full example found on the phonegap camera API and I put an alert on onPhotoDataSuccess to test when the function is fired. On the first photo taken the alert will not show. However after the first attempt the alert will show after the photo is saved.

Any advice? I will be happy to be more specific if something is unclear.

I tested the code below on my Android Galaxy S3

    <!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // device APIs are available
    //
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
      // Uncomment to view the base64-encoded image data
      // console.log(imageData);

      // Get image handle
      //
      var smallImage = document.getElementById('smallImage');

      // Unhide image elements
      //
      smallImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI
      // console.log(imageURI);

      // Get image handle
      //
      var largeImage = document.getElementById('largeImage');

      // Unhide image elements
      //
      largeImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      largeImage.src = imageURI;
    }

    // A button will call this function
    //
    function capturePhoto() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function capturePhotoEdit() {
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    // Called if something bad happens.
    //
    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
  </head>
  <body>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

---------- UPDATE 1 ------------------

I have tested it on another bit of code:

    (function () {
        $scroller = $('.scroller'),

        // Take a picture using the camera or select one from the library
        takePicture = function (e) {
            var options = {
                quality: 45,
                targetWidth: 1000,
                targetHeight: 1000,
                destinationType: Camera.DestinationType.FILE_URI,
                encodingType: Camera.EncodingType.JPEG,
                sourceType: Camera.PictureSourceType.CAMERA
            };

            navigator.camera.getPicture(
                function (imageURI) {
                    console.log(imageURI);
                    alert('test');
                    $scroller.append('<img src="' + imageURI + '"/>');
                },
                function (message) {
                    // We typically get here because the use canceled the photo operation. Fail silently.
                }, options);

            return false;

        };

    $('.camera-btn').on('click', takePicture);

}());

And this has the same effect. It does nothing during the first snap but it shows the picture after the second snap. I also just found out that the picture that shows after the second is snap is the first photo that I took. It seems that the first argument in getPicture does not trigger on the first snap. This is frustrating as logcat does not really show me anything to work with.

---------------- UPDATE 2 ----------------

I just tried it on Phonegap Build and it works. So it must have something to do with the plugin...

Upvotes: 8

Views: 4622

Answers (6)

Radek Pech
Radek Pech

Reputation: 3098

I had this problem with Cordova 3.7.1 and Camera 0.3.5 - every time I called the plugin, it did not return the image/path and on second call it returned error "Canceled" for the previous call.

The problem was that my main activity had own onActivityResult which did not correctly call the super's method.

public class MainActivity extends CordovaActivity {
    //...

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
            if (requestCode == MyCustomActivity) {
                    doMyCustomActivity(requestCode);
            }
    }

    //...
}

To fix it, I had to add ELSE to call the correct handler:

public class MainActivity extends CordovaActivity {
    //...

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
            if (requestCode == MyCustomActivity) {
                    doMyCustomActivity(requestCode);
            }
            else { //this was missing - call other Activity of plugins
                super.onActivityResult(requestCode, resultCode, intent);
            }
    }

    //...
}

Upvotes: 0

Aicoworld
Aicoworld

Reputation: 1

I met the same problem and solved it. Because you import two "cordova.js" in your app, and maybe one is in the iframe. you can use "parent.cordova" in iframe instead.

Upvotes: 0

Jesse Pangburn
Jesse Pangburn

Reputation: 746

I had this exact problem on Cordova 3.4.0, with a fresh Cordova install (no upgrade from previous version as some others posted). Taking the first picture would do nothing- no success callback, no fail callback. Taking the second picture would result in a success callback but the DATA_URL data (the base64 encoded image) that came back was the data from the FIRST picture.

For me it was working fine on one phone, various emulators, etc. except on one Android 4.2 phone where it did this. The solution was to uninstall the app from the phone using the phone's application management under settings, then reinstall the app- then the first picture would trigger the success callback with its own data.

No idea why, but uninstalling and reinstalling the app resolved it for me.

Upvotes: 0

Laurie Clark
Laurie Clark

Reputation: 630

had exactly the same problem. Capture success was only receiving the callback after captureVideo had been called for the second time.

Just replaced my old app/bin/cordova.jar file with new 3.2.0 cordova-dev.jar (in eclispe) and all back in order :)

Upvotes: 0

r15ch13
r15ch13

Reputation: 337

I had the same problem after updating from 3.0.0 to 3.1.0. Delayed camera, no geolocation, etc.

Look if the file platforms\android\cordova\version states an old version. Then you need to update your platform. So here is what i did.

  • Remove all plugins: cordova plugin rm org.apache.cordova.camera
  • Remove the platform: cordova platform remove android (will delete changes you have made to *.java files)
  • Add the platform: cordova platform add android
  • Add all plugins: cordova plugin add org.apache.cordova.camera
  • Check permissions
  • Build it

It's basically like creating a new project.

Upvotes: 1

Chintan Khetiya
Chintan Khetiya

Reputation: 16152

I don't know whether this is right solution or not but its work for me perfectly. It would be batter to trace your log cat and found exact issue.

Try to use navigator.camera.PictureSourceType instated of pictureSource. so it looks like

<button onclick="getPhoto(navigator.camera.PictureSourceType.PHOTOLIBRARY);">From Photo Library</button><br>

and same way replace in Javascript code as well 

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI });

OR

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: navigator.camera.DestinationType.DATA_URI });

Update: Try to save your corodova.js locally and call from local dir, so your dir should like

assets/www/js/cordova.js

<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>

Working Code

Hope this will help you !!!

Upvotes: 1

Related Questions