PhoneGap Camera Plugin

Updated on July 2, 2020

by Neeraj Agarwal

PhoneGap is a very nice & useful framework which allows you to develop the mobile application using HTML5, CSS3 and JAVA SCRIPT.

The PhoneGap Apps are hybrid Apps and can run almost across all platforms such as android, ios, windows and etc.

It is very easy to code and simple to develop your mobile app which is compatible with all platforms.

In this tutorial, I am going to explain, how to make PhoneGap Camera App using PhoneGap Camera Plugin.

PhoneGap Camera Plugin is a code script which allows your mobile App to use the device camera and related hardware functionality.

Using your mobile App you can take picture from camera or gallery, edit picture, save picture to gallery.

Idea Of The App:

Features

A single screen.
Show Three Buttons.
The First button is for taking pictures and show it on the same screen.
The Second button is used to edit or crop a picture after capture.
The Third Button is for selecting the image from gallery or album and then show it on the screen.

Technologies Used

jQuery Mobile : For Interface / UI Designing

We’re going to use jQuery Mobile for designing interface.

Method:

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

This function is used to capture an image from camera, you can also get a picture from photo album. After capturing the image, it is further passed to the success callback function as a string(base64-encoded). It can also be passed as a URI for the image file. You get a object in return(CameraPopoverHandle) which is used in reposition the image file.

Start building your first camera application:

I am explaining this code project by keeping a focus on the android platform, but it will be a similar procedure to make it run across all platforms.

To develop a mobile application, you need to make some setup which is listed below:

Install Node.js.
Install PhoneGap Desktop App.

Install PhoneGap/Cordova:

You can install it two ways either PhoneGap CLI(Command Line Interface) mode or PhoneGap desktop(GUI) mode.

I am using a desktop PhoneGap installation here but if you want to try it with PhoneGap CLI then follow command listed below.

C:\>npm install -g Cordova
C:\>npm install -g PhoneGap

Create New PhoneGap Project & Add required Platforms such as android:

$ Cordova creates PhoneGapCamera

Add Platforms:

$ Cordova platform add android

Add Camera Plugin:

$ Cordova plugin add org.apache.cordova.camera

Note: If you are facing any problem regarding PhoneGap Installation or Plugin Installation then you can go through following blog post:

Learn how to install PhoneGap?

Learn how to create, run, build PhoneGap build?

Learn how to use PhoneGap Plugin API?

Complete Code :

HTML File : Index.html

Copy and Paste the below code in your index.html.

<!DOCTYPE html>
<html>
<head>
<title>Capture Me</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="css/Style.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" class="ui-header ui-bar-a ui-header-fixed slidedown" role="banner">
<h1>Capture Me</h1>
</div>
<div data-role="main" class="ui-content" id="main">
<center>
<div class="grid">
<div class="block">
<div class="ui-bar ui-bar-a" style="height:100%">Camera</div>
</div>
<div class="block">
<div class="ui-bar ui-bar-a" style="height:100%">Crop
</div>
</div>
<div class="block">
<div class="ui-bar ui-bar-a" style="height:100%">Gallery
</div>
</div>
</div>
<div class="grid">
<div class="block">
<div class="ui-bar ui-bar-a" style="height:100%"><a id="img" href="" onclick="capturePhoto();"><center><i class="fa fa-camera fa-5x"></i></center></a></div>
</div>
<div class="block">
<div class="ui-bar ui-bar-a" style="height:100%">

<a href="" id="img" onclick="capturePhotoEdit();">
<center>
<i class="fa fa-crop fa-5x"></i>
</center>
</a>
</div>
</div>
<div class="block">
<div class="ui-bar ui-bar-a" style="height:100%">
<a id="img" href="" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">
<center><i class="fa fa-picture-o fa-5x"></i></center>
</a>
</div>
</div>
</div>
</div>
</center>
<center><img style="display:none;width:50%;height:50%;" id="smallImage" src="" /></center>
<center><img style="display:none; width:50%;height:50%;" id="largeImage" src="" /></center>
</div>
</div>
<script type="text/javascript" src="js/Camera.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</body>
</html>

Camera.js

Make a new Camera.js file inside the WWW/JS folder



//  Variable for picture source and return value format.
var pictureSource;
var destinationType;

// Loading device API libraries.
document.addEventListener("deviceready",onDeviceReady,false);

// device APIs are ready to use.
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}

// The function is called on successful retrieval of photo.
function onPhotoDataSuccess(imageData) {
var smallImage = document.getElementById('smallImage');

// This function is used for unhide the image elements
smallImage.style.display = 'block';

// This function is used to display the captured image
smallImage.src = "data:image/jpeg;base64," + imageData;
}

// This function is called on the successful retrival of image.
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('largeImage');

// This function is used for unhiding the image elements
largeImage.style.display = 'block';

// This function is used to display the captured image.
largeImage.src = imageURI;
}

// This function will execute on button click.
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 });
}

// This function will execute on button click.
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 });
}

// This function will execute on button click.
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}

// This function will be called if some thing goes wrong.
function onFail(message) {
alert('Failed because: ' + message);
}

CSS File : Style.css

Make a new Style.Css file inside the WWW/CSS folder

.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {
border: 1px solid #005994 !important;
background: #0093EA !important;
color: #fff !important;
font-weight: bold !important;
text-shadow: 0 0 #eee !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA), to( #007dcd ));
background-image: -webkit-linear-gradient( #0093EA , #007dcd );
background-image: -moz-linear-gradient( #0093EA, #007dcd );
background-image: -ms-linear-gradient( #0093EA , #007dcd );
background-image: -o-linear-gradient( #0093EA , #007dcd );
background-image: linear-gradient( #0093EA , #007dcd );
}
.ui-page-theme-a .ui-btn:hover, html .ui-bar-a .ui-btn:hover, html .ui-body-a .ui-btn:hover, html body .ui-group-theme-a .ui-btn:hover, html head + body .ui-btn.ui-btn-a:hover{
border: 1px solid #007dcd;
background: #333 ;
font-weight: bold;
text-shadow: 0 0 #eee !important;
color: #fff !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #0093EA ), to( #0093EA ));
background-image: -webkit-linear-gradient( #0093EA , #0093EA );
background-image: -moz-linear-gradient( #0093EA , #0093EA );
background-image: -ms-linear-gradient( #0093EA , #0093EA );
background-image: -o-linear-gradient( #0093EA , #0093EA );
background-image: linear-gradient( #0093EA , #0093EA );
}
.ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head + body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active {
background-color: #0093EA !important ;
border-color:#0093EA !important;
color: #fff ;
text-shadow: 0 1px 0 #005599 ;
}
img{
padding: 25px;
}

#main{
margin-top: 12% !important ;
}
.block{
width: 33.33%;
float: left;
}
.grid{
width: 100%;
}
.fa{
font-size: 300% !important;
color: #0093EA !important;
}
#img{
padding: 15% !important;
}
.fa:hover{
color: #f9f9f9 !important;
}

Conclusion:

Hope, you would have liked this post and would have learned about App building using PhoneGap. You would have also learned about PhoneGap plugins and platforms installation and few other necessary settings for running the application. We will be updating you regarding the same or some thing new, so keep reading our blog post.

For more related information go through following blogs –

PhoneGap Configuration File : Config.xml

Introduction To PhoneGap

One Reply to “PhoneGap Camera Plugin”

pradeep says:

February 7, 2016 at 4:14 am

good… but..there is no need to add camera plugin.
the functionality you give ..just work with only codova.js

thankyou.

Reply

Take Your Email Marketing To The Next Level!

Start using MailGet and experience world class email builder, create email newsletters in a snap and send great
emails to your audience. Do amazing email marketing at an affordable price.