virtuoworks / canvascamera-cordova-demo

A sample Apache Cordova application that uses the canvas camera plugin.

Cordova CanvasCamera Plugin Demo

A sample Apache Cordova application that uses the CanvasCamera plugin.

Supported Platforms

• iOS
• Android

Dependencies

• Git
• NodeJS
• Apache Cordova
• Android Studio and SDK and/or Xcode and iOS SDK

Installation

Clone the repository :

git clone https://github.com/VirtuoWorks/canvascamera-cordova-demo.git
# goto CanvasCameraDemo directory
cd canvascamera-cordova-demo

Add platforms :

Any operating system

cordova platform add android

MacOS only

cordova platform add ios

The plugin is listed as a project dependency in the npm package.json file and Cordova config.xml file.

When adding any platform, Cordova should install automatically the Canvas Camera plugin into the demo project.

You can check that the plugin has been properly installed by checking the \plugins\ directory inside your project directory.

Prepare the project :

cordova prepare

Start the application :

Any operating system

cordova run android

MacOS only

cordova run ios

If the plugin was not installed :

Try to remove Canvas Camera plugin :

cordova plugin remove com.virtuoworks.cordova-plugin-canvascamera

Try to install Canvas Camera plugin :

cordova plugin add com.virtuoworks.cordova-plugin-canvascamera && cordova prepare

Notice : This will not work after having prepared any platform while using npm >=5. The plugin is already installed as a project dependency (check your \plugins\ directory). The latest npm dependency management system uses a package-lock.json file which will prevent you from installing the plugin again.

License

This software is released under the MIT License.

canvascamera-cordova-demo's Issues

Plugin not installing on Cordova-android version > 8.0.0

Hello,

Just tried to add Cordova plugin to a project in vain.

$ cordova plugin add https://github.com/VirtuoWorks/CanvasCameraPlugin.git Installing "com.virtuoworks.cordova-plugin-canvascamera" for android Plugin dependency "[email protected]" already fetched, using that version. Installing "cordova-plugin-compat" for android Plugin doesn't support this project's cordova-android version. cordova-android: 8.1.0, failed version requirement: <6.3.0 Skipping 'cordova-plugin-compat' for android Adding com.virtuoworks.cordova-plugin-canvascamera to package.json

Thank you for your feedback.

Regards.

How to apply a green screen to the canvas?

I found the function to apply green screen to webcam but I am confused about applying it to this plugin. How to apply a green screen to the canvas?

function draw() {
    var frame = readFrame();

    if (frame) {
      replaceGreen(frame.data);
      context.putImageData(frame, 0, 0);
    }

    // Wait for the next frame.
    requestAnimationFrame(draw);
  }

  function readFrame() {
    try {
      context.drawImage(video, 0, 0, width, height);
    } catch (e) {
      // The video may not be ready, yet.
      return null;
    }

    return context.getImageData(0, 0, width, height);
  }

  function replaceGreen(data) {
    var len = data.length;

    for (var i = 0, j = 0; j < len; i++, j += 4) {
      // Convert from RGB to HSL...
      var hsl = rgb2hsl(data[j], data[j + 1], data[j + 2]);
      var h = hsl[0], s = hsl[1], l = hsl[2];

      // ... and check if we have a somewhat green pixel.
	  //if (h >= 90 && h <= 160 && s >= 25 && s <= 90 && l >= 20 && l <= 75) {
	  
      if (h >= 65 && h <= 185 && s >= 0 && s <= 115 && l >= 0 && l <= 100) {
        data[j + 3] = 0;
      }
    }
  }

  function rgb2hsl(r, g, b) {
    r /= 255; g /= 255; b /= 255;

    var min = Math.min(r, g, b);
    var max = Math.max(r, g, b);
    var delta = max - min;
    var h, s, l;

    if (max == min) {
      h = 0;
    } else if (r == max) {
      h = (g - b) / delta;
    } else if (g == max) {
      h = 2 + (b - r) / delta;
    } else if (b == max) {
      h = 4 + (r - g) / delta;
    }

    h = Math.min(h * 60, 360);

    if (h < 0) {
      h += 360;
    }

    l = (min + max) / 2;

    if (max == min) {
      s = 0;
    } else if (l <= 0.5) {
      s = delta / (max + min);
    } else {
      s = delta / (2 - max - min);
    }

    return [h, s * 100, l * 100];
  }

Image ratio

How to change image / picture ratio size?
here is my options setup:
var options = {
canvas: {
width: 270,
height: 360,
},
capture: {
width: 270,
height: 360,
},

when the image captured, the final image size is: 270 x 202 pixel.
So, how to capture the image in portrait orientation and same size as option.