Ask Your Question
0

OpenCV.js unable to load haar cascades [closed]

asked 2018-09-07 02:34:32 -0600

m93c gravatar image

Hi everyone,
I was tring to implement the face detection example with opencv.js.
The problem is that there's no way of importing the necessary haar cascade.
My project structure is as follows:

  • index.html
  • js
    • myjs.js
    • opencv.js
    • utils.js
  • haar
    • haarcascade_frontalface_default.xml


In "myjs.js" I try to load the cascade as shown in the example using my path to the cascade:

let classifier = new cv.CascadeClassifier();
classifier.load('../haar/haarcascade_frontalface_default.xml');

The function returns always false indicating the loading failure, independently if using the relative or the absolute path. Because of this I can't use the "detectMultiScale" function...

Can anyone help me please?

edit retag flag offensive reopen merge delete

Closed for the following reason the question is answered, right answer was accepted by m93c
close date 2018-09-07 07:13:16.304071

Comments

Hmm i think this is related on how the resource is resolved via javascript. Can you add a breakpoint in the js file and look where things go wrong?

How is the resource loaded - via ajax(if so - the webserver muss allow access to that file) ? I hope the js is not minified - otherwise you would need to get the "sources".

holger gravatar imageholger ( 2018-09-07 02:44:27 -0600 )edit
2

the cascades are loaded via ajax, and some webbrowsers don't allow to do ajax "from disk".

try to start a local webserver, and download your index.html from there.

berak gravatar imageberak ( 2018-09-07 02:47:23 -0600 )edit
1

also, iirc, the location is relative to the index, so haar/haarcascade_frontalface_default.xml

berak gravatar imageberak ( 2018-09-07 03:00:35 -0600 )edit

2 answers

Sort by » oldest newest most voted
2

answered 2018-09-07 05:31:46 -0600

m93c gravatar image

updated 2018-09-07 07:08:57 -0600

Thanks holger and berak for helping me to solve this problem.
After a deep examination of the code in the example I've found that 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.
The final code is as follows (to simplify I've moved the xml file to the index.html level)

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 
});

Make sure to run it in a webserver because it has to do XMLHTTPRequests.

I think an improvement of the documentation (and examples) for the JS version it's needed.

edit flag offensive delete link more
0

answered 2018-09-07 02:51:20 -0600

holger gravatar image

Got it - see this example https://docs.opencv.org/3.4.0/d2/d99/... If you enable network analysis in your browser you will see a XHR request https://docs.opencv.org/3.4.0/haarcas...

So as written in the comment above: Make sure you webserver allows access to the cascade file. Just try to query that file via you webbrower - if it is returned - your program can load that file.

This should solve your problem - if so - say thx and close the thread as solved :-)

edit flag offensive delete link more

Comments

Ok I launched the index with a webserver, I can query the cascade file but I stiil can't import it. It does not even do the XHR request... Am I forgetting something of incredibly stupid? Do I need some specific haar cascade or do I miss something?

m93c gravatar imagem93c ( 2018-09-07 03:31:11 -0600 )edit
1

Open the debug tools for your webbrowser and look for (failing) xhr request loading the cascade file. Also compare your code with https://docs.opencv.org/3.4.0/d2/d99/.... Make sure the path you are loading is relative to index.html as berak has pointed out. Alternatively - try a path relative to the js file too, web stuff is not my biggest strength.

By any chance - are you doing cross domain requests? That means index.html and/or js and/or cascade files are on different domains. Your browser could block such requests (https://en.wikipedia.org/wiki/Same-or...) That's the only other reason i can think off.

holger gravatar imageholger ( 2018-09-07 04:12:36 -0600 )edit

I think berak is open cv batman.

“I am vengeance! I am the night! I am Batman!” "I am variance, I am byte, I am Matman"

holger gravatar imageholger ( 2018-09-07 12:10:49 -0600 )edit

Question Tools

1 follower

Stats

Asked: 2018-09-07 02:34:32 -0600

Seen: 4,817 times

Last updated: Sep 07 '18