OpenCV.js built file not working

1

Hey, I’ve been brawling this setup process forever and am hoping someone can help.
I built opencv.js from source using this command:

emcmake python3 opencv/platforms/js/build_js.py build_asm --disable_wasm --emscripten_dir="/mnt/c/users/magma/emsdk/upstream/emscripten" --cmake_option="-DCMAKE_TOOLCHAIN_FILE=/mnt/c/Users/magma/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake" --cmake_option="-DCMAKE_CROSSCOMPILING_EMULATOR=/mnt/c/Users/magma/emsdk/node/16.20.0_64bit/bin/node"

It builds flawlessly, and passes most of the tests (which I think is intended). However, the opencv.js I built doesn’t seem to work. When I load it and attempt to use an openCV function, I get this error:

Uncaught TypeError: cv.getBuildInformation is not a function
    at opencvcheck (example2.html:12:20)
    at HTMLScriptElement.onload (example2.html:16:33)

When I replace the opencv.js file I built with the downloadable base one, the same program works. So clearly something is up with the process which I used to build my opencv.js, but the command I ran should work and no errors are brought up when I build it.

For what it’s worth, this is the program I’m running (which doesn’t work with my opencv.js, but works with the downloadable default opencv.js):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> Please work </title>
	</head>
	<body>
		<h2 id="checker" style="color: green;">OpenCV is loading...</h2>
		<script type="text/javascript">
			function opencvcheck(){
				document.getElementById('checker').innerHTML="OpenCV is ready. (hallelujah)"
				console.log(cv.getBuildInformation());
						}
		</script>
		<script async src="./opencv.js" onload="opencvcheck()"
			      type="text/javascript"></script>

	</body>
</html>

Please throw any ideas my way if you have em… this process is driving me crazy and I’ve scoured everywhere for answers to no avail

2

SOLVED:

For some reason, the downloadable opencv.js functions differently than the one I built with the aforementioned command. You need to fulfill the cv promise and use that promise’s value as you would use the var cv. Here’s how I edited the above code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title> Please work </title>
</head>

<body>
	<h2 id="checker" style="color: green;">OpenCV is loading...</h2>
	<script type="text/javascript">
		function opencvcheck() {
			document.getElementById('checker').innerHTML = "OpenCV is ready. (hallelujah)"
			cv.then((aa) => { console.log(aa); console.log(aa.getBuildInformation()) })
		}
	</script>
	<script async src="./opencv.js" onload="opencvcheck()" type="text/javascript"></script>

</body>

</html>

This works with both the downloaded opencv.js and the one I built. Anyone know what arguments might’ve been used while building the downloadable opencv.js to get it to work like this? I’ll update if I figure it out.

3

Ahhh, I just saw this thread, thanks for this information.

Somehow I asked a similar question yesterday: Building WASM Opencv.js: 'cv' is a Promise, not an Object

It seems that:

  • public-facing opencv.js builds use ‘cv’ as Object, and the WASM version requires further initialization through cv[‘onRuntimeInitialized’], as described here: javascript - cv.Mat is not a constructor opencv - Stack Overflow

  • manual opencv.js builds (as you and me experienced) show that, now, ‘cv’ is a Promise. onRuntimeInitialized no longer applies - seems like it.

Anyone know what arguments might’ve been used while building the downloadable opencv.js to get it to work like this?

Did you get an explanation for the difference of behavior?