Integrating Opencv4nodejs with Angular Electron

[cyluxx]

Hi,

I'm trying to use opencv4nodejs with Angular Electron on Windows.

It seems to build everything correctly. In the end I have a Release directory, including:

obj
opencv4nodejs.exp
opencv4nodejs.lib
opencv4nodejs.map
opencv4nodejs.node
opencv4nodejs.pdb

However I get the following error:

Uncaught Error: Cannot find module '[...]\node_modules\electron\dist\resources\electron.asar\build\Release\opencv4nodejs'
at webpackEmptyContext (lib sync:2)
at Object../node_modules/opencv4nodejs/lib/cv.js (cv.js:17)
at webpack_require (bootstrap:76)
at Object../node_modules/opencv4nodejs/lib/opencv4nodejs.js (opencv4nodejs.js:11)
at webpack_require (bootstrap:76)
at Object../src/app/components/home/components/action-info/action-info.component.ts (main.js:6021)
at webpack_require (bootstrap:76)
at Object../src/app/app.module.ts (app.component.ts:11)
at webpack_require (bootstrap:76)
at Object../src/main.ts (main.ts:1)

I don't really know how to proceed ?!

So here are the steps I have done so far:

1. Followed installation instructions for opencv4nodejs on Windows

   1. Installed cmake
   2. npm install --global windows-build-tools --vs2015
   3. npm install --save opencv4nodejs

2. Added Electron Rebuild

   1. npm install --save-dev electron rebuild
   2. added "electron-rebuild": "electron-rebuild -w opencv4nodejs" to package.json
   3. npm run electron-rebuild

3. Added node loader

   1. npm i node-loader
   2. added
      if (process.platform === 'win32' && !process.env.OPENCV4NODEJS_DISABLE_AUTOBUILD) { process.env.path += ';' + require('./node_modules/opencv-build').opencvBinDir }
      to main.ts.

4. Added custom webpack

   1. npm i -D @angular-devkit/build-angular @angular-builders/custom-webpack
   2. edited angular.json:
      ... "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./extra-webpack.config.js" }, ... }, "serve": { "builder": "@angular-builders/dev-server:generic", ... }, ...
   3. added extra-webpack.config.js:
      module.exports = { module: { rules: [ { test: /\.node?$/, use: 'node-loader' } ] } };

5. require opencv4nodejs somewhere in the project

Thanks in advance!

[cyluxx]

With further investigation, it seems that electron is not detected.

Temporary solution:

use
let cv = require('../build/Release/opencv4nodejs.node')

instead of
//let cv = isElectronWebpack ? require('../build/Release/opencv4nodejs.node') : require('./cv')

in node_modules/opencv4nodejs/lib/opencv4nodejs.js

[vanbujm]

With further investigation, it seems that electron is not detected.

Temporary solution:

use
let cv = require('../build/Release/opencv4nodejs.node')

instead of
//let cv = isElectronWebpack ? require('../build/Release/opencv4nodejs.node') : require('./cv')

in node_modules/opencv4nodejs/lib/opencv4nodejs.js

This also fixed all my problems when trying to webpack bundle the app for an application that wasn't electron.

[yashprit]

Looks like on windows below code

const isElectronWebpack =
  // assume module required by webpack if no system path inv envs
  !process.env.path
  // detect if electron https://github.com/electron/electron/issues/2288
  && global.window && global.window.process && global.window.process.type
  && global.navigator && ((global.navigator.userAgent || '').toLowerCase().indexOf(' electron/') > -1)

let cv = isElectronWebpack ? require('../build/Release/opencv4nodejs.node') : require('./cv')

isElectronWebpack is false, my application is electron and webpack using electron react boilerplate

Same code on mac gives true.

further investigation on windows process.env.path has values while on mac its undefined

Do we have any right solution?

cc @justadudewhohacks and @cyluxx

[justadudewhohacks]

We definitely need a better way to detect, whether the module is bundled with webpack. Maybe one should simply set an enivronment variable, that we are checking for in the install script, similar to the solution proposed here.