Phonegap Camera in V2

Questions
1

Hello,

My code works on the older version of Framework7 but for the life of me, I can’t seem to properly migrate it to V2. Can someone help me out please? Here’s the code in the old F7:

HTML:

  <a href="#" class="button button-fill" onclick="capturePhotoWithFile();">Take A Picture</a> <br>
  <a href="#" class="button button-fill" onclick="getPhoto(navigator.camera.PictureSourceType.SAVEDPHOTOALBUM);">Select from Gallery</a><br>
  <div id="uplimgcontainer">
<img style="display:none; max-width:100%" id="largeImage" src="" />
</div>
<div id='photocap'></div>
<a href="#" class="button button-fill" style="display:none;" id="uploadpicbtn" onclick="uploadpic()">Upload Picture</a><br>
          </form>

JS:
// 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;
      //alert("device is ready for camera");
  }

…

function onPhotoFileSuccess(imageData) {
  alert("onPhotoFileSuccess was called. imageData: "+imageData);
  // Get image handle
  console.log(JSON.stringify(imageData));

  // Get image handle
  //
  var largeImage = document.getElementById('largeImage');
  // Unhide image elements
  //
  largeImage.style.display = 'block';
  document.getElementById('uploadpicbtn').style.display="block";
  // Show the captured photo
  // The inline CSS rules are used to resize the image
  //
  largeImage.src = imageData;
  uploadimgdata=imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
  alert("onPhotoURISuccess was called. imageuri: "+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';
  document.getElementById('uploadpicbtn').style.display="block";
  // Show the captured photo
  // The inline CSS rules are used to resize the image
  //

//custom code to fix image uri
  if (imageURI.substring(0,21)=="content://com.android") {
    photo_split=imageURI.split("%3A");
    imageURI="content://media/external/images/media/"+photo_split[1];
  }

  largeImage.src = imageURI;
  document.getElementById('uploadpicbtn').style.display="block";

uploadimgdata=imageURI;
}

function capturePhotoWithFile() {
    navigator.camera.getPicture(onPhotoFileSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
}

// A button will call this function
//
function getPhoto(source) {
  alert("getphoto was called. source= "+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);
}

Thanks in advance! :slight_smile:

2

Exactly what is your mistake?

3

Hi. The camera code that used to work in old Framework7 doesn’t work in V2. In the old F7, the code uses an event listener for when the device is ready but in V2, for those that trigger when the device is ready should now be added to init: so this is what I did:

OLD:
document.addEventListener(“deviceready”,onDeviceReady,false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
//alert(“device is ready for camera”);
}

NEW:
on: {
init: function () {
var pictureSource = navigator.camera.PictureSourceType;
var destinationType = navigator.camera.DestinationType;
}
}

I get an “navigator.camera is undefined” error. Is it possible that the device or plugin is not yet ready when it’s called?

4

Okay didn’t see that the call to cordova.js was commented out. :confused: So yeah, it’s working now. Sorry about that.

5

Hmmm… Apparently there’s still an issue that remains. :confused: The camera itself works okay, but retrieving a picture from the gallery isn’t working. Anybody experienced this before? I’m using the same config.xml and code aside from the change in the init: part.

Thanks in advance. :slight_smile: