Ask Your Question

Revision history [back]

Problem loading haar cascade file in opencv.js

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>

Problem loading haar cascade file in opencv.js

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>

click to hide/show revision 3
None

updated 2018-07-20 06:18:43 -0600

berak gravatar image

Problem loading haar cascade file in opencv.js

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

**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

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.

<!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>
    <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 src="utils.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>



<!--<script src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>-->
</body>
</html>

Problem loading haar cascade file in opencv.js

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 

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**

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'. 'false'.

Below is the sample code I am trying.

<!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>
    <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 src="utils.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>



<!--<script src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>-->
</body>
</html>