Your Customers are Mobile, you will be too …

jQuery Mobile: Use Phone Camera using Cordova 2.0

In this tutorial we will show you how to give your jQuery mobile app access to the phone camera and take a simple photo. We will be using Cordova 2.0 to accomplish this. We will begin by ensuring the the camera is active, creating a button to go to the camera and then return to the application and display the photo.

Doing things with these photos will come in subsequent tutorials coming soon. For information on how to access the Photo Album please visit jQuery Mobile: Accessing the Photo Album with Cordova 2.0

jQuery Mobile using the Camera: The Files we need

Before we begin anything we need to make sure we have all the files in place we need to make the camera work. As we are using Cordova 2.0 to do this lets start with that.

The latest version of Cordova is available here free to download. http://phonegap.com/download

Download the latest version of phonegap. The only file are interested in is the latest Cordova.js file which is cordova-2.0.0.js at present. Copy this file to the folder of your in which store all your jQuery Mobile javascripts.

Now in the head of your HTML file you need to call the file just like you have the rest of your .js files.

Place the following line in your head of your HTML file.

<script src="path_to_file/cordova-2.0.0.js" type="text/javascript"></script>

Replace path to file with the folder your Cordova file is in.

Now we are ready to proceed.

jQuery Mobile using the Camera: Activating the Camera

First step of using the camera is activating it. So at the bottom of the Head of your HTML document we need to create a script tag for us to work with:

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

</script>

This Script element is going to hold all our JavaScript that makes our camera work. We will begin by declaring the Variables we need:

<script type="text/javascript" charset="utf-8">
 var pictureSource; // picture source
 var destinationType; // sets the format of returned value 

 </script>

From here need to ensure that Cordova is running before this script is able to be called:

<script type="text/javascript" charset="utf-8">
 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;
 }

 </script>

Ok the Camera is now active and ready to use when called upon

jQuery Mobile using the Camera: The jQuery to handle Taking the Photos

Now we need to prepare all the JavaScript that handles the actual taking of the photo. We are still working it the above script tags.

<script type="text/javascript" charset="utf-8">
 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;
 }

 // Take picture using device camera and retrieve image as base64-encoded string
 function capturePhoto() {
 navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, allowEdit : true,
 destinationType: destinationType.DATA_URL });
 }

 </script>

This function tells the Camera to use the Camera to take a photo. If it is successfull it will call the onPhotoDataSuccess function and if it fails it will call the onFail function. So we now need to create these:

<script type="text/javascript" charset="utf-8">
 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;
 }

 // Take picture using device camera and retrieve image as base64-encoded string
 function capturePhoto() {
 navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, allowEdit : true,
 destinationType: destinationType.DATA_URL });
 }

 // Called if something bad happens. 
 function onFail(message) {
 alert('Failed because: ' + message);
 }

 function onPhotoDataSuccess(imageData) {
 // Uncomment to view the base64 encoded image data
 // console.log(imageData);

 </script>

The onFail function will give the user an error message telling them why the camera failed to take the photo. The onPhotoDataSuccess function now returns the image in a method we can now use to display the photo. So now we just need to add the code that enables us to display the image. This should be our completed code:

<script type="text/javascript" charset="utf-8">
 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;
 }

 // Take picture using device camera and retrieve image as base64-encoded string
 function capturePhoto() {
 navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, allowEdit : true,
 destinationType: destinationType.DATA_URL });
 }

 // Called if something bad happens. 
 function onFail(message) {
 alert('Failed because: ' + message);
 }

 function onPhotoDataSuccess(imageData) {
 // Uncomment to view the base64 encoded image data
 // console.log(imageData);

 // Unhide image elements
 largeImage.style.display = 'block';

 // Show the captured photo
 // The inline CSS rules are used to resize the image
 largeImage.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;
 }
 </script>

Now we have completed all the JavaScript coding we need to do lets take a look at the HTML code we need to make this work.

jQuery Mobile using the Camera: The HTML to pull it all together

In the content Div of the page we want our app to use the camera we need to add the following code:

<div data-role="content"> 
 <button data-theme="d" onclick="capturePhoto();">Capture Photo</button> <br>
 <img style="display:none;width:100%;" id="largeImage" src="" /> <br> 
</div>

The onclick property of our button calls the capturePhoto function we created earlier. This set the whole process into action.

The img tag below it hides if it has nothing to display. However if our JavaScript from earlier detects you have an image to display it overrides this and displays the photo you just took in its place.

Hope you found this useful and see you again soon. For information on how to access the Photo Album (Part 2 of this series of tutorials) please visit jQuery Mobile: Accessing the Photo Album with Cordova 2.0

Thanks John Hunter for helping me to find this :)

6 Responses to jQuery Mobile: Use Phone Camera using Cordova 2.0

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: