3

I'm trying to use facial recognition via OpenCV.js, however when I call on the detectMultiScale() method of the CascadeClassifier object I receive the error:

Uncaught 6446128 - Exception catching is disabled, this exception cannot be caught. Compile with -s DISABLE_EXCEPTION_CATCHING=0 or DISABLE_EXCEPTION_CATCHING=2 to catch.

The problem is I'm leveraging a hosted version of opencv.js directly from opencv.org - it's not a build version because I'm unable to build it myself, and therefore cannot follow the error's instructions.

I've followed an example from their GitHub here and adapted the code to suit my needs, as follows:

<html>
  <head>
    <script src="https://docs.opencv.org/master/opencv.js"></script>
    <script src="https://docs.opencv.org/master/utils.js"></script>
  </head>

  <body>
    <img id="test" src="image/with/face.jpg" alt=""/>

    <canvas id="output"></canvas>

    <script>
        let face_cascade = new cv.CascadeClassifier();
      face_cascade.load("https://raw.githubusercontent.com/opencv/opencv/master/data/haarcascades_cuda/haarcascade_frontalface_default.xml");

        function face_detector() {
                let imgEl = document.getElementById("test");
                let img = cv.imread(imgEl);

                cv.imshow("output", img);
                let src = cv.imread("output");

                let gray = new cv.Mat();
                let msize = new cv.Size(0,0);
                cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);

                let faces = new cv.RectVector();
                face_cascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize); //Error occurs here
            }

        face_detector();
    </script>
  </body>
</html>

Anyone with experience with OpenCV.js and facial recognition that could help?

RoyalSwish
  • 1,503
  • 10
  • 31
  • 57

2 Answers2

1

Following this thread:

The xml files are "pre-built" before loading them with the load function. To achieve this it's used the function createFileFromUrl from utils.js. After that we can finally load our classifier from file.

let classifier = new cv.CascadeClassifier();  // initialize classifier

let utils = new Utils('errorMessage'); //use utils class

let faceCascadeFile = 'haarcascade_frontalface_default.xml'; // path to xml

// use createFileFromUrl to "pre-build" the xml
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
    classifier.load(faceCascadeFile); // in the callback, load the cascade from file 
});

Face Detection Other Example

TRY IT :

let src = cv.imread('canvasInput');
let gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
let faces = new cv.RectVector();
let eyes = new cv.RectVector();
let faceCascade = new cv.CascadeClassifier();
// load pre-trained classifiers
faceCascade.load('haarcascade_frontalface_default.xml');
// detect faces
let msize = new cv.Size(0, 0);

// try to change scaleFactor  and minNeighbors values
faceCascade.detectMultiScale(gray, faces,1.05,0);
for (let i = 0; i < faces.size(); ++i) {
    let roiGray = gray.roi(faces.get(i));
    let roiSrc = src.roi(faces.get(i));
    let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);
    let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,
                              faces.get(i).y + faces.get(i).height);
    cv.rectangle(src, point1, point2, [255, 0, 0, 255]);
    roiGray.delete(); roiSrc.delete();
}
cv.imshow('canvasOutput', src);
src.delete(); gray.delete(); faceCascade.delete();
faces.delete(); eyes.delete();

Try to change faceCascade.detectMultiScale parameters like given examples below:

faceCascade.detectMultiScale(gray, faces,1.05,0);
faceCascade.detectMultiScale(gray, faces,1.05,1);

faceCascade.detectMultiScale(gray, faces,2,0);
faceCascade.detectMultiScale(gray, faces,2,1);

faceCascade.detectMultiScale(gray, faces,3,0);
faceCascade.detectMultiScale(gray, faces,3,1);

faceCascade.detectMultiScale(gray, faces,4,0);
faceCascade.detectMultiScale(gray, faces,4,1);
Community
  • 1
  • 1
1

The solution is 

let faceCascadeFile = 'haarcascade_frontalface_default.xml'; 
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
    console.log('cascade ready to load.');
    let src = cv.imread('imageInit');
    let gray = new cv.Mat();
    cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
    let faces = new cv.RectVector();
    let faceCascade = new cv.CascadeClassifier();
        faceCascade.load(faceCascadeFile); 
        let msize = new cv.Size(0, 0);
        faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize); 
    }); 
}

For full code and explanation use this link Face Detection with Javascript and OpenCV

or

Human Eye Detection using Javascript and OpenCV

OnlyJS
  • 297
  • 3
  • 4