[Solved] How to import cordova-plugin-camera-preview

I added the cordova-plugin-camera-preview package by typing

meteor add cordova:cordova-plugin-camera-preview@1.0.6

How do I use it?

I have the following function, but I get an error in the console that reads:

CameraPreview is not defined

Template.camera.events({
  'click #closeCamera': function(){
    CameraPreview.stopCamera();
  },
  'click #openCamera': function(){
    CameraPreview.startCamera({x: 0, y:0, width: 640, height: 480, tapPhoto: false, camera: CameraPreview.CAMERA_DIRECTION.BACK }, function(imgData){});
  }
});

The following import does not work…

import {CameraPreview} from ‘cordova-plugin-camera-preview’;

Hi,

Since there are several similar Cordova plugins, I think it’s just an error in the version number or plugin name : meteor add cordova:cordova-plugin-camera-preview@0.9.0 works, for example.

The addition of the package isn’t the problem. The app gives an error that CameraPreview is not defined. If some could provide the correct import statement I think it would fix my problem.

I tried removing the meteor package and installing it via npm

meteor npm install --save cordova-plugin-camera-preview@0.9.0

Then I tried using it…

import CameraPreview from 'cordova-plugin-camera-preview'

Alas, I get an error

Cannot find module ‘cordova-plugin-camera-preview’

Sigh.

I have also tried the other npm package:

meteor npm install --save cordova-camera-preview@1.0.6

Then I tried using it…

import CameraPreview from 'cordova-camera-preview'

I got the error

Cannot find module ‘cordova-camera-preview’

Caveat: I don’t do any mobile development.

The npm runkit for cordova-camera-preview says:

cordova-camera-preview lists no main file and has no index.js, so it can’t be directly required…It may however contain internal files that you can require manually.

Which also means it can’t be directly imported.

Does this mean that these packages can no longer be used?

I tried

import CameraPreview from 'cordova-plugin-camera-preview/www/CameraPreview.js'

then I get an error

Uncaught Error: Cannot find module ‘cordova/argscheck’

I remember using these packages in the past (Meteor version 1.5.1) and there didn’t seem to be an issue.

The 1.0.6 version mentioned in your first post and installed with meteor add cordova: can’t be found in the registry, only on Npm. Its author mentions it’s just a test forked from the original plugin - which is still at 0.9.0, can be installed and works pretty well out of the box (at least on iOS, except for some background thread warnings in Xcode). No need to import, btw : just call CameraPreview and it works.

If I remove the “import” line everything loads, but when I click the button that calls

CameraPreview.startCamera({x: 0, y:0, width: 640, height: 480, tapPhoto: false, camera: CameraPreview.CAMERA_DIRECTION.BACK }, function(imgData){});

I get a console error that reads:

CameraPreview is not defined

This is weird, I just pasted the exact same code in Safari’s console and it works on any connected iOS device. Do you get this error with version 0.9.0, installed with meteor add ?

I have setup a very simple meteor test project on github.

If I run

meteor run android-device

I get the same “CameraPreview is not defined” error when I click the Open Camera button.

I took a look and saw that the plugin has been installed with meteor npm install, not meteor add cordova:.

Using the same project after running meteor add cordova:cordova-plugin-camera-preview@0.9.0, which will add/update a cordova-plugins file inside the .meteor directory, do you still get the error on Android when calling CameraPreview directly, without any import ?

There’s another important thing to mention about this plugin : the version on Npm, which is also the one grabbed by Meteor when performing meteor add cordova:, is presently outdated compared to the master branch on Github.

Best way to use the most recent version (which solves a problem with CameraPreview.stop() taking several seconds to execute while blocking the UI, as stated in this issue and this pull request) is to replace any version number (in this case 0.9.0) with the GitHub repository url. The line in your .cordova-plugins file should look like this :

cordova-plugin-camera-preview@https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git

Do you make your tests on mobile, on a simulator or on a browser?

Thank you for your help @ylebihan. I removed all packages and then added the cordova plugin this way

meteor add cordova:cordova-plugin-camera-preview@https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git#4c844ae72abc207a2d650d969bd822fccaa09991

The SHA at the end in the id of the latest commit on GitHub.

It now works! Woot!

1 Like

@gkaradag I’ve been using my android device to test (no simulator)

I tried a version where I added the meteor package jaaaco:meteor-camera

It worked as well.