[Opencv.js] Compile from source using Emscripten doesn't include VideoCapture()

apraglez · June 30, 2021, 3:28pm

I am trying to build opencv.js from the source. To do this, I have followed this tutorial. When I clear the functions that I don’t need in opencv_js.config.py, set the cmake options in build_js.py and build with python ./platforms/js/build_js.py build_wasm --build_wasm --emscripten_dir /YOUR_PATH/emsdk/upstream/emscripten, I get a ~3.8Mb file. When I try to run my web app with these files, I get the following error:

Uncaught TypeError: cv.VideoCapture is not a constructor at HTMLVideoElement.<anonymous>

Has anyone built successfully from source including videoio package?

berak · June 30, 2021, 4:01pm

no, there is no VideoCapture class in opencv.js (and no videoio module)

(you’re supposed to use your browser’s builtin html5/js functionality for this,
have a look at examples)

how does that look like ? did you try to literally copypaste python code ?
how comes, there is a VideoCapture in your js code ?

apraglez · July 1, 2021, 8:08am

According to the examples, the cv.VideoCapture() is used like this:

let cap = new cv.VideoCapture(video);

And this is the way that I was using it. I took the opencv.js file from this repo which is 13Mb, and I wanted to recompile it from the source using the functions that I need only.

did you try to literally copypaste python code ?

No, everything is vanilla JS.

Thanks for your answer!!

berak · July 1, 2021, 10:15am

apologies for being wrong (did not scroll far enough, i guess)

so again, ther is no videoio module, the cv.VideoCapture is emulated in js here:

github.com

opencv/opencv/blob/94c67faaea9cfc7290a127cc020d6fbb2a68974c/modules/js/src/helpers.js#L118

    
      
              }
              var imgData = new ImageData(new Uint8ClampedArray(img.data), img.cols, img.rows);
              var ctx = canvas.getContext('2d');
              ctx.clearRect(0, 0, canvas.width, canvas.height);
              canvas.width = imgData.width;
              canvas.height = imgData.height;
              ctx.putImageData(imgData, 0, 0);
              img.delete();
          };
          
          
Module['VideoCapture'] = function(videoSource) {
              var video = null;
              if (typeof videoSource === 'string') {
                  video = document.getElementById(videoSource);
              } else {
                  video = videoSource;
              }
              if (!(video instanceof HTMLVideoElement)) {
                  throw new Error('Please input the valid video element or id.');
                  return;
              }

and sorry, no idea, why it did not make it into your wasm

Topic		Replies	Views
OpenCV.js built file not working opencvjs	2	869	June 17, 2024
Building OpenCV.js error, help please opencvjs , build	9	1145	October 18, 2023
Manual OpenCV.js build not working in Node opencvjs	3	1197	October 16, 2023
Are Build OpenCV.js docs outdated? Failed build from Source javascript , opencvjs , build	4	857	February 8, 2023
Building Opencv.js to include aruco and calib3d calib3d , opencvjs , aruco , build	2	19	January 30, 2025

[Opencv.js] Compile from source using Emscripten doesn't include VideoCapture()

Related topics