Cordova plugin that allows camera interaction from HTML code for showing camera preview below or above the HTML.
Feb 1, 2017 - This project is currently stale due to a lack of contributors and PR's. We are still accepting PR's. There are a number of forks with fixes in behaviour etc. Here are a few of the best forks:
- erperejildo/cordova-plugin-preview-camera
- westonganger/cordova-plugin-camera-preview (cleaned up api)
- skanygin/cordova-plugin-camera-preview
We would love to get all these fixes together in this repo to, if your interested in maintainer status please create a couple PR's and then contact [email protected]
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-camera-preview/cordova-plugin-camera-preview.git
Phonegap Build:
<gap:plugin name="cordova-plugin-camera-preview" />
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: