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.

phonegap plugin add phonegap-plugin-image-capture

phonegap plugin add https://github.com/phonegap/phonegap-plugin-image-capture.git

The ImageCapture constructor uses the mediastream track obtained by using the phonegap-plugin-media-stream to create an object.

        navigator.mediaDevices.getUserMedia({
            'audio': true,
            'video': {
                facingMode: 'user'
            }
        }).then(function(getmedia) {

            var track = getmedia.getVideoTracks()[0];
            var imageCapture = new ImageCapture(track);
        });

The imageCapture object has the following methods:

• takePhoto(optional PhotoSettings photoSettings)
• getPhotoCapabilities()
• getPhotoSettings()
• grabFrame()

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.

        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));

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 and controllable if available.
• imageHeight : Has max, min and step values if available.
• imageWidth : Has max, min and step values if available.
• fillLightMode : Value can be one of auto, flash and off if available.

        imageCapture.getPhotoCapabilities()
            .then(function(capabilities){
                console.log(capabilities);
            });

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 and off ,if available.

        imageCapture.getPhotoSettings()
            .then(function(settings){
                console.log(settings);
            });

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.

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 .