Home / Cordova / Camera API Using Cordova

Camera API Using Cordova

You use the Cordova Camera API to provide the user with the ability to take a picture of an employee, and use that picture as the employee’s picture in the application. We do not persist that picture in this sample application.
The code below only works when running the application on your device as a Cordova app. In other words, you can’t test it in a browser on the desktop.

1. Add the camera plugin to your project:

cordova plugin add org.apache.cordova.camera

2. In index.html, add the following list item to the employee template: See this Template Tutorial

<li class="table-view-cell media">
  <a hre="#" class="push-right change-pic-btn">
      <span class="media-object pull-left"></span>
      <div class="media-body">
          Change Picture

3. In the initialize() function of EmployeeView, register an event listener for the click event of the Change Picture list item:

this.$el.on('click', '.change-pic-btn', this.changePicture);

4. In EmployeeView, define the changePicture event handler as follows:

this.changePicture = function(event) {
  if (!navigator.camera) {
      alert("Camera API not supported", "Error");
  var options =   {   quality: 50,
                      destinationType: Camera.DestinationType.DATA_URL,
                      sourceType: 1,      // 0:Photo Library, 1=Camera, 2=Saved Album
                      encodingType: 0     // 0=JPG 1=PNG

      function(imgData) {
          $('.media-object', this.$el).attr('src', "data:image/jpeg;base64,"+imgData);
      function() {
          alert('Error taking picture', 'Error');

  return false;

5. Finally Test the Application 🙂

About Rasel Khan

This is Rasel Khan, I’ve been working with the computers since I was pretty young. Right now, I’ve completed graduation for B.Sc(Engg) in Computer Science & Engineering (CSE) in 2014 at Jatiya Kabi Kazi Nazrul Islam University, Trishal, Bangladesh. For almost a decade now, I’ve been playing around with over a dozen programming languages on several different platforms, from JavaScript to PHP, from Python to Django. My favourite has always been PHP.

Check Also

Handlebars Templates Using Cordova

Writing HTML fragments in JavaScript and programmatically inserting them into the DOM is tedious. It …

Leave a Reply

Your email address will not be published. Required fields are marked *