PhoneGap Image Capture Plugin

The PhoneGap Image Capture Plugin for Android and iOS was introduced recently. It provides an implementation for taking pictures with a device camera and is based on the W3C Media Capture API . This plugin uses the PhoneGap Media Stream Plugin which is based on the W3C Media Stream API to access a track which is used to build an ImageCapture object.

Quickstart

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 camera view in the iOS implementation looks like:

Camera View in iOS

The Android version of the plugin allows the user to stream the video capture on a <video> tag and the user can then take a picture which is returned as a Blob:

Image Capture for Android

How to Install

This plugin can be installed by using one of the following commands:

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

Quickstart

The ImageConstructor uses the mediastream track obtained from the Phonegap Media Stream Plugin as shown below:

 navigator.mediaDevices.getUserMedia({
    'audio': true,
    'video': {facingMode: 'user'}
 }).then(function(getmedia) {
    var track = getmedia.getVideoTracks()[0];
    var imageCapture = new ImageCapture(track);
 });

This imageCapture object can then be used to take a picture using takePhoto(). The takePhoto() promise resolves with a blob on successful capture of a picture as shown below:

 imageCapture.takePhoto().then(blob => {
      console.log('Photo taken');
     // img is an <img> tag
      const image = document.querySelector('img'); 
      image.src = URL.createObjectURL(blob);
  })
  .catch(err => console.error('takePhoto() failed: '));

The imageCapture object has other properties like getPhotoCapabilities(), getPhotoSettings() and grabFrame() which are explained in detail here.

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 .

Contact Us

Your feedback is graciously accepted and appreciated!

Please submit your pull requests and issues here.