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

help
1

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ā€™;

2

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.

3

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.

4

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.

5

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ā€™

6

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.

7

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.

8

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.

9

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

10

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 ?

11

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.

12

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 ?

13

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

14

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

15

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
16

@gkaradag Iā€™ve been using my android device to test (no simulator)

17

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

It worked as well.

18

Hello,
I reactivate this topic because i have exactly the same issue.
I tried all the previous solutions without success.
Does anyone had any luck, recently, here?

The expected behaviour:
I can access CameraPreview
The current behaviour:
CameraPreview is undefined

Thanks foo your help

19

Hi @pierre79

letā€™s try this (if you didnā€™t). If you use React just add this at the top, outside your functional component (or class), after your imports. In other frameworks you my try something similar of just initialize the value of CameraPreview = window.CameraPreview in your client startup file and keep it global (initialize without const, let or var).
If this works, you can let me know if you need anything else about this plugin. I can see I used it in the past, with React, in a couple of projects.

let CameraPreview = () => {}

Meteor.startup(() => {
  CameraPreview = window.CameraPreview
})

const options = Meteor.isCordova
  ? {
      x: 0,
      y: 56,
      width: window.screen.width,
      height: window.screen.width,
      // camera: CameraPreview?.CAMERA_DIRECTION.BACK,
      toBack: false,
      tapPhoto: false,
      previewDrag: false,
      flashMode: CameraPreview?.FLASH_MODE?.AUTO
    }
  : {}
20

Thanks for your answer.
The problem seems to be elsewere as window.CameraPreview is unknown. It seems I canā€™t manage to get this plugin running on my project.
The current version of Meteor is 2.9.1 and the plugin in meteor list

cordova:cordova-plugin-camera-preview         0.13.0