Hello All

Today we will discuss about Showing camera view inside html in android and then click a picture:

In PhoneGap we can Show Camera view inside HTML. Before we proceed with the plugin let me give you a walk-through of its features.
This plugin allows Camera interaction within HTML code and we can show camera preview as a popup on the HTML page.

This Plugin contains following Features:

• Allows Camera interaction from HTML code.
• We can Drag Preview Box.
• Set Camera color effect for both Android and iOS.
• Set Camera preview box position.
• We can maintain HTML interactivity.
• Camera preview inside the App.
• Set size of preview boxes as required.
  
  

To use these features we need to install following plugin:

https://github.com/mbppower/CordovaCameraPreview.git

For Phonegap Build:

<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />

The Plugin contains several methods:

1. startCamera(rect, defaultCamera, tapEnabled, dragEnabled, toBack)
startCamera function starts camera preview instance.

2. stopCamera()
stopCamera function stops camera preview instance.

3. takePicture(size)
This function helps to capture picture. takePicture function has an optional size parameter which is used to specify size of the picture.

4. switchCamera()
SwitchCamera function is used to switch between rear and front camera (if available)

5. show()
Show the camera preview box.

6. hide()
Hide the camera preview box.

To get better understanding of the functionality you can try the following demo by add the below mentioned lines to your app code.

HTML:

<div class="controls">
    <div class="block">
        <button id="startCameraButton">Start Camera at back</button>
        <button id="stopCameraButton">Stop Camera</button>
    </div>
    <div class="block">
        <p>
            <button id="startCameraAnotherPosButton">Start Camera at front</button>
        </p>
        <p>Color Effect:
            <select id="colorEffectCombo">
                <option selected value="none">none</option>
                <option value="aqua">aqua</option>
                <option value="blackboard">blackboard</option>
                <option value="mono">mono</option>
                <option value="negative">negative</option>
                <option value="posterize">posterize</option>
                <option value="sepia">sepia</option>
                <option value="solarize">solarize</option>
                <option value="whiteboard">whiteboard</option>
            </select>
        </p>
    </div>
    <div class="block">
        <button id="takePictureButton">Take Picture</button>
        <button id="switchCameraButton">Switch Camera</button>
    </div>
    <div class="block">
        <button id="hideButton">Hide</button>
        <button id="showButton">Show</button>
    </div>
</div>
<div class="pictures">
    <p>
        <img id="originalPicture" width="200" />
    </p>
</div>

CSS:

body, html {
            height: 100% ;
        }
        body {
            color: #333;
            text-align: center;
            font-family: sans-serif;
            background-color: transparent;
        }
        .block{
            padding:.25rem 0;
            margin:.25rem 0;
            background: #00ccff;
            border: 1px solid #111;
            border-radius: 3px;
        }
        button{
            background: gray;
            color:#333;
            border-radius: 3px;
            border: 1px solid #ccc;
            margin: .25rem;
        }
        .controls {
            margin-top: 100%;
        }

js

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.getElementById('startCameraButton').addEventListener('mousedown', this.onStartCamera, false);
        document.getElementById('startCameraAnotherPosButton').addEventListener('mousedown', this.onStartCameraAnotherPos, false);
        document.getElementById('stopCameraButton').addEventListener('mousedown', this.onStopCamera, false);
        document.getElementById('takePictureButton').addEventListener('mousedown', this.onTakePicture, false);
        document.getElementById('switchCameraButton').addEventListener('mousedown', this.onSwitchCamera, false);
        document.getElementById('showButton').addEventListener('mousedown', this.onShow, false);
        document.getElementById('hideButton').addEventListener('mousedown', this.onHide, false);
        document.getElementById('colorEffectCombo').addEventListener('change', this.onColorEffectChanged, false);
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onStartCamera: function() {
        var tapEnabled = true;
        var dragEnabled = true;
        var toBack = true;
        cordova.plugins.camerapreview.startCamera({
            x: 0,
            y: 50,
            width: 300,
            height: 300
        }, "front", tapEnabled, dragEnabled, toBack);
    },
    onStartCameraAnotherPos: function() {
        var tapEnabled = true;
        var dragEnabled = true;
        var toBack = false;
        cordova.plugins.camerapreview.startCamera({
            x: 200,
            y: 0,
            width: 100,
            height: 150
        }, "front", tapEnabled, dragEnabled, toBack);
    },
    onStopCamera: function() {
        cordova.plugins.camerapreview.stopCamera();
    },
    onTakePicture: function() {
        cordova.plugins.camerapreview.takePicture({
            maxWidth: 640,
            maxHeight: 640
        });
    },
    onSwitchCamera: function() {
        cordova.plugins.camerapreview.switchCamera();
    },
    onShow: function() {
        cordova.plugins.camerapreview.show();
    },
    onHide: function() {
        cordova.plugins.camerapreview.hide();
    },
    onColorEffectChanged: function() {
        var effect = document.getElementById('colorEffectCombo').value;
        cordova.plugins.camerapreview.setColorEffect(effect);
    },
    // deviceready Event Handler
    onDeviceReady: function() {
        //on picture
        cordova.plugins.camerapreview.setOnPictureTakenHandler(function(result) {
            document.getElementById('originalPicture').src = result[0]; //originalPicturePath;
        });
    }
};
app.initialize();