Revision history [back]

Hello,

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;

cv['onRuntimeInitialized']=()=>{
    // loading reference matrix
    let referenceMat = cv.imread('./images/marker23.jpg');

    // 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
    startAndStop.removeAttribute('disabled');
    console.log('OpenCV.js and Webassembly is ready!');
};

// other functions ...
</script>

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.

Hello,

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;

cv['onRuntimeInitialized']=()=>{
    // loading reference matrix
    let referenceMat = cv.imread('./images/marker23.jpg');
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
    startAndStop.removeAttribute('disabled');
    console.log('OpenCV.js and Webassembly is ready!');
};

// other functions ...
</script>

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.