How to Use Camera in PhoneGap

Introduction

The Camera object provides the access to the Camera's default pictures or application. There are two type of methods that we use in Camera objects; they are:

Camera.getPicture
Camera.cleanup

In this article I will explain the Camera.getPicture method in details. The Camera.getPicture method can be used to get or retrieve the pictures from the camera and we can also take the picture using the camera. The picture is returned either as an URL of the image or the base64 encoded string.

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

First of all I will explain the parameters of getPicture that are cameraSuccess, cameraError and cameraOptions.
  • CameraSuccess

    This function shows the success of the callback function which means that if the picture or image is captured successfully then this provides the image data.

     
  • function onPhotoDataSuccess(imageData) {      

    //Do something for image

    }

    The parameter that we use for CameraSuccess is imageData.ImageData to return the image as an URL of the image or the of Base64 encoded imageData, depanding on the third attribute of the Camera.getPicture method.


    Example
     

    function onPhotoDataSuccess(imageData) {   

        var smallImage = document.getElementById('smallImage');   

        smallImage.src = "data:image/jpeg;base64," + imageData;

    }

     

  • CameraError

    This shows the error or onError callback function that gives an error. It takes as the parameter the Error Message.
     

    function onFail(message) {

        //Error message

    }
     

  • CameraOptions

    These are the optional parameters to customize the camera setting. Some of the options are:
     

    Options

    Descriptions

    Quality Represents the quality of the image, range is [0,100] number.
    DestinationType The format of the return value that is defined in navigator.camera.DestinationType (number)
    SourceType Set the source of the picture. Defined in nagivator.camera.PictureSourceType (number)
    allowEdit Allow simple editing of image before selection. (boolean)
    encodingType The encoding of the returned image file. Defined in navigator.camera.EncodingType (number)
    targetWidth Width in pixels to scale image. Must be used with targetHeight. Aspect ratio is maintained.(number)
    targetHeight Height in pixels to scale image. Must be used with targetWidth. Aspect ratio is maintained. (number)
    mediaType Set the type of media to select from. Only works when PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM. Defined in nagivator.camera.MediaType (number)
    correctOrientation Rotate the image to correct for the orientation of the device during capture. (boolean)
    saveToPhotoAlbum Save the image to the photo album on the device after capture. (boolean)
    popoverOptions iOS only options to specify popover location in iPad.

The Function camera.getPicture opens the mobile device's default camera application so that we can take a picture if the following condition is satisfied. Once the picture is taken the camera application closes and the picture is saved.

(if Camera
.sourceType = Camera.PictureSourceType.CAMERA,

But if we want to choose from the camera application then the conditions are:

If
Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY or Camera.PictureSourceType.SAVEDPHOTOALBUM,

The return value will be sent to the cameraSuccess parameter of the getPicture mathod.

  • A String containing the Base64 encoded photo image (default).
  • A String representing the image file location on local storage.

The supported platforms of this method are:

  • Android
  • Blackberry WebWorks (OS 5.0 and higher)
  • iOS
  • Windows Phone 7 ( Mango )
  • Bada 1.2
  • webOS

Now let's develop the application. For this the following steps are followed:

Step 1: Open Visual Studio and then select File -> New -> Project.

image1.gif

Step 2: A window is shown; from this select Silverlight for Window Phone from Visual C#; now select CordovaStarter and name the application "camera".

image2.gif


Step 3: In the Solution Explorer, there is a folder named www; inside this are the HTML, JavaScript and CSS files.

image3.gif

Step 4: Inside the index.html, write the code as:

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Camera Example</title>

    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"

        charset="utf-8" />

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

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

</head>

<body>

    <button onclick="capturePhoto();">

        Capture Photo</button><br />

    <button onclick="capturePhotoEdit();">

        Capture Editable Photo</button><br />

    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">

        From Photo Library</button><br />

    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">

        From Photo Album</button><br />

    <img style="display: none; width: 60px; height: 60px;" id="smallImage" src="" alt="" />

    <img style="display: none;" id="largeImage" src="" alt="" />

</body>

</html>

Step 4: Inside the www folder add the new file by right-clicking on the folder then Add -> New item.

image4.gif

 

step 4 : Now select the text file and give it the name "javascript.js":

image5.gif

 

Step 5 : Now add the following code in the javascript.js file:

 

var pictureSource;   // picture source

var destinationType; // sets the format of returned value

// Wait for Cordova to connect with the device

document.addEventListener("deviceready", onDeviceReady, false);

// Cordova is ready to be used!

function onDeviceReady() {

    pictureSource = navigator.camera.PictureSourceType;

    destinationType = navigator.camera.DestinationType;

}

// Called when a photo is successfully retrieved       

function onPhotoDataSuccess(imageData) {

    // 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;

}

// Called when a photo is successfully retrieved

function onPhotoURISuccess(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';

    // Show the captured photo

    // The inline CSS rules are used to resize the image          

    largeImage.src = imageURI;

}

// A button will call this function

function capturePhoto() {

    // Take picture using device camera and retrieve image as base64-encoded string

    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,

        destinationType: destinationType.DATA_URL

    });

}

// A button will call this function 

function capturePhotoEdit() {

    // Take picture using device camera, allow edit, and retrieve image as base64-encoded string 

    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,

        destinationType: destinationType.DATA_URL

    });

}

// A button will call this function

function getPhoto(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);

}

 

Step 6 : Run the application by pressing F5. The Window phone emulaor is then loaded.

image6.gif

   

After it is loaded then it gives output as:

image7.gif

 

When I click on Capture Image it looks like:

image8.gif

 

Now I captured the image by clicking on the upper-right button, then the image looks like:

image9.gif

 

When I click on the accept button then the image is saved and when I click on the retake button the image layout will open again. In that case I will click the accept button then it looks like:

image10.gif

 When I click on From Photo Albums the default images that are already present in the mobile application are opened like:

 

image11.gif

 

In order to open the images the images options are opened, like:

image12.gif

 

Now click on any image in order to choose the images, it looks like:

 

image13.gif

 

From the Photo library options we can also select the application's default images and by pressing the editable image we can edit the image.

 

Summary

 

In this article I will explain the Camera.getPicture method, its properties and parameters and how to choose the images from the existing images in the mobile application and also take the images.