Cordova CameraPreview Plugin

Cordova plugin that allows camera interaction from HTML code.
Show camera preview popup on top of the HTML.

Features:

• Start a camera preview from HTML code.
• Drag the preview box.
• Set camera color effect.
• Send the preview box to back of the HTML content.
• Set a custom position for the camera preview box.
• Set a custom size for the preview box.
• Set a custom alpha for the preview box.
• Maintain HTML interactivity.

Installation:

cordova plugin add cordova-plugin-camera-preview

ionic plugin add cordova-plugin-camera-preview

Phonegap Build:

<gap:plugin name="cordova-plugin-camera-preview" />

Methods:

startCamera(options, successCallback, errorCallback)
Starts the camera preview instance.

When setting the toBack to TRUE, remember to add the style below on your app's HTML or body element:

html, body {
  background-color: transparent;
}

Javascript:

/* All options stated are optional and will default to values here */
CameraPreview.startCamera({x: 0, y: 0, width: window.device.width, height: window.device.height, camera: "front", tapPhoto: true, previewDrag: false, toBack: false});

stopCamera(successCallback, errorCallback)
Stops the camera preview instance.

CameraPreview.stopCamera();

takePicture(size, successCallback, errorCallback)
Take the picture, the parameter size is optional

CameraPreview.takePicture({maxWidth:640, maxHeight:640});

setOnPictureTakenHandler(successCallback, errorCallback)
Register a callback function that receives the image captured from the preview box.

CameraPreview.setOnPictureTakenHandler(function(picture) {
  document.getElementById('picture').src = picture; // base64 picture;
});

switchCamera(successCallback, errorCallback)
Switch from the rear camera and front camera, if available.

CameraPreview.switchCamera();

show(successCallback, errorCallback)
Show the camera preview box.

CameraPreview.show();

hide(successCallback, errorCallback)
Hide the camera preview box.

CameraPreview.hide();

setFlashMode(flashMode, successCallback, errorCallback)
Set the flash mode. Options are OFF, ON, AUTO

CameraPreview.setFlashMode('ON');

setColorEffect(colorEffect, successCallback, errorCallback)
Set the color effect.
iOS Effects: none, mono, negative, posterize, sepia.
Android Effects: none, mono, negative, posterize, sepia, aqua, blackboard, solarize, whiteboard

CameraPreview.setColorEffect('sepia');

setOnLogHandler(successCallback, errorCallback)

CameraPreview.setOnLogHandler(function(){
  console.log('log handler set!');
});

IOS Quirks:
It is not possible to use your computers webcam during testing in the simulator, you must device test.

Sample:
Cordova: cordova-plugin-camera-preview-sample-app for a complete working Cordova example for Android and iOS platforms.

Ionic: cordova-plugin-camera-preview-ionic-sample-app for a complete working Ionic example for Android and iOS platforms.

Android Screenshots: