Cordova Plugin Camera
A Plugin Camera is required to access the camera functionality of a device. This plugin enables a user to take any picture from the device and accessthe files from the image gallery. If you want to show a picture to the user, you can use FILEURI or DATAURI object.
It consists of a code script that makes your app capable of using device camera and its related hardware functionality. To enable the camera functionality of a device, we need to set a global navigator.camera object that performs tasks of taking pictures and selecting images from the device gallery. But we cannot use this object until the deviceready event is not conducted.
We can use this plugin in the following cases:
- It is used for accessing the image gallery of a device.
- It enables a user to access the camera functionality of a device.
- It can access a local path of an image.
Installation
To add a camera plugin in your Cordova app, type the below command:
This command is only applicable for Cordova 5.0+ versions. Older versions can use deprecate id for installing the plugins.
Methods
There are two methods that are used in the plugin camera. These methods are listed below:
- navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ])
- navigator.camera.cleanup(onSuccess, onFail)
1. navigator.camera.getPicture
This method is used to enable the functionality of a camera where we can capture an image from camera and access the images from the local device gallery. After that, this particular image is being passed to the success callback function as a base64-encoded string. We can also pass an image as the URI of the image file. You will also get an object in return i.e., CameraPopoverHandle. This object is used for repositioning an image file.
Working
When this method is invoked, it opens the default camera application of the device and allows the user to capture images.This action is performed in a default manner if Camera.sourceType equals to Camera.PictureSourceType.CAMERA. After capturing the photo,camera will get closed, and the application will also get restored.
For accessing an image from the existing device gallery, Camera.sourceType should be equal to Camera.PictureSourceType.PHOTOLIBRARY or Camera.PictureSourceType.SAVEDPHOTOALBUM. You will also get an object in return, i.e., CameraPopoverHandle. This object is used for repositioning an image file.
Thenceforth, the returned value will be sent to the cameraSuccess callback function in a specified format. It mainly depends on the specified object, i.e., cameraOptions. There are two available formatsof a returned value which are as follows:
- It is a default format that consists of a String object. This string object represents the path of an image file in local storage.
- It is a String object that consists ofa base64-encoded image.
This method is supported in different platforms like Android, iOS,Tizen, Windows 8, etc.
2. navigator.camera.cleanup(onSuccess, onFail)
A static method of camera that mainly works for removing the intermediate image files stored in temporary device storage after calling the camera.getPicture method. To apply this function, Camera.sourceType should be equal to Camera.PictureSourceType.CAMERA and Camera.destinationType object should also be equal to Camera.DestinationType.FILE_URI.
Note:This method is only supported for the iOS platform.
Example:
camera.onSuccess
A static typedef method of camera that mainly works for providing image data.
Parameter:
imageData: It is a string type object that mainly provides a Base64 encoding of image data or the image file URI.
camera.onError
It is also a static typedef method of camera that is used for providing an error message.
Parameter:
message: It is a string type object in which a message is provided by device native code.
camera.CameraOptions
It is an optional parameter that is used for customizing the camera settings of a device.
Properties
Name | Default | Type | Explanation |
---|---|---|---|
encodingType | JPEG | EncodingType | It selects the returned encoding of an image file. |
mediaType | PICTURE | MediaType | It mainly used for selecting the type of media. It applies only when PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM. |
sourceType | CAMERA | PictureSourceType | Its main task is to set the source of an image. |
destinationType | FILE_URI | DestinationType | It is used to select the format of the returned value. |
quality | 50 | number | It represents the quality of the saved image that is expressed in a range between 0 to 100, where 100 represents a full resolution screen with no loss from file compression. |
allowEdit | false | Boolean | It allows a user to simply edit the image before selection. |
targetWidth | number | It represents the width of an image in pixels for scaling the image. It must be applied with the targetHeight object. | |
targetHeight | number | It represents the height of an image in pixels for scaling an image. | |
correctOrientation | Boolean | It is used for rotating an image. | |
saveToPhotoAlbum | Boolean | After capturing an image, his object saves an image in the existing photo gallery. | |
cameraDirection | BACK | Direction | It is used for selecting the camera(front- or back-facing). |
popoverOptions | CameraPopoverOptions | It is applicable only for the iOS platform that mainly specifiesthe popover location on the iPad. |
Code:
HTML:
CSS:
JavaScript:
Output: