Ask Your Question

OpenCV.js and webassembly - access/use variables in both js and opencv.js

asked 2019-06-25 04:35:28 -0600

updated 2019-06-25 05:14:03 -0600


I'm currently trying to make an feature-matching application in the browser using OpenCV.js and webassembly.

In my code, I define an video input, which captures the webcam of the host and takes frames into my matching function, just to put it back out on an image element on the website.

However I got an problem about the usage of webassembly in javascript: I would need to define global variables for the canvas and image element to access them in my js-functions. But they do not seem to be accessible in the "cv['onRuntimeInitialized']"-function.

<script src="./opencv.js" type="text/javascript"></script>
<script type="text/javascript">

// reference matrix to detect in frame
let referenceMat = undefined;
let startAndStop = document.getElementById('startAndStop');
startAndStop.disabled = "true";
let video = document.getElementById('videoInput');
let canvas = document.getElementById('canvasOutput');
let imageOutput = document.getElementById('image');
let FPS = 10;
let streaming = false;

    // loading reference matrix
    let referenceMat = cv.imread('refImage');

    // video vars
    let frame = new cv.Mat(video.height, video.width, cv.CV_8UC4);
    let dst = new cv.Mat(video.height, video.width, cv.CV_8UC1);
    let cap = new cv.VideoCapture(video);

    // enable the start button
    console.log('OpenCV.js and Webassembly is ready!');

// other functions ...

I'm also unable to use any OpenCv-methods outside of this function. This way I'm unable to load my reference image as matrix using "cv.imread" and im also unable to access the global video element inside the "cv['onRuntimeInitialized']"-function.

So I wanted to ask if there is an way to either make the cv-functions globally usable (especially in other js-functions) or if there is any documentation how to properly use webassembly in the case that the .wasm-files are included in the javascript-"glue code".

I'm sorry if this was mentioned somewhere but since I started this project I'm occasionally finding hints how the usage of OpenCV.js changed and it is giving me a hard time to figure out how to make it work.

I think I provided the necessary parts of the code, but please ask for anything I've might have missed. Thanks for reading so far and thanks in advance for any tips.

EDIT: fixed an an error "pllease enter a valid canvas or image id" by replacing a local path in "cv.imread" with the id of the element.

edit retag flag offensive close merge delete

1 answer

Sort by ยป oldest newest most voted

answered 2020-05-15 16:47:18 -0600

kpachinger gravatar image

The Utils.js has a utility function for this behavior. It works until a function wrapper or iframe blocks it.

let utils = new Utils('errorMessage');
utils.loadOpenCv(() => {
//code kickoff

I had scope issues with modules in a CodePen ecosystem. I organize my code but ES5 and order of execution seem to require some globals in the HEAD. Also asynchronous functions are more manageable with global.

The official tutorials have good examples of file access and function usage. You might also regex batch rename cv.imread cv2::numpy.imread I saw that on a blog.

edit flag offensive delete link more

Question Tools

1 follower


Asked: 2019-06-25 04:35:28 -0600

Seen: 1,059 times

Last updated: May 15 '20