Phonegap Cordova 3.0.0 navigator.camera is undefined

I'm trying to use the Cordova native plugins for the first time. I started out with the camera and the sample code provided in the documentation. This is failing however and the navigator.camera is undefined.

I've included the code below.

<div data-role="page" id="CameraPage">
<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) {
  alert("Photo Data Success");
  // 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;
}

// A button will call this function
//
function capturePhoto() {
  alert("function is called"); 
  if(_.isUndefined(navigator.camera)){
    alert("Camera is not defined");
  }else{
    alert("WTF?!");
  }
  // Take picture using device camera and retrieve image as base64-encoded string
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
    destinationType: destinationType.DATA_URL });
}

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

</script>

<button onclick="capturePhoto();">Capture Photo</button> <br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />

I installed the camera plugin according to the CLI directions

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

I also added the cordova.js files.

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

Solution

This is a bit old, but I wanted to provide hopefully for insight to anyone else that might come along later...

The issue I was running into was caused by the fact I had done an older npm install of cordova at one point that was still on my system, and then later the npm install of phonegap.

Cordova is a dependency of phonegap so the necessary version of cordova was present, but when I would run the plugin install:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

the system was defaulting to the old version of cordova and as a result was not getting the correct version of the plugins.

I was reminded of this issue again recently when I upgraded my npm phonegap package from 3.0.0 to 3.1.0. Once again, the plugins changed and were not backwards compatible. In the case of 3.0.0, PhoneGap expects a plugin directory of

org.apache.cordova.core.camera org.apache.cordova.core.X

In the latest release 3.1.0 the core namespacing was dropped and these now look like this

org.apache.cordova.camera org.apache.cordova.X

In normal use scenarios I don't think this is something people run into on a daily basis. Most projects I'm guessing are being generated and the developer is adding the plugins they need and sticking to a particular release of PhoneGap until at some point maybe they decide to upgrade the project. Where this becomes an issue as I see it is when the developer starts working on multiple PhoneGap projects at the same time; the case I'm having here. I upgraded to a newer version for a new project, then needed to add plugins to the old project EXPLOSION OCCURS

Up to this point I had been using a global install of PhoneGap (per the official documentation at phonegap.com)

sudo npm install -g phonegap

My short term solution ended up being to cp the needed plugin directory from an old project that was using the version I needed over into my other project that happens to be running on the same version. My next steps will be to test out using nvm and see if I'm am able to use multiple installs of PhoneGap this way per project, rather than having an always shifting global version.