Implementing Camera API in Phonegap

0
3083

In this exercise today we will be implementing camera API in Phonegap where we will create two buttons namely Take Photo and Get Photo which will access the camera and the photogallery.

  • So to start working with the camera api follow the steps given below :

  1. Install the Xampp server in your machine and if it is already installed then go to Xampp->htdocs folder.
  2. In htdocs folder create a new folder called as Camera .
  3. In this Camera folder create an html document called as index.html
  4. Now open your index.html file in any text editor and write the following html code in it :
  5. <!DOCTYPE html>
    <html>
        <head>
    
            <title>PhoneGap Application</title>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/main.js"></script>
    
        </head>
        <body>
    
            <!--button for capturing a photo-- >
            <button onclick="takePhoto();">Take A Photo</button> <br>
            <!--button for accessing the  photo library-- >
            <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Get a Photo</button><br>
             <!--Displaying the image captured to put to data--> 
            <img style="display:none;width:200px;height:190px;" id="dataImage" src="" />
            <!--Displaying the image to be accessed from the source file-->
            <img style="display:none;width:200px;height:190px;" id="uriImage" src="" />
    
        </body>
    </html>
    

  6. So after writing the code you will have the following look out of your text editor :
  7. 1

  8. Now in the Camera folder create a new folder called as js .
  9. In this js folder create a new text document called as main.js i.e save it with type as js .
  10. Now open this main.js file with any text editor window and write the following code in it :
  11. var pictureSource;    //Source var
    var destinationType;  //Destination var
    
    //Add event listener to run when the device is ready
    document.addEventListener("deviceready", onDeviceReady, false);
    
    //Device is ready
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }    
    
    //Will run if data photo is taken
    function onPhotoDataSuccess(imageData) {
        //Set image handler
        var dataImage = document.getElementById('dataImage');
    
        //Unhide
        dataImage.style.display = 'block';
    
        // Show photo from data
        dataImage.src = "data:image/jpeg;base64," + imageData;
    }
    
    //Will run if url photo is taken
    function onPhotoURISuccess(imageURI) {
        //Set image handler
        var uriImage = document.getElementById('uriImage');
    
        // Unhide image elements
        uriImage.style.display = 'block';
    
        //Show photo from uri
        uriImage.src = imageURI;
    }
    
    //Capture picture
    function takePhoto() {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess, onError, {
            quality: 50,
            destinationType: destinationType.DATA_URL
        });
    }
    
    
    //Get photo from gallery
    function getPhoto(source) {
        // Retrieve image file from gallery
            navigator.camera.getPicture(onPhotoURISuccess, onError, {
            quality: 50,
            destinationType: destinationType.FILE_URI,
            sourceType: source
        });
    }
    
    
    function onError(message) {
        alert('Error: ' + message);
    }
    
    

  12. Here is the screen shot of your Notepad++ window :
  13. Implementing Camera API in Phonegap2

    Implementing Camera API in Phonegap3

    Implementing Camera API in Phonegap4

  14. Hence after writing the code save your document and now sign in into your Github account by visiting github.com :
  15. 0

  16. So now enter a username ,your email id and password in the respective tabs and click on the Sign up for GitHub button .
  17. After you click on the signup button you will get the following window :
  18. Implementing Camera API in Phonegap0.1

  19. Now click on the ‘+’ icon on the right hand side as indicated by the red arrow and then click on the “ New repository ” as indicated by the blue arrow .
  20. 0.2

  21. After clicking on the New repository you will be navigated to the next window ,specify a Repository name ,select a public radio button and click on the Create repository button as shown in the image below :
  22. Implementing Camera API in Phonegap0.3

  23. So after clicking on the Create repository button you have the following window :
  24. Implementing Camera API in Phonegap0.4

  25. Go to xampp -> htdocs .
  26. In htdocs you have your Camera folder created .
  27. Now go to your start menu -> GitBash -> right click on it -> Send To -> Desktop (create a shortcut) of GitBash on Desktop as shown below :
  28. Implementing Camera API in Phonegap0.7

  29. So now on Desktop you will have a GitBash icon .
  30. Now Right Click on the GitBash icon on the desktop and go to properties and in the Start in edit box set the path as : c:xampphtdocs as shown in the image.
  31. Implementing Camera API in Phonegap0.8

  32. Now Click on Apply and OK button .
  33. Now start the GitBash application from the desktop and you will have the following screen :
  34. Implementing Camera API in Phonegap0.9

  35. Now insert the following command as shown below in the gitbash command prompt window..
  36. ls
    cd Camera(that is your folder name in htdocs folder)
    ls
    

  37. Thus after inserting the commands you will have the following view of your window :
  38. 0.10

  39. After you get this , insert further commands in the same command prompt window as given below :
  40. git config --global user.name “username of your github account”
    
    git config --global user.email “email of your github account”
    
    git config --list
    

  41. After inserting this command your gitbash command prompt window will have the following look , check whether your username and email you entered has been generated in the list :
  42. Implementing Camera API in Phonegap0.11

  43. After this insert the following commands :
  44. git init
    
    ls –a
    
    git add .
    
    git commit –am ‘initial commit’
    

  45. You will have the following window :
  46. Implementing Camera API in Phonegap0.12

  47. Now go to your github account where you had created the Camera repository and copy the add origin command and push command and paste it in the gitbash command prompt respectively.
  48. Implementing Camera API in Phonegap0.13

  49. So after adding the commands you will be asked for your github username and password ,so you will have the following window :
  50. 0.14

  51. Thus now the push operation is complete, so now we are ready to build our application .
  52. Now go to www.build.phonegap.com and click on Sign in tab present at the right.
  53. 1

  54. After clicking on the Sign in button you will get the next page where you have to click on the Sign in with GitHub button as shown by the arrow head ..
  55. 2

  56. After that you will be navigated to the next page where you have to click on the new app button as shown by the red arrow head.
  57. Implementing Camera API in Phonegap3

  58. After clicking on the new app button ,you will get the following window where you have to select the open-source tab and click on the dropdown pointer and select your app as shown in the image :
  59. 4

    NOTE : Here you will have your own application name that is the name given by you while creating the repository.

  60. When you select your app the fetching process will start as shown in the figure :
  61. 5

  62. After the fetching is complete you will get the following window :
  63. 6

  64. Now click on the Ready to Build button as shown by the red arrow in the image and you will get the following screen :
  65. 7

  66. Click on the android icon and you will have the following window popping up to save the apk file.
  67. Implementing Camera API in Phonegap8

  68. Now save your apk file and insert it in your android mobile phone and install it ,you will have the application running on your mobile phone
  69. Thus now test it on your android mobile phones .
  70. Hence we have successfully learnt implementing Camera API in Phonegap .

LEAVE A REPLY

Please enter your comment!
Please enter your name here