Menu
I am getting this bug TypeError: cv.Mat is not a constructor
I tried doing almost everything can't find any solution on internet
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<img src="dd.jpg" style="display:none;" id ="img">
<canvas id = "videoInput" height="500" width="500"></canvas>
<canvas id = "canvasOutput" height="500" width="500"></canvas>
<script async type="text/javascript" src="index.js"></script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>
index.js
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
let video = document.getElementById('videoInput');
let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let gray = new cv.Mat();
let cap = new cv.VideoCapture(video);
let faces = new cv.RectVector();
let classifier = new cv.CascadeClassifier();
// load pre-trained classifiers
classifier.load('haarcascade_frontalface_default.xml');
const FPS = 30;
function processVideo() {
try {
if (!streaming) {
// clean and stop.
src.delete();
dst.delete();
gray.delete();
faces.delete();
classifier.delete();
return;
}
let begin = Date.now();
// start processing.
cap.read(src);
src.copyTo(dst);
cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);
// detect faces.
classifier.detectMultiScale(gray, faces, 1.1, 3, 0);
// draw faces.
for (let i = 0; i < faces.size(); ++i) {
let face = faces.get(i);
let point1 = new cv.Point(face.x, face.y);
let point2 = new cv.Point(face.x + face.width, face.y + face.height);
cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
}
cv.imshow('canvasOutput', dst);
// schedule the next one.
let delay = 1000/FPS - (Date.now() - begin);
setTimeout(processVideo, delay);
} catch (err) {
utils.printError(err);
}
};
// schedule the first one.
setTimeout(processVideo, 0);
}
I am also importing opencv.js as i have a downloaded version of it. Guess theres some initialization problem , please help me solve it ...
983
opencv.js loads and fires the onload event before it's really initialized. To wait until opencv.js is really ready, opencv.js provides a on hook "onRuntimeInitialized". Use it something like this:
function openCvReady() {
cv['onRuntimeInitialized']=()=>{
// do all your work here
};
}Make sure that the script is really loaded. If the error is "cv is not defined", then either remove the async in the script tag or add this (or just an onload attribute in the <script> tag)
script.addEventListener('load', () => {
In the WASM build (and only the WASM build), cv will not be immediately available because WASM is compiled in runtime. Assign the start function to cv.onRuntimeInitialized.
Note that the WASM version should be faster; however, it incurs some start overhead (a few CPU seconds). The non-WASM doesn't call onRuntimeInitialized at all.
To check both cases, it's possible to do this
if (cv.getBuildInformation)
{
console.log(cv.getBuildInformation());
onloadCallback();
}
else
{
// WASM
cv['onRuntimeInitialized']=()=>{
console.log(cv.getBuildInformation());
onloadCallback();
}
}
Source:
23
I had the exact same issue here. My solution was different to the one suggested. It has more flexibility since your operations will not be limited to a certain method called in the beginning of your code.
Step 1: and it's a very important one, since it actually affected my code: Make sure there are no unrelated errors on loading the page. It disrupted the loading of opencv.js
Step 2: make sure you load the script synchronously.
<script src="<%= BASE_URL %>static/opencv.js" id="opencvjs"></script>
That was it for me. It worked perfectly from that point.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
