node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

cordova-plugin-preview-camera

cordova-plugin-preview-camera

This repository was copied with the idea to use it with Meteor with new features. The use for now is only with Android
If you've got problems related with these new features or using it with Meteor add here an issue here but for further info would be better to publish them into main repository here:
https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview/issues

Features added and tested so far:

  • Auto zoom
All help would be really apreciated.

How to install with Meteor:
Type in your terminal meteor add cordova:cordova-plugin-preview-camera@X.X.X (actual version).
Not tested in Meteor 1.4 yet.

Npm: https://www.npmjs.com/package/cordova-plugin-preview-camera

------- Original info ---------

Cordova plugin that allows camera interaction from HTML cod for showing camera preview below or above the HTML.

May 18, 2016 - Plugin is starting to be maintained again, current development to get a decent stable updated version is happening on the fork westonganger/cordova-plugin-preview-camera. This will be merged into master here once its working. Please direct all pull requests over there until further notice.

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 https://github.com/cordova-plugin-preview-camera/cordova-plugin-preview-camera.git

Phonegap Build:

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

Methods:

startCamera(rect, defaultCamera, tapEnabled, dragEnabled, toBack)
Starts the camera preview instance.

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

style="background-color='transparent'"

Javascript:

var tapEnabled = true; //enable tap take picture
var dragEnabled = true; //enable preview box drag across the screen
var toBack = true; //send preview box to the back of the webview
var rect = {x: 100, y: 100, width: 200, height:200};
cordova.plugins.camerapreview.startCamera(rect, "front", tapEnabled, dragEnabled, toBack)

stopCamera()
Stops the camera preview instance.

cordova.plugins.camerapreview.stopCamera();

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

cordova.plugins.camerapreview.takePicture({maxWidth:640, maxHeight:640});

setOnPictureTakenHandler(callback)
Register a callback function that receives the original picture and the image captured from the preview box.

cordova.plugins.camerapreview.setOnPictureTakenHandler(function(result){
    document.getElementById('originalPicture').src = result[0];//originalPicturePath;
    document.getElementById('previewPicture').src = result[1];//previewPicturePath;
});

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

cordova.plugins.camerapreview.switchCamera();

show()
Show the camera preview box.

cordova.plugins.camerapreview.show();

hide()
Hide the camera preview box.

cordova.plugins.camerapreview.hide();

Base64 image:
Use the cordova-file in order to read the picture file and them get the base64.
Please, refer to this documentation: http://docs.phonegap.com/en/edge/cordova_file_file.md.html
Method readAsDataURL: Read file and return data as a base64-encoded data URL.

Sample:
Please see the CordovaCameraPreviewApp for a complete working example for Android and iOS platforms.

Android Screenshots: