Question

I have a button, and when the user clicks on it, the camera opens the user should be able to take a picture, and then display it on the view.

When the user clicks the button, the following method gets executed;

imageButtonClicked: function () {
// This is where I should be calling the camera, taking the pic and displaying on the view
}

1. I found this tutorial that explains how to take a photo. But I don’t understand which code I should paste to get the camera function working. Can some one help me out?
2. Once I take the picture, how can I display it on the view?

Answer 1

You can do it either with Ext.device.Camera’s capture() or Phonegap Camera API

E.g with Phonegap Camera API

You can write the below code inside your imageButtonClicked : function() {} method.

.....
.....
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
 }); 

function onSuccess(imageData) {
    var image = Ext.getCmp('myImageId');
    image.setSrc("data:image/jpeg;base64," + imageData);
}

function onFail(message) {
    alert('Failed because: ' + message);
}
.....
.....