Phonegap.build camera not working. What am I missing here?

Hi guys,

For a school project I have to make an app in phonegap.build but I’m really struggling to say the least. One of the things I need to implement is the camera. It doesnt have to save the picture or anything, just activate the camera. I have followed the following tutorial which is in Dutch and rather old but I have looked at different forums and found stuff like this. I have tried quite a lot of solutions now but nothing seems to work. I also tried to read the documentation on the plugin as well but it is hard to understand. I don’t have basic knowledge of javascript and it is not part of my schools curriculum. Obviously I must be doing something wrong, but I don’t know what. At the moment I just got a screen with a button and when I press it, nothing seems to happen. Please help me out. You’ll find the code below:

Map structure:

  • index.html
  • config.xml
  • css
    • index.css
  • js
    • index.js

index.js

(function(){document.addEventListener('deviceready',onDeviceReady,false);functiononDeviceReady(){}functioncameraSuccess(imageData){$('#maak-foto').after('\<img src="'+"data&colon;image/jpeg;base64,"+imageData+'"\>');}functioncameraError(message){alert('Er ging iets fout! '+message);}$('#maak-foto').click(function(){$('img').remove();navigator.camera.getPicture(cameraSuccess,cameraError,{quality:50,// Foto kwaliteitdestinationType:Camera.DestinationType.DATA\_URL// Base64 gecodeerde afbeelding als resultaat});});})();

index.html

\<html\>\<head\>\<metacharset="utf-8"/\>\<metaname="format-detection"content="telephone=no"/\>\<metaname="viewport"content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"/\>\<linkrel="stylesheet"type="text/css"href="css/index.css"/\>\<title\>Fotomaken\</title\>\</head\>\<body\>\<divclass="app"\>\<h1\>Foto!\</h1\>\<buttonid="maak-foto"\>Maken\</button\>\</div\>\<scripttype="text/javascript"src="phonegap.js"\>\</script\>\<scripttype="text/javascript"src="js/jquery.js"\>\</script\>\<scripttype="text/javascript"src="js/index.js"\>\</script\>\</body\>\</html\>

 config.xml:

\<widgetxmlns="\<a href="http://www.w3.org/ns/widgets" target="\_blank"\>http://www.w3.org/ns/widgets\</a\>"xmlns:gap="\<a href="http://phonegap.com/ns/1.0" target="\_blank"\>http://phonegap.com/ns/1.0\</a\>"id="com.phonegap.hello-world"version="1.0.0"\>\<name\>CameraApp\</name\>\<description\>Cameraexampleapp.\</description\>\<authorhref="\<a href="http://phonegap.com" target="\_blank"\>http://phonegap.com\</a\>" email="support@phonegap.com"\>PhoneGapTeam\</author\>\<featurename="\<a href="http://api.phonegap.com/1.0/camera"/" target="\_blank"\>http://api.phonegap.com/1.0/camera"/\</a\>\>\<pluginname="cordova-plugin-camera"source="npm"/\>\</widget\>

It gives the following error in chrome: Failed to load resource: the server responded with a status of 404 (Not Found). And its talking about the phonegap.js here. I see that in my first try I forgot to put in the jquery. After I put it in, it won’t install on my phone. I just get a message with: App not installed.