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()
Starts the camera preview instance.
When setting the toBack to TRUE, remember to add the style bellow 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.screen.width, height: window.screen.height, camera: "front", tapPhoto: true, previewDrag: false, toBack: false});stopCamera()
Stops the camera preview instance.
CameraPreview.stopCamera();takePicture(size)
Take the picture, the parameter size is optional
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.
CameraPreview.setOnPictureTakenHandler(function(result){
document.getElementById('originalPicture').src = "data:image/jpeg;base64," + result;
});switchCamera()
Switch from the rear camera and front camera, if available.
CameraPreview.switchCamera();show()
Show the camera preview box.
CameraPreview.show();hide()
Hide the camera preview box.
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.
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:
