How do you make it node compatible?

[joeyjurjens]

Hi,

Maybe a bit of an odd question, but I'm building opencvjs from source, as I'm trying to reduce the bundle size by removing features I don't need.

However, I'm having trouble importing the output file inside other JS files.

First I was getting the module error, but that's fixed with your patch in dist folder; -Module={};return cv(Module);})); \ No newline at end of file +var Module={};return cv(Module);}));

But now I'm getting; SyntaxError: The requested module '/opencv/opencv.js?t=1720044667949' does not provide an export named 'default'

I was wondering if you could point me in the right direction of what I have to do to make it importable?

Thanks in advance!

[joeyjurjens]

Nvm, got a way to do it.

[ArthurTimofey]

Nvm, got a way to do it.

bro dont be that guy, share your solution

[joeyjurjens]

Nvm, got a way to do it.

bro dont be that guy, share your solution

Sorry my bad, this is how I "fixed" it, more of a work around, but it works.

How?

First make sure you have docker installed and that the deamon is running.

1. Clone the OpenCV repository (https://github.com/opencv/opencv)[https://github.com/opencv/opencv]
2. Run the following command to build OpenCV.js with the features you need:

docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk emcmake python3 ./platforms/js/build_js.py build_js --build_wasm --config=<path_to_the_config>

The --config flag should point to the opencv_js_build_config.py file.

The build will take some time, but once it's done you will have a build_js folder in the root of the OpenCV repository. Inside this folder you will find the opencv.js file.

The javascript file you need, is located at; build_js/bin/opencv.js

The file as is, can not be imported yet. You'll have to make a few changes to it:

1. Somewhere at the top of the file you'll see this line:

   // Browser globals
   root.cv = factory();

   replace it with:

   window.cv = factory();

2. At the bottom of the file, you'll see this:

   if (typeof Module === 'undefined')
   Module = {};
   return cv(Module);

   replace it with (note the var keyword):

   if (typeof Module === 'undefined')
   var Module = {}; //<--- add this line
   return cv(Module);

3. At last, add the following line to the bottom of the file:

   export default cv;

Now you can import the file in your project like so:

import cv from './opencv.js';

And use it like this:

// cv import is a promise, so you'll have to wait for it to resolve
cv.then((cv) => {
  const edges = new cv.Mat();
});

Right now, it's used like this in classes;

constructor(videoStream, debugCanvasElement = null) {
  cv.then((cv) => {
    this.cv = cv;
  });
}

And then used like this in methods;

const edges = new this.cv.Mat();