I am able to run the basic opencv.js code. But when I am trying with Face detection opencv.js code, getting the following error.
6410592 - Exception catching is disabled, this exception cannot be caught. Compile with -s DISABLE_EXCEPTION_CATCHING=0 or DISABLE_EXCEPTION_CATCHING=2 to catch. Catch Errors
I think the issue is Haar Cascade xml file is not loading using the below script classifier.load('haarcascade_frontalface_default.xml'); It is returning 'false'.
Below is the sample code I am trying.
<html> <head> <meta charset="utf-8"> <title>Hello OpenCV.js</title> </head> <body>
Hello OpenCV.js
OpenCV.js is loading...
<div>
<div class="inputoutput">
<video id="videoInput" autoplay="true" play width="300" height="225"></video>
</div>
<div class="inputoutput">
<canvas id="canvasOutput" autoplay="true" width="300" height="225"></canvas>
<div class="caption">canvasOutput</div>
</div>
</div>
<script>console.log("Heyyy")</script>
<script src="opencv.js" type="text/javascript"></script>
<script type="text/javascript">
console.log("start");
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(function(stream) {
console.log(stream);
video.srcObject = stream;
video.play();
console.log("inside video stream");
})
.catch(function(err) {
console.log("An error occurred! " + err);
});
let streaming = true
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();
console.log("classifier is", classifier);
// load pre-trained classifiers
classifier.load('haarcascade_frontalface_default.xml');
/*let loadfile = classifier.load('haarcascade_frontalface_default.xml');
console.log("loaded file is", loadfile);
*/
if(classifier.load('haarcascade_frontalface_default.xml'))
{
}
else{
console.log("xml not loaded", 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();
streaming = false;
return;
}
let begin = Date.now();
// start processing.
console.log("Step0");
cap.read(src);
src.copyTo(dst);
console.log("Step1");
cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);
console.log("Step2");
// detect faces.
classifier.detectMultiScale(gray, faces, 1.1, 3);
console.log("Step3");
// 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);
console.log(err, "Catch Errors");
}
};
// schedule the first one.
setTimeout(processVideo, 0);
</script>
</body> </html>