tomarcd / cordova-plugin-camera-preview

Cordova plugin that allow camera interaction from HTML code

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: