How to Use the Camera in Sencha Touch

Using the camera in an application is extremely useful and fortunately Sencha Touch allows for its use, though it is often a cause of confusion for a lot of people. In order to access the camera, the application must be packaged natively – either through Sencha Touch’s native packager, PhoneGap Build or some other method. The web browser can not gain access to the devices camera, so it is not possible for Sencha Touch to access if it is packaged as a web application.

It is also not necessary to design your own camera interface, the device’s native interface will simply be used. The process is triggered within your application, the Camera application on the device is then activated, the user proceeds to use the camera as normal and once finished the image will be passed back to your application. We can access the device’s camera by using Ext.device.Camera, and utilise the data passed back to the success function to handle the returned image. The following code demonstrates how to do this:

Ext.device.Camera.capture({
  success: function (image) {
    //handle the image
  },
  quality: 75,
  width: 300,
  height: 300,
  destination: 'data',
  source: 'camera',
  encoding: 'jpg',
});

As well as having the user take a photo, it is also common to allow users to select a photo that is already stored on their device. This only requires a slight modification of the code and can be achieved as follows:

Ext.device.Camera.capture({
  success: function (image) {
    //handle the image
  },
  destination: 'data',
});