Geek Answers Handbook

Phonegap (3.0.0) Camera failed on first try

For testing purposes, I copied the full example found in the phone camera API , and I put a warning on onPhotoDataSuccess to check when the function quits. On the first photo taken, a warning will not be displayed. However, after the first attempt, a warning will be displayed after saving the photo.

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

I checked 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 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 it has the same effect. It does nothing during the first snap, but shows the image after the second snap. I also only found out that the photo that shows after the second is the first photo I took. It seems that the first argument in getPicture does not work on the first binding. This is frustrating because logcat doesn't really show me anything to work with.

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

I just tried this on Phonegap Build and it works. Therefore, it should have something to do with the plugin ...

+8
javascript android cordova camera
source share
6 answers

I don’t know if this decision is right or not, but its work is perfect for me. It would be difficult to track your log cat and find the exact problem.

Try using navigator.camera.PictureSourceType instated pictureSource . so it looks like

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

and also replace in Javascript code

 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 the location of corodova.js locally and call from the local directory, so your director needs to

assets/www/js/cordova.js

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

Working code

Hope this helps you !!!

+1
source share

I had the same problem after upgrading from 3.0.0 to 3.1.0. Delayed camera, lack of geolocation, etc.

See if the platforms\android\cordova\version file contains the old version. Then you need to upgrade 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 remove the changes you have made to * .java files)
  • Add platform: cordova platform add android
  • Add all plugins: cordova plugin add org.apache.cordova.camera
  • Check Permissions
  • Build it

It basically looks like creating a new project.

+1
source share

had the exact same problem. Capture success only received a callback after captureVideo was called a second time.

Just replaced the old app / bin / cordova.jar file with the new 3.2.0 cordova-dev.jar (in eclispe) and everything is fine :)

0
source share

I had this exact problem on Cordova 3.4.0, with a new installation of Cordoba (without updating from the previous version, like some others). The first snapshot would do nothing - no callback will fail, there is no callback with an error. Taking the second image will result in a successful callback, but the DATA_URL data (base64 encoded image) that returned was data from the FIRST image.

For me, it worked fine on the same phone, different emulators, etc., with the exception of one Android 4.2 phone, where he did it. The solution was to remove the application from the phone using the phone application management in the settings, then reinstall the application, and then the first image will call a success callback with its own data.

I don’t know why, but uninstalling and reinstalling the application allowed this for me.

0
source share

I met the same problem and solved it. Because you are importing two "cordova.js" into your application, and maybe one of them is in the iframe. you can use "parent.cordova" in the iframe instead.

0
source share

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 when I called it the second time, it returned the "Canceled" error for the previous call.

The problem was that my main activity had its onActivityResult, which incorrectly called the super method.

 public class MainActivity extends CordovaActivity { //... @Override protected void onActivityResult(int requestCode, int resultCode, Intent intent) { if (requestCode == MyCustomActivity) { doMyCustomActivity(requestCode); } } //... }

To fix this, 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); } } //... }
0
source share

More articles:


All Articles