phonegap-plugin-image-capture
This plugin provides an implementation for clicking pictures with a device camera based on the W3C MediaStream Image Capture API for iOS and Android. In order to achieve the image capture, this plugin uses the phonegap-plugin-media-stream which is based on the W3C Media Stream API. The phonegap-plugin-media-stream makes the mediastream track available to the phonegap-plugin-image-capture which allows the user to click a picture. The phonegap-plugin-media-stream is added as a dependency to the phonegap-plugin-image-capture plugin.
Installation
phonegap plugin add phonegap-plugin-image-capture
phonegap plugin add https://github.com/phonegap/phonegap-plugin-image-capture.git
ImageCapture Constructor
The ImageCapture constructor uses the mediastream track obtained by using the phonegap-plugin-media-stream to create an object.
Example
navigator.mediaDevices.getUserMedia({
'audio': true,
'video': {
facingMode: 'user'
}
}).then(function(getmedia) {
var track = getmedia.getVideoTracks()[0];
var imageCapture = new ImageCapture(track);
});
imageCapture
object
The The imageCapture object has the following methods:
- takePhoto(optional PhotoSettings photoSettings)
- getPhotoCapabilities()
- getPhotoSettings()
- grabFrame()
imageCapture.takePhoto(optional PhotoSettings photoSettings)
The takePhoto() promise accepts an optional PhotoSettings parameter and allows the user to take a picture. The implementation in iOS allows the user to open a camera view and click a picture. Android has integrated support for the W3C Media Stream API and the W3C MediaStream Image Capture API from Chrome 59 and the latest Android System Webview. The takePhoto() promise resolves with a blob
on successful capture of a picture.
Example
imageCapture.takePhoto()
.then(blob => {
console.log('Photo taken: ' + blob.type + ', ' + blob.size + 'B');
const image = document.querySelector('img'); // img is an <img> tag
image.src = URL.createObjectURL(blob);
})
.catch(err => console.error('takePhoto() failed: ', err));
imageCapture.getPhotoCapabilities()
The getPhotoCapabilities() method retrieves the ranges of available configuration options, if any. The promise returns the value of the following four properties if available:
- redEyeReduction : Value can be one of
never
,always
andcontrollable
if available. - imageHeight : Has
max
,min
andstep
values if available. - imageWidth : Has
max
,min
andstep
values if available. - fillLightMode : Value can be one of
auto
,flash
andoff
if available.
Example
imageCapture.getPhotoCapabilities()
.then(function(capabilities){
console.log(capabilities);
});
imageCapture.getPhotoSettings()
This method returns the current configuration values for the settings for taking a picture. The following values are returned by this promise :
- redEyeReduction (Boolean) ,if available.
- imageHeight (Number)
- imageWidth (Number)
- fillLightMode : One of the three values :
auto
,flash
andoff
,if available.
Example
imageCapture.getPhotoSettings()
.then(function(settings){
console.log(settings);
});
imageCapture.grabFrame()
This method takes a snapshot of the live video being held in the mediastream track, returning an ImageBitmap if successful. This method is not supported on iOS and rejected promise with DOMException
is returned.
Contributing
LICENSE
Quirks
In order to add a blob
object as a source for an img
tag, blob:
should be added to the img-src part of the Content-Security-Policy meta tag in your index.html
.