I'm new to mobile dev and I'm having some trouble getting the photo button to open the camera on my device when using phonegap build from the internet site build.phonegap.com. However, when I use the phonegap developer app on my device and connect to the phonegap desktop app and run the same code it works fine and the photo button opens the camera without any problem. I'm wondering if I'm missing something in the config.xml file that is causing the build to fail???...my assumption is that using the phonegap developer app compiles the necessary files for the camera to work, but when I use the web build service it does not...but I don't really know...been pulling my hair out for a few days now....been googling, trying different things, but getting no where.
I'm using phonegap build 3.7.0, android 4.4.2 lenovo tablet, android 5.0.1 on samsung galaxy note 4 phone, ios 8.4 on ipad
On each of these devices it acts the same...opens the camera when inside the phonegap developer app tool on the device...but when compiled on build.phonegap.com the camera buttons don't load anything, no error displayed, ...I've tried using the chrome/inspect/devices tool to debug but that tool was so slow and after 10 minutes waiting form page loads I gave up on the debugger tool.
This app is a jquery mobile app compiled using phonegap and I want to upload pictures to the server taken from the phones camera and picture gallery.
Any help is appreciated...thx in advance.
Heres the config.xml file:
myapp
myapp
myapp
<!-- PhoneGap plugins for PhoneGap Build to attach to build -->
<!-- Device permission is needed -->
<!-- Splash icon is on same directory as this file -->
Here's the HTML:
<!DOCTYPE HTML SYSTEM>
myapp
Back
Photos
From Camera
From Photo Library
I'm using phonegap build 3.7.0, android 4.4.2 lenovo tablet, android 5.0.1 on samsung galaxy note 4 phone, ios 8.4 on ipad
On each of these devices it acts the same...opens the camera when inside the phonegap developer app tool on the device...but when compiled on build.phonegap.com the camera buttons don't load anything, no error displayed, ...I've tried using the chrome/inspect/devices tool to debug but that tool was so slow and after 10 minutes waiting form page loads I gave up on the debugger tool.
This app is a jquery mobile app compiled using phonegap and I want to upload pictures to the server taken from the phones camera and picture gallery.
Any help is appreciated...thx in advance.
Heres the config.xml file:
myapp
myapp
myapp
<!-- PhoneGap plugins for PhoneGap Build to attach to build -->
<!-- Device permission is needed -->
<!-- Splash icon is on same directory as this file -->
Here's the HTML:
<!DOCTYPE HTML SYSTEM>
myapp
Back
Photos
From Camera
From Photo Library
- 4 Posts
- 1 Reply Like
Posted 5 years ago
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
1. If you want to post code here, wrap it with a CODE element as described under "some html allowed"
2. In the zip file you are uploading, are the config.xml and the index.html in the same directory (preferably the root of the zip file)?
I ask, because many developers who are using phonegap locally believe that configuration for PGB is the same as configuring for local build.
2. In the zip file you are uploading, are the config.xml and the index.html in the same directory (preferably the root of the zip file)?
I ask, because many developers who are using phonegap locally believe that configuration for PGB is the same as configuring for local build.
- 4 Posts
- 1 Reply Like
ok, sory bout that..just pasted it in....yes the config.xml file is in the proper structure. Everything works fine with phonegap and the app...the only thing that isn't working is the camera button.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
With PGB, there are several things to check
1. Are config and index both in the root
2. Is the camera plugin included correctly in config (please repost your config if you want me to have a look)
3. Is phonegap.js referenced on the page where you have the button, without including such file in your assets?
4. Has that phonegap.js had the opportunity to load, and has the deviceready event fired?
5. Just prior to invoking the getPicture() method, check (for test purposes) if the object type value for "navigator.camera.getPicture" equals to 'function'
1. Are config and index both in the root
2. Is the camera plugin included correctly in config (please repost your config if you want me to have a look)
3. Is phonegap.js referenced on the page where you have the button, without including such file in your assets?
4. Has that phonegap.js had the opportunity to load, and has the deviceready event fired?
5. Just prior to invoking the getPicture() method, check (for test purposes) if the object type value for "navigator.camera.getPicture" equals to 'function'
- 4 Posts
- 1 Reply Like
Config.xml and index.html are both in root,
I think camera plugin in included correctly...see my config.xml file below (if I added the code tags properly.
cordova.js is included on the page where the button is used and it is NOT being referenced any other way.
Ok, heres the config.xml file again:
Here's the html:
I think camera plugin in included correctly...see my config.xml file below (if I added the code tags properly.
cordova.js is included on the page where the button is used and it is NOT being referenced any other way.
Ok, heres the config.xml file again:
<?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.phonegap.myapp"
version = "1.0.2">
<name>myapp</name>
<description>myapp</description>
<author href="myapp.com" email="support@myapp.com">myapp</author>
<preference name="orientation" value="default" />
<preference name="fullscreen" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="android-installLocation" value="auto" />
<icon src="icon.png" />
<icon gap:density="ldpi" gap:platform="android" src="icon36.png" />
<icon gap:density="mdpi" gap:platform="android" src="icon48.png" />
<icon gap:density="hdpi" gap:platform="android" src="icon72.png" />
<icon gap:density="xhdpi" gap:platform="android" src="icon96.png" />
<icon gap:density="xxhdpi" gap:platform="android" src="icon144.png" />
<!-- PhoneGap plugins for PhoneGap Build to attach to build -->
<gap:plugin name="org.apache.cordova.device" version="0.2.12" source="pgb" />
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.5.2" source="pgb" />
<gap:plugin name="org.apache.cordova.splashscreen" version="0.3.4" source="pgb" />
<!-- Device permission is needed -->
<feature name="http://api.phonegap.com/1.0/device"/>
<!-- Splash icon is on same directory as this file -->
<gap:splash src="icon144.png" />
<plugin name="Camera" value="org.apache.cordova.CameraLauncher" />
<feature name="http://api.phonegap.com/1.0/camera"/>
<feature name="http://api.phonegap.com/1.0/file"/>
<feature name="http://api.phonegap.com/1.0/media"/>
<feature name="http://api.phonegap.com/1.0/network"/>
</widget>
Here's the html:
<!DOCTYPE HTML>
<html>
<head>
<title>myapp</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="propPicAddPage" data-role="page">
<div data-role="header" data-position="fixed">
<a id="add_prop_photo_back_btn" href="#" data-rel="back" class="ui-btn ui-icon-back ui-btn-icon-left">Back</a>
<h1>Photos</h1>
</div>
<div data-role="content">
<div id="xaddPropPhotoHTML">
<script src="cordova.js"></script>
<button onclick="capturePhoto();">From Camera</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
<input id="property_id" type="hidden" />
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(fileURI) {
//Transfer the file to the server
$.mobile.loading( "show", {
text: "Uploading photo. Please wait...",
textVisible: true
});
var success = function (r)
{
clearCache();
retries = 0;
$("#add_prop_photo_back_btn").click();
$("#upload_prop_pic_refresh").click();
$.mobile.loading("hide");
}
var fail = function (error)
{
if (retries == 0)
{
retries ++
setTimeout(function()
{
onCapturePhoto(fileURI)
}, 1000)
}
else
{
retries = 0;
clearCache();
alert('Oops. Something wrong happened! Error: ' + error);
}
$.mobile.loading("hide");
}
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
options.params = {}; // if we need to send parameters to the server request
var ft = new FileTransfer();
var property_id = $("#addPropPic").attr("pid");
var upload_url = "https://myapp.com/administrator/classes/upload_file/upload_photos_mobile.php?p_id=" + p_id + "&iframe_div=" + p_id + "&token=" + $("#addPropPic").attr("token") + "&action=uploadfile";
ft.upload(fileURI, encodeURI(upload_url), success, fail, options);
}
// A button will call this function
//
function getPhoto(source) {
console.log("getPhoto called...beginning to open library");
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source,
correctOrientation : true });
//FILE_URI
}
//////////////////////////////////////////////////////////////
//From other website
var retries = 0;
function onCapturePhoto(fileURI)
{
$.mobile.loading( "show", {
text: "Uploading photo. Please wait...",
textVisible: true
});
var success = function (r)
{
clearCache();
retries = 0;
$("#add_prop_photo_back_btn").click();
$("#upload_prop_pic_refresh").click();
$.mobile.loading("hide");
}
var fail = function (error)
{
if (retries == 0)
{
retries ++
setTimeout(function()
{
onCapturePhoto(fileURI)
}, 1000)
}
else
{
retries = 0;
clearCache();
alert('Oops. Something wrong happened! Error: ' + error);
}
$.mobile.loading("hide");
}
//Transfer the file to the server
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
options.params = {}; // if we need to send parameters to the server request
var ft = new FileTransfer();
var property_id = $("#addPropPic").attr("pid");
var upload_url = "https://myapp.com/administrator/classes/upload_file/upload_photos_mobile.php?p_id=" + p_id + "&iframe_div=" + p_id + "&token=" + $("#addPropPic").attr("token") + "&action=uploadfile";
ft.upload(fileURI, encodeURI(upload_url), success, fail, options);
}
function capturePhoto() {
navigator.camera.getPicture(onCapturePhoto, onFail, {
quality: 50,
destinationType: destinationType.FILE_URI,
correctOrientation : true
});
}
function onFail(message) {
alert('Failed because: ' + message);
$.mobile.loading("hide");
}
function clearCache()
{
navigator.camera.cleanup();
}
app.initialize();
</script>
</div>
</div>
</div>
</body>
</html>
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
OK. About config:
1. Remove [feature name="http://api.phonegap.com/1.0/device"/], and the other 'features' further below. PGB doesn't do features. You already have the Device plugin.
2. You included the camera plugin with a PLUGIN element. Should be GAP:PLUGIN, just like the other plugins.
3. If you want to post the image to an external server, you need to whitelist that server
About your html:
1. I recommend including the jquery package in your assets, so your app will still work if the external server is down
2. You wait for deviceready to set a couple of variables. But you don't check if that has happened already when the user clicks the photo button. Also, you are not sure whether or not the DOM has loaded and phonegap.js has loaded.
It would probably be a good idea to use jQuery Mobile to set up the page first, then let it make the transition to show the page.
(Both of these issues can be ignored at first, because for test purposes, your camera should work when you correct your config. But it should be addressed before going into serious test phases)
1. Remove [feature name="http://api.phonegap.com/1.0/device"/], and the other 'features' further below. PGB doesn't do features. You already have the Device plugin.
2. You included the camera plugin with a PLUGIN element. Should be GAP:PLUGIN, just like the other plugins.
3. If you want to post the image to an external server, you need to whitelist that server
About your html:
1. I recommend including the jquery package in your assets, so your app will still work if the external server is down
2. You wait for deviceready to set a couple of variables. But you don't check if that has happened already when the user clicks the photo button. Also, you are not sure whether or not the DOM has loaded and phonegap.js has loaded.
It would probably be a good idea to use jQuery Mobile to set up the page first, then let it make the transition to show the page.
(Both of these issues can be ignored at first, because for test purposes, your camera should work when you correct your config. But it should be addressed before going into serious test phases)
- 4 Posts
- 1 Reply Like
Petra, thanks a million for your help. Your suggestions fixed it. Apparantly I had been following an older tutorial found on the web. Once I removed those and used the plugins for the phonegap all worked as expected. Thank you for pointing me in the right direction and for your other suggestions...I will implement those and add jquerymobile and jquery as assets to the project. for anyone who comes along and reads this, here is what I added to the config.xml after removing all the "feature" tags as suggested.
<!-- PhoneGap plugins for PhoneGap Build to attach to build -->
<gap:plugin name="org.apache.cordova.device" source="pgb" />
<gap:plugin name="org.apache.cordova.inappbrowser" source="pgb" />
<gap:plugin name="org.apache.cordova.splashscreen" source="pgb" />
<gap:plugin name="org.apache.cordova.camera" />
<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />
<gap:plugin name="org.apache.cordova.media" />
<gap:plugin name="org.apache.cordova.network-information" />
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Hi Rone,
You're welcome and thanks for posting your code for the benefit of others.
One thing to note: PGB will not maintain their core plugins at 'pgb'. Instead, they have moved them all to NPM, where they will be updated if needed.
Please see http://phonegap.com/blog/2015/05/26/n...
You may want to switch to those plugins now, or in the near future.
You're welcome and thanks for posting your code for the benefit of others.
One thing to note: PGB will not maintain their core plugins at 'pgb'. Instead, they have moved them all to NPM, where they will be updated if needed.
Please see http://phonegap.com/blog/2015/05/26/n...
You may want to switch to those plugins now, or in the near future.
- 32 Posts
- 0 Reply Likes
To the Phonegap community.
I am proud to be able to share the spirit of community.
Thank you for this thread.
Eric
I am proud to be able to share the spirit of community.
Thank you for this thread.
Eric
Related Categories
-
PhoneGap Build
- 15111 Conversations
- 275 Followers



