18 - Phonegap Camera

Introduction

People nowadays use mobile phones mostly for taking pictures. They use the built-in mobile camera and share the snaps in social networking sites. The main advantage of mobile cameras is that you can snap pictures whenever and wherever you want without carrying a separate digital camera. You might also be using your mobile camera frequently to capture the beautiful moments of your life. You might also be using apps like Flickr, Instagram etc.

Just think of a mobile app that allows you to take pictures instantaneously and then add graphics to those snaps. Of course, you need to have access to the camera in your mobile if you want to develop such apps that take photos or shoot videos. PhoneGap provides a Camera API that has two methods getPicture and cleanup. The getPicture method can be used either to take a photo using the camera or to retrieve a photo from the photo gallery of the device. The cleanup method is used to clean up the image files that were taken by the camera.

Create an App

Let us create an Android app that allows the user to take pictures and also to get images from the photo library. Create a project named AndroidCamera on the desktop. Once the project is created on the desktop, bring the project into the Android Development Environment (Eclipse). Open the index.html file in the assets/www folder using your text editor and clean it up. You can also change the title to "Camera App".

Now add the following lines of code inside the <body> section.

<button id="snapPicture">Take Picture</button>
<button id="getPicture">Get Picture</button><br/>
<img style="display:none;width:70px;height:70px;" id="myPhoto" src=""/>
<img style="display:none;" id="getPhoto" src=""/>

Add the following lines of code inside the <head> section to check whether the device is ready. Once the device is ready, we will add the event listener to the buttons for their click event.

<script>
   window.onload = function()
   {
      document.addEventListener("deviceready", init, false);
   }
   function init()
   {
     document.getElementById("snapPicture").addEventListner("click", captureImage, false);
     document.getElementById("getPicture").addEventListner("click", getImage, false);
   }
</script>

Inside the captureImage and getImage functions, we will call the getPicture method. The first parameter of this method is a call back function that provides the image data, second parameter is a call back function that is called in case of an error and the third is an optional parameter which is a JSON object that customizes the camera settings. Inside the third parameter, you can set the value of destinationType to decide the format of the return value where the values can be DATA_URL or FILE_URI, value of sourceType to set the source of the picture whether PHOTOLIBRARY, CAMERA or SAVEDPHOTOALBUM, value of quality (a number between 0 and 100) to decide the quality of the saved image and so on.

Add the following line of code after the init function.

function captureImage()
{
  navigator.camera.getPicture(onCaptureSuccess, onCaptureFailure, { quality: 50 });
}
function onSuccess(imageData) 
{
  var myImage = document.getElementById(‘myPhoto);
  myImage.style.display = ‘block’;
  myImage.src = “data:image/jpeg;base64,” + imageData;
}
function onCaptureFailure(message) 
{
  alert(‘Could not take the photo: ‘ + message);
}
function getImage()
{
  navigator.camera.getPicture(onGetSuccess, onGetFailure, { 
  destinationType: destinationType.FILE_URI,
  sourceType: pictureSource.PHOTOLIBRARY });
}
function onGetSuccess(imageURI)
{
  var getImg = document.getElementById(‘getPhoto);
  getImg.style.display = ‘block’;
  getImg.src = imageURI;
}
function onGetFailure(message) 
{
  alert(‘Could not get the photo: ‘ + message);
}

Here, when we take a photo, we do not have to set the destinationType or sourceType because their default values are CAMERA respectively. If the value of sourceType is set to PHOTOLIBRARY, the call back function that is called on success will return a string representing the image file location on local storage. If you do not set any value to sourceType, that is its value is CAMERA (the default value), then the call back function that is called on success will return a string containing the base64 encoded photo image.

Save the inex.html file. Unfortunately, we cannot test this project on an emulator as the camera is still not emulated. You can connect to a real Android device and test this project. Once you click the first button, you can take a photo and if you click the second button, you will be able to get the photo from the photo library.

Summary

In this tutorial, we have created an app that takes picture on the click of a button. You can also get an image from the photo library on the click of another button. We have used PoneGap's Camera API to accomplish this. In our application we are displaying the image using <img> element. You can even save the data locally or upload it on a server as you want.

Like us on Facebook