virtuoworks / canvascameraplugin Goto Github PK

Is there a way to Record Videos on both Android / IOS platform and get file URI to upload that video to server???

Hello,

Today I tried to release an app which uses this plugin and when uploading to the Google Play store, the app shows a "Supported Devices" list of ZERO.

Working with LiveChat support at Goolge Play store, they alerted me to an issue with the android.hardware.camera.setParameters feature. Upon researching, I found that this plugin injects into my AndroidManifest.xml.

It appears there is no such Hardware feature, at least I don't see it listed on this reference page: https://developer.android.com/guide/topics/manifest/uses-feature-element.html#features-reference

By requiring a feature that no devices have, Google Play excludes the app from all devices.

The app will still sideload fine onto a test device over USB, which is why I did not catch this issue during testing. The test device does not apparently care whether this manifest element exists, but Google Play store does.

Hi

Thanks for the great plugin. It worked fine on iOS , but is not working on Android Device. Tested on Nexus 6p Nougat. Following was shown in logcat when tested with demo app.

Hello,

i there any proved/suggested way how to get image data in resolution specified by capture options?

As of following line of code

fullsizeData = getResizedAndRotatedImage(fullsizeData, mCanvasWidth, mCanvasHeight, displayOrientation);

Fullsized data are shrinked to canvas size into resulting data/file.

Canvas data are only for preview, but i need bigger resolution for live data processing.

I found two ways how to do it:

• set canvas size bigger and resize it by css (works, but wasting some resources due to fps updates)
• modify java code to add original sized picture data into some result

Is there any better way how to do it?

Thank you

Most FrontCams provide a horizontally mirrored image. Since I want to record this picture, I have to mirror the mirroring :)

The most efficient way is in CanvasCamera.js.

My proposal:
Expand the options by Booleans flipH and flipV.
Replace CanvasCamera.Renderer.prototype.draw with:

        ```
CanvasCamera.Renderer.prototype.draw = function (frame) {
            this.canvasCamera.dispatch ('beforeframerendering', this, frame);
            if (frame) {
                if (this.canvasCamera.options.flipH === true || this.canvasCamera.options.flipV === true) {
                    var scaleH = this.canvasCamera.options.flipH? -1: 1; // Set horizontal scale to -1 if flip horizontal
                    var scaleV = this.canvasCamera.options.flipV? -1: 1; // Set verical scale to -1 if flip vertical
                    var posX = this.canvasCamera.options.flipH? frame.dWidth * -1: 0; // set x position to -100% if flip horizontal
                    var posY = this.canvasCamera.options.flipV? frame.dHeight * -1: 0; // Set y position to -100% if flip vertical
                    this.context.save (); // save the current state
                    this.context.scale (scaleH, scaleV); // Set scale to flip the image
                    this.context.drawImage (frame.image, frame.sx, frame.sy, frame.sWidth, frame.sHeight, posX, posY, frame.dWidth, frame.dHeight); // draw the image
                    this.context.restore (); // Restore the last saved state
                }
                else {
                    this.context.drawImage (frame.image, frame.sx, frame.sy, frame.sWidth, frame.sHeight, frame.dx, frame.dy, frame.dWidth, frame.dHeight);
                }
            }
            this.canvasCamera.dispatch ('afterframerendering', this, frame);
            return this;
        };

I have a project that uses the CanvasCameraPlugin. With a vast majority of frames, it works fine. But, I keep getting this error randomly in the console:

[Error] Failed to load resource: The requested URL was not found on this server. (f2-canvascamera.jpg, line 0)

In fact, it's not so random. It happens shortly after I start the camera (after 1 or 2 frames), then it happens randomly and then one last time when I stop the camera (each time). But, as I said, most frames are loaded normally (I can see them in the Resources tab of the Safari Inspector):

These are my options:

{fps: 2, use: "file", cameraFacing: "front"}

I'm not using onCapture, onBeforeDraw or onAfterDraw.

It's as though the images are being prematurely deleted from the device. Perhaps it's something else but I'm running out of ideas. Do you think this can be a bug with the library? Or maybe you would know what I could check to try and solve this?

Thanks a lot!

I need an example project to use this one.

I am not sure what data included with the "frame" in the "onAfterDraw" return.

Is there any example on that? Would like to get the image data, is there any image data included in the "frame"

Thank you

II ran into problems with an Ionic app and the plugin: when running under android the world is fine, but under iOS and using "use:'file'" I get the console-error:
[Error] Not allowed to load local resource: file:///var/mobile/Containers/Data/Application/CFD416B7-AD48-48A9-9511-AA10E19F92B7/Documents/tmp/f16-canvascamera.jpg?seed=1264145267490218
(anonyme Funktion) (CanvasCamera.js:200)
(anonyme Funktion)
runTask (polyfills.js:3:10845)
invokeTask (polyfills.js:3:16802)
n (polyfills.js:3)

I copied your (working) cordova-example into the blank Ionic starter app and got the same problem.
All whitelisting tricks and a full open security policy don't help.

Using "use:'data'" works is a workaround, but melting down my poor 5S :)

I have tried without any result it just strech the canvas. Any help would be welcome.

For me, the cameraPosition not set through the options object. Only works with window.plugin.CanvasCamera.cameraPosition('front');

While experimenting using your plugin I noticed a strange behaviour. When I put down my device camera down during the stream and pick it up again, the process freezes.

const options = {
      cameraPosition:'back',
      use:'data',
      onAfterDraw: function(){
        if(!_this.videoReady){
          _this.set('videoReady',true);
        }
        else{
          if(!_this.get('positioned')&&_this.get('streaming')){
          _this.placeIndicators(parseInt(video.style.width), parseInt(video.style.height));
        }
        }
      }
    };
    const canvas = document.getElementById('testCanvas');
    window.plugin.CanvasCamera.initialize(canvas);
    window.plugin.CanvasCamera.start(options);

Testing with an emberJS based cordova app on IOS 12 safari wkwebview.

while trying to use the demo i cant install the plugin through cordova command line
i get this error
Error: Failed to fetch plugin https://github.com/dekwilde/CanvasCameraPlugin.git via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
please if u can update to solve this issue
regards

hi,
i have this code
document.addEventListener('deviceready', function () {
var objCanvas = document.getElementById('canvas');
window.plugin.CanvasCamera.initialize(objCanvas);
var cameraOptions = {
width: window.screen.width,
height: window.screen.height,
canvas: {
width: window.screen.width,
height: window.screen.height
},
capture: {
width: window.screen.width,
height: window.screen.height
},
fps: 1,
use: 'data',
flashMode: false,
thumbnailRatio: 1/6,
cameraFacing: 'front',
onBeforeDraw: function(frame){

      },
      onAfterDraw: function(frame){
        //save in list
      }
    };
    window.plugin.CanvasCamera.start($scope.cameraOptions, function(error) {
      
    }, function(data) {
      
    });
}, true);

the camera is ready in canvas, but capture 30 frames/sec. My array contains after 2 seconds about 60 frames. But i have set 1 fps and i suppose max 2 frames after 2 seconds.

Plugin doesn't support this project's cordova-android version. cordova-android: 7.1.4, failed version requirement:
<6.3.0

Is there a recommended mechanism for actual file capture, or must we simply "scrape" the canvas with a toDataURL()? Attempting to use the frame object is proving unfruitful. Since it's only available in a Cordova context, and I can't JSON.stringify it without error, I'm unable to verify what it contains or see how to use it. Please advise.

Hi there.
The error occurs in my project and in your demo:
As soon as I add an empty function to the options I get this error.
I used your sample, i.e.
...
onAfterDraw: function (frame) {
// do something with each frame
}
...

"TypeError: this.canvas.fullsize.setOnAfterDraw is not a function
at CanvasCamera.setRenderingPresets (file:///android_asset/www/plugins/com.virtuoworks.cordova-plugin-canvascamera/www/CanvasCamera.js:492:34)
at CanvasCamera.start (file:///android_asset/www/plugins/com.virtuoworks.cordova-plugin-canvascamera/www/CanvasCamera.js:377:10)

any suggestion to save recording video as file?

Is there any way to set the Orientation?

Please add an option to allow users to tap to focus the camera.

Similar to what this plugin does:
https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview

I have a meteor app that I'm trying to capture Video and display it in a canvas tag that runs on iOS. I can't figure out how to install this plugin.

What I have done is to create the borilerplate meteor example and add the plugin. Here are my steps in meteor:

$ meteor create --example angular2-boilerplate
$ meteor add-platform ios
$ meteor add cordova:com.virtuoworks.cordova-plugin-canvascamera@https://github.com/VirtuoWorks/CanvasCameraPlugin#b634fe23fb058ef3182cf0f37db13183937ad47f

Sow when I run the build command I get the following error:
=> Errors prevented startup:

While installing Cordova plugins:
error: Meteor no longer supports installing Cordova plugins from arbitrary tarball URLs. You can either add a plugin from a Git URL with a SHA reference, or from a
local path. (Attempting to install from https://github.com/VirtuoWorks/CanvasCameraPlugin#b634fe23fb058ef3182cf0f37db13183937ad47f.)

=> Your application has errors. Waiting for file change.

Hello i need run on ionic with angular but typescript types not working.
`

import * as CanvasCamera from 'cordova-plugin-canvascamera';
`
return this error : File '~/node_modules/@types/cordova-plugin-canvascamera/index.d.ts' is not a module.

The readme says to use setCameraPosition to change the direction the camera is facing. However, it looks like the correct function to use would be cameraPosition. There is no setCameraPosition function in www/CanvasCamera.js

See:
https://github.com/VirtuoWorks/CanvasCameraPlugin/blob/master/www/CanvasCamera.js#L416

Looks like the same would also apply to setFlashMode as well.

Not working on android 13, gives permission denied error.
I can see a PR for this issue but its not avaibale NPM.

Hi,

Thank you very much for this plugin.

Is there any way to make it work on newer versions of cordova-android?

The plugin successively transfers an image to a canvas. In an Angular app, this causes Angular Change Detection to be triggered on every "drawImage" (216 in CanvasCamera.js) and every "clearRect" (206 in CanvasCamera.js) and elsewhere ... up to 60 times a second, which could make the app really slow and a phone melts

In Angular, change detection can be bypassed by zone.runOutSideAngular (...) when drawing on a canvas. But this is not possible in the context of the plugin, since there is no zone.

Solution 1: An Angular version of the plugin that uses runOutSideAngular :)

Solution 2: Optionally provide a wrapper callback that is defined by the app and performs all drawing operations in the context of the wrapper.

Some other ideas to tackle this problem wtihout changing the plugin?

Best Regards

Martin

I have a good quality camera in my phone but using this API video is showing blur on canvas. Have any idea how to improve this ?

The performance is poor running on a modern android smartphone.
When I set the resolution to 1280x720, the fps drops below 30 (lags).
If I set use: 'data' it's even worse.
Is there any way to speed things up or is it a canvas limitation?

When you want to copy the canvas inside a cordova app (e.g. in Ionic), you can't copy the canvas because of cross origin problems ("The canvas has been tainted by cross-origin data ").

The fix is only one line inside CanvasCamera.js:

    CanvasCamera.Renderer.prototype.initialize = function() {
        if (this.element) {
            this.context = this.element.getContext('2d');

            this.image = new Image();
            this.image.crossOrigin = 'anonymous'; // <-- this line will fix the problem

            this.image.addEventListener('load', function(event) {
               [...]

Any chance of exposing zoom and focus features of cameras?

What about convert the JavaScript in project to TypeScript? For Angular 2 support?

There are some weird odd behaviour since I updated to iOS 17 and started building with XCode 15.

If the iPad is in landscape, the camera is flipped upside down.
If the iPad is in portrait, the camera is flipped 90 degrees.

However, if I change the iPad orientation, things go back to normal and stays that way even if I close the app.

Any idea what could be causing this odd behaviour?

Here is a little proposal: it would be really cool if we could force the orientation used by the camera (portrait or landscape). Currently, there does not seem to be a way to do that.

By the way, I tried doing it with cordova-plugin-screen-orientation but, even though the reported orientation changes, the behaviour of CanvasCameraPlugin does not.

I guess the most logical way would be for CanvasCameraPlugin to simply follow window.screen.orientation. This way it would allow us to set it through the screen orientation plugin (or other) without adding bloat to CanvasCameraPlugin.

Thanks for your work on this plugin!

after updating to version 1.0.8 onAfterDraw is not called anymore, please check in your environment, I will reproduce if needed.

Hi all.

In cordova-android: 7.0.0 it is not possible to install 'cordova-plugin-compat' anymore. Seems, that it is obsolete and its functions are covered by the new engine. Unfortunately, CanvasCameraPlugin depends on it, so it seems not to be possible to update apps to cordova-android: 7.0.0.

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];
  }

Terrific plugin. Using on cordova-ios 5.1.0. Now I'm upgrading to cordova-ios 6.1.0 in order to get rid of UIWebView and start using WKWebView to get my apps aproved on AppStore. Sadly, app compiles fine but video is not shown on canvas.

Hi, i'm getting

2017-05-30 00:33:55.721560+0200 Projector[15249:6507291] Apache Cordova native platform version 4.4.0 is starting.
2017-05-30 00:33:55.722156+0200 Projector[15249:6507291] Multi-tasking -> Device: YES, App: YES
2017-05-30 00:33:55.728249+0200 Projector[15249:6507291] 

Started backup to iCloud! Please be careful.
Your application might be rejected by Apple if you store too much data.
For more information please read "iOS Data Storage Guidelines" at:
https://developer.apple.com/icloud/documentation/data-storage/
To disable web storage backup to iCloud, set the BackupWebStorage preference to "local" in the Cordova config.xml file
2017-05-30 00:33:55.792209+0200 Projector[15249:6507291] Using UIWebView
2017-05-30 00:33:55.793591+0200 Projector[15249:6507291] [CDVTimer][handleopenurl] 0.065982ms
2017-05-30 00:33:55.794908+0200 Projector[15249:6507291] [CDVTimer][intentandnavigationfilter] 1.269996ms
2017-05-30 00:33:55.794985+0200 Projector[15249:6507291] [CDVTimer][gesturehandler] 0.043988ms
2017-05-30 00:33:55.795060+0200 Projector[15249:6507291] [CDVTimer][canvascamera] 0.051975ms
2017-05-30 00:33:55.795081+0200 Projector[15249:6507291] [CDVTimer][TotalPluginStartup] 1.574039ms
2017-05-30 00:33:55.839457+0200 Projector[15249:6507332] libMobileGestalt MobileGestaltSupport.m:153: pid 15249 (Projector) does not have sandbox access for frZQaeyWLUvLjeuEK43hmg and IS NOT appropriately entitled
2017-05-30 00:33:55.839506+0200 Projector[15249:6507332] libMobileGestalt MobileGestalt.c:550: no access to InverseDeviceID (see <rdar://problem/11744455>)
2017-05-30 00:33:56.083797+0200 Projector[15249:6507291] Resetting plugins due to page load.
2017-05-30 00:33:56.122436+0200 Projector[15249:6507291] Finished load of: file:///var/containers/Bundle/Application/EFAAF37D-E0B9-4DFC-B954-1607221C0F82/Projector.app/www/index.html

in xCode.
I'm using cordova 7.0.1.