I am using the PhoneGap Desktop emulator to test my app that just takes a picture using the device camera. All works well in the PhoneGap app on Android and iOS. I get the prompts before I take a picture asking to allow PhoneGap to have access to the camera. Then, all future camera requests work OK. As I would expect.
However, when I create the native apps, and run them on iOS/Android devices, they no longer prompt me for permission to use the camera, and on iOS it just crashes when I try to open the camera. On Android, it just does nothing when I trigger the camera.
I'm struggling to work out why it works using the PhoneGap App, but doesn't when I run it as a native App? Am I missing something?
I am creating the App structure, adding platforms/plugins etc. using the cordova CLI on my Ubuntu server. I am using the Adobe PhoneGap build servers (v7.0.1) to compile the native Apps. I was only using PhoneGap desktop to test this issue.
iOS device OS version = v11.0.3
Android device OS version = 7.0
My config.xml file:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.mycameraapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>My Camera App</name>
<description>
Test App
</description>
<author email="hello#mycameraapp.com" href="http://www.mycameraapp.com">
My Camera App
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="ios" spec="~4.5.3" />
<engine name="android" spec="~6.3.0" />
<plugin name="cordova-plugin-camera" spec="^3.0.0">
<variable name="CAMERA_USAGE_DESCRIPTION" value="To take pictures from within the App" />
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="To take pictures from within the App" />
</plugin>
</widget>
The JavaScript that triggers the camera:
function upload_case_image(mode) {
openCamera(mode);
}
function setOptions(srcType) {
var options = {
// Some common settings are 20, 50, and 100
quality: localStorage.getItem('image_quality'), // Image quality is defined in the database
destinationType: Camera.DestinationType.DATA_URL,
// In this app, dynamically set the picture source, Camera or photo gallery
sourceType: srcType,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
allowEdit: false,
correctOrientation: true //Corrects Android orientation quirks
}
return options;
}
function openCamera(mode) {
var srcType = Camera.PictureSourceType.CAMERA;
var options = setOptions(srcType);
navigator.camera.getPicture(function cameraSuccess(imageUri) {
upload_image(mode, imageUri);
}, function cameraError(error) {
console.debug("Unable to obtain picture: " + error, "app");
}, options);
}
My index.html is in the normal place within www, and references the corodva.js file:
<!-- Cordova -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
Looks like I've worked out where I was going wrong.
I was using Cordova, rather than the PhoneGap CLI. I installed Node.js on my PC, then installed PhoneGap (npm install -g phonegap#latest).
Then using command prompt I created the App using PhoneGap in Windows, instead of using Cordova on Ubunutu.
When I uploaded it to the Adobe build servers to build the PhoneGap App, it appears to work now.
Makes sense why I would encounter some difficulties.
I'm trying to do something very basic - including an external JS File, but I can't get it to work.
Relevant HTML
<head>
<script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>
</head>
config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/dezedan" version="1.0.0" viewmodes="maximized">
<access origin="*" subdomains="true"/>
<access origin="https://openlayers.org/" subdomains="true"/>
<tizen:application id="iFnT8pQIzT.dezedan" package="iFnT8pQIzT" required_version="3.0"/>
<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.all"/>
<icon src="icon.png"/>
<name>test</name>
<tizen:privilege name="http://tizen.org/privilege/internet"/>
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:profile name="wearable"/>
</widget>
things I've tried including in config.xml (unsuccessfully)
<access origin="http://openlayers.org/" subdomains="true"/>
<access origin="https://openlayers.org/en/v4.1.1/build/ol.js" subdomains="true"/>
<access origin="http://openlayers.org/en/v4.1.1/build/ol.js" subdomains="true"/>
As far as I see can I'm doing everything correctly; but obviously I'm missing something! It would be greatly appreciated if anyone could shed some light on what I'm missing.
Use this
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.1.1/ol.js"</script>
Instead of
<script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>
I'm trying to run weinre on my laptop IP (Say 130.x.x.x) and both the mobile and laptop are in the same WiFi network. I have added the script file URL in the index.html of my ionic project. When i try to open the weinre or target-script-min.js file on my mobile browser(chrome app), I'm able to view the same (No issues with firewall). However, if I try to run my application, I get
"Failed to load resource:
http://130.x.x.x:8080/target/target-script-min.js#anonymous
resource: the server responded with a status of 404 (Not Found)"
I have googled around and found problems related to cordova-whitelist plugin. I have verified and by default I have allowed all IP
<content src="index.html"/>
<access origin="*"/>
<allow-navigation href="http://130.x.x.x/*" />
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
I still cant find the exact reason why I'm not able to download the .js in my app. Any idea on what could be wrong.
I'm using PhoneGap Build to make an app for Android and Windows Phone. I'm trying to show a notification using the Alert function in JavaScript. The app works perfectly by showing the alert when i open it in a browser or install it on my Windows Phone but it fails on Android.
I have tried using the following functions to show a notification; however none of them seem to work:
navigator.notification.alert("PhoneGap is working", function(){}, "", "");
navigator.notification.alert("PhoneGap is working");
alert('We were unable to use location services in order to determine your location.');
I also added the following to the config.xml one at a time to add the notification plugin:
<gap:plugin name="org.apache.cordova.Notification" /> // generated an error on PhoneGap Build
<feature name="Notification">
<param name="android-package" value="org.apache.cordova.dialogs.Notification" />
</feature>
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="Notification" value="org.apache.cordova.Notification" />
Any ideas where I'm going wrong?
Thank you
This question answered many times, but I still can't fix my problem. I'm trying to play a music when my scene starts, I'm using Media class, but I get the error ReferenceError: Media is not defined. I'm using browser yet (I want to deploy it to android and ios later).
I'm using Cordova 3.5, PhoneGap 3.6.
Here's what I did so far:
1
ran the command in the command line standing in my project directory: cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
2
modified the config xml:
<feature name="Media">
<param name="android-package" value="org.apache.cordova.media.AudioHandler" />
</feature>
3
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
My js code is:
var music = new Media("sounds/main_theme.ogg");
Instead of using PhoneGap via this tutorial, rather use command line cordova via this tutorial.