Share via

Visual Studio 2015: creating Android Camera App

  • Article

Prerequisites

  • Visual Studio 2015 with Cordova tools
  • BlueStacks Android simulator or any other simulator
  • Basic knowledge of HTML, JavaScript

With Visual Studio 2015 we can create android apps without knowledge of JAVA. In this article I will create a camera app using HTML and JavaScript.

Steps

So the first step is start visual studio and open a new blank Cordova project:

 

Name the project AndroidCameraApp then click OK.

In solution explorer open config.xml file:

With Display Name property we can change the display name of our app, if required. In left panel select plugins then Camera plugin and click on Add.

It will install the plugin in our app solution. With the help of this plugin we can interact with phone camera in our android app. After this close the config.xml file and open www - > index.html file.

In body tag write the below code:

<input id="btnTakePhoto" type="button" value="Take Photo" />

<div id="divPic"></div>

After this open index.js file which is located under scripts folder.

In this file go to onDeviceReady function. In this function write the following code:

document.getElementById('btnTakePhoto').onclick = function () {
            navigator.camera.getPicture(function (imageURI) {
                var pic = document.getElementById('divPic');
                pic.innerHTML = "<img src= '"  + imageURI  + "'/>";
            }, null, null);
        };

Then go to build and click on Build AndroidCameraApp.

It will build the setup file for Android OS. The setup file for android OS is with the .apk extension.

After building the project we can find the apk file in the project directory.

Open the location of the apk file and double click on this file. It will install this apk in the simulator you have. I used blue stack simulator, so file is installed in BlueStacks. We can also install this apk file in your android phone.

Now we can test this apk file in the simulator. Open the blue stack check the app name AndroidCameraApp.

Click on the app to open and check the app.

After clicking on the Take Photo button it will open camera of the phone or simulator. 

We can click a photo with phone/simulator camera.

After clicking the photo, in the app it will display the clicked photo.