I gave it a try on mobile phones. I used web browsers of iPhone and Android. It works fine on iPhone (4S). However, it doesn't work on Android. You can easily see this issue by trying this live example via an Android phone (e.g. Galaxy S4).

http://foo123.github.io/examples/face-detection/

A fix would be great because mobile support is critical.

I'm not sure if this is do to my Java inexperience, but whenever I try to run the haartojs.jar file, it does not run. My error seems to be with the manifest heading? Any help would be appreciated.

this is my haar file

<?xml version="1.0"?> <opencv_storage> <myhaar type_id="opencv-haar-classifier"> <size> 20 20</size> <stages> <_> <trees> <_> <_> <feature> <rects> <_> 7 16 6 4 -1.</_> <_> 7 18 6 2 2.</_></rects> <tilted>0</tilted></feature> <threshold>-0.0323070399463177</threshold> <left_val>0.8604652881622315</left_val> <right_val>-1.0000020265579224</right_val></_></_></trees> <stage_threshold>0.8604652881622315</stage_threshold> <parent>-1</parent> <next>-1</next></_> <_> <trees> <_> <_> <feature> <rects> <_> 0 2 4 11 -1.</_> <_> 2 2 2 11 2.</_></rects> <tilted>0</tilted></feature> <threshold>0.0154317598789930</threshold> <left_val>-1.</left_val> <right_val>0.6949151754379273</right_val></_></_></trees> <stage_threshold>0.6949151754379273</stage_threshold> <parent>0</parent> <next>-1</next></_> <_> <trees> <_> <_> <feature> <rects> <_> 1 0 15 16 -1.</_> <_> 1 4 15 8 2.</_></rects> <tilted>0</tilted></feature> <threshold>0.1195845976471901</threshold> <left_val>-0.8895025849342346</left_val> <right_val>0.7351595759391785</right_val></_></_> <_> <_> <feature> <rects> <_> 0 6 20 7 -1.</_> <_> 5 6 10 7 2.</_></rects> <tilted>0</tilted></feature> <threshold>0.1091756969690323</threshold> <left_val>-0.8640195131301880</left_val> <right_val>0.6678310036659241</right_val></_></_></trees> <stage_threshold>-0.2216715961694717</stage_threshold> <parent>1</parent> <next>-1</next></_> <_> <trees> <_> <_> <feature> <rects> <_> 0 4 20 2 -1.</_> <_> 5 4 10 2 2.</_></rects> <tilted>0</tilted></feature> <threshold>0.0437872111797333</threshold> <left_val>-0.6330271959304810</left_val> <right_val>0.7582414746284485</right_val></_></_> <_> <_> <feature> <rects> <_> 11 17 2 3 -1.</_> <_> 11 18 2 1 3.</_></rects> <tilted>0</tilted></feature> <threshold>3.7808620836585760e-003</threshold> <left_val>-0.7312806248664856</left_val> <right_val>0.7276245951652527</right_val></_></_></trees> <stage_threshold>0.0269609093666077</stage_threshold> <parent>2</parent> <next>-1</next></_> <_> <trees> <_> <_> <feature> <rects> <_> 6 0 8 2 -1.</_> <_> 6 1 8 1 2.</_></rects> <tilted>0</tilted></feature> <threshold>0.0229575894773006</threshold> <left_val>-0.5850620269775391</left_val> <right_val>0.8867923021316528</right_val></_></_> <_> <_> <feature> <rects> <_> 15 6 4 14 -1.</_> <_> 15 13 4 7 2.</_></rects> <tilted>0</tilted></feature> <threshold>-0.0248031206429005</threshold> <left_val>0.3715035021305084</left_val> <right_val>-0.7250819802284241</right_val></_></_></trees> <stage_threshold>-0.2135584950447083</stage_threshold> <parent>3</parent> <next>-1</next></_> <_> <trees> <_> <_> <feature> <rects> <_> 8 0 3 2 -1.</_> <_> 8 0 3 1 2.</_></rects> <tilted>1</tilted></feature> <threshold>-3.0379199888557196e-003</threshold> <left_val>0.5267180204391480</left_val> <right_val>-1.0000020265579224</right_val></_></_></trees> <stage_threshold>0.5267180204391480</stage_threshold> <parent>4</parent> <next>-1</next></_> <_> <trees> <_> <_> <feature> <rects> <_> 5 15 3 4 -1.</_> <_> 5 16 3 2 2.</_></rects> <tilted>0</tilted></feature> <threshold>1.7002030508592725e-003</threshold> <left_val>0.5254240036010742</left_val> <right_val>-0.7560986876487732</right_val></_></_> <_> <_> <feature> <rects> <_> 0 10 20 4 -1.</_> <_> 5 10 10 4 2.</_></rects> <tilted>0</tilted></feature> <threshold>0.1169022992253304</threshold> <left_val>-0.6004660129547119</left_val> <right_val>0.6980428099632263</right_val></_></_></trees> <stage_threshold>-0.0750420093536377</stage_threshold> <parent>5</parent> <next>-1</next></_> <_> <trees> <_> <_> <feature> <rects> <_> 2 7 11 2 -1.</_> <_> 2 7 11 1 2.</_></rects> <tilted>1</tilted></feature> <threshold>0.0232701301574707</threshold> <left_val>-1.</left_val> <right_val>0.3333333134651184</right_val></_></_></trees> <stage_threshold>0.3333333134651184</stage_threshold> <parent>6</parent> <next>-1</next></_> <_> <trees> <_> <_> <feature> <rects> <_> 7 6 9 3 -1.</_> <_> 6 7 9 1 3.</_></rects> <tilted>1</tilted></feature> <threshold>2.3264440242201090e-003</threshold> <left_val>0.3698633015155792</left_val> <right_val>-1.0000009536743164</right_val></_></_></trees> <stage_threshold>0.3698633015155792</stage_threshold> <parent>7</parent> <next>-1</next></_> <_> <trees> <_> <_> <feature> <rects> <_> 7 6 8 3 -1.</_> <_> 6 7 8 1 3.</_></rects> <tilted>1</tilted></feature> <threshold>-3.1593269668519497e-003</threshold> <left_val>-1.</left_val> <right_val>0.4285714924335480</right_val></_></_></trees> <stage_threshold>0.4285714924335480</stage_threshold> <parent>8</parent> <next>-1</next></_></stages></myhaar> </opencv_storage>

Ever say this error, i convert it with your batch files but anything, thanks.

Actually, I had used Haar cascade frontal face detector in python, but I want to use it in my node project, searching for the javascript implementation I came around this project. So I wanted to know if this can work for real time face detection in js?
The functionality that I'm working on is, when capturing the video from the webcam, if the face is non-frontal ,the face will be not detected and then alert the user to look back at the screen.
Please comment on its feasibility implementing in javascript.

hi, how i can convert my selection area to an image and how i can train my own haarcascade, i ever get an error, my error is "rects is undefined" thanks

i want to detect neck is it possible

Any working example/sample of face detection on video .

Hi,
have you done any experiment with video at all?!

Thanks

Failed to load Main-Class manifest attribute from
haartojs.jar

got this error while trying to convert. Any suggestions?

Thank you for sharing this project. Oh, and I couldn't find a licence file, under which one did you release your work?

Cheers

When i test the mouth detection with new its unable to detect .it just detect with default images.is there any condition to apply when detecting

When running any of the Live Examples with Parallel enabled, a runtime error, "ye is undefined", occurs. The issue happens in Chrome Version 118.0.5993.117 (Official Build) (64-bit) as well as other browsers.

• Interactive Face Detection with Parallel Enabled
• Many Faces Detection with Parallel Enabled
• Interactive Mouth Detection with Parallel Enabled

Hello, I downloaded this repository, and the examples are working with model1.jpg. But the mouth example does not work with the image in repository: haar-mouth-detection.png or the face example with Faces2.jpg

I was trying with some of my images and the mouth example did not work with them. Hence I tried with the haar-mouth-detection.png, and it did not work with the same either.

Can you pls point out what could be the problem.

Secondly and most important, I want to use the mouth example to be able to detect a smiling face? I checked one of the usage examples, but the online demo does not work accurately. Any other usage examples which can capture smile detection?

I have downloaded your example for face detection and it works fine. However, when I change the example to run the face detection on live video in an interval loop, or even using a static image with multiple faces inside an interval loop, nothing is being detected. I am trying to compare two different pieces of code, Haar.js and JsObjDetect on facial recognition for real time video, however neither is detecting any objects at all. Therefore I am aware I must be doing something, but I am not sure what. Attached is my code, and any helpful insight would be appreciated:

'''''javascript

<script src="../js_objectdetect_src/js/objectdetect.js"></script>
<script src="../js_objectdetect_src/js/objectdetect.frontalface.js"></script>
<script src="../js_objectdetect_src/js/objectdetect.eye.js"></script>

<script src="../js_objectdetect_src/js/jquery.js"></script>
<script src="../js_objectdetect_src/js/jquery.objectdetect.js"></script>

<script>
$.fn.highlight = function(rect, color) {
    $("<div />", {
        "css": {
            "border":   "2px solid " + color,
            "position": "absolute",
            "left":     ($(this).offset().left + rect[0]) + "px",
            "top":      ($(this).offset().top  + rect[1]) + "px",
            "width":    rect[2] + "px",
            "height":   rect[3] + "px"
        }
    }).appendTo("body");
}
</script>
<script type="text/javascript" src="./haar-detector.js"></script>
<script type="text/javascript" src="./cascades/haarcascade_frontalface_alt.js"></script>
</head>
<body>
<div>Face Detection with OpenCV haar cascades in Javascript</div>
<div id="container" style="position:relative;">
    <H1>Image Canvas</H1>
    <canvas id='imagecnvs' width'320' height='240'></canvas>
</div>
<div style="font-size:18px"><a href="http://nikos-web-development.netai.net/">Nikos M.</a></div>
<H1>Live Video</H1>
<video id="live" width="320" height="240" autoplay style="display: inline;"></video>
<div>
    <H1>Video Canvas</H1>
    <canvas width="320" id="vidcanvas" height="240"></canvas> 
</div>
<H1>Target Image</H1>
<img id="target" style="display: inline;" width='320' height='240'/>

<H1>JSOBJ Target Image</H1>
<img id="jsobjtarget" style="display: inline;" width='320' height='240'/>

<script>
function pixel_location(x,y,width,size)
{
    return (x+(y*width))*size;
}

function setPixel(imageData, x, y, r, g, b, a) {
    var index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video = document.querySelector('live');

if (navigator.getUserMedia) 
{
    navigator.getUserMedia({audio: true, video: true}, function(stream) 
    {
        if (navigator.webkitGetUserMedia) 
        {
            video.src = window.webkitURL.createObjectURL(stream);
            alert("1");
        } else
        {
            video.src = stream; // Opera
            alert("2");
        }
    }, onFailSoHard);
}
else
{
    alert("3");
    video.src = 'somevideo.webm'; // fallback.
}

var onFailSoHard = function(e) {
    console.log('Unable to get video stream!!', e);
};

var imgcanvas=document.getElementById('imagecnvs');
var video = document.getElementById('live');
var videocanvas=document.getElementById('vidcanvas');
var detector;
var image=new Image();
var j = 0;
var i = 0;

timer = setInterval(
    function () 
    {
        imgcanvas.width=320;
        imgcanvas.height=240;
        videocanvas.getContext('2d').drawImage(live, 0, 0, 320, 240);
        var img = videocanvas.getContext('2d').getImageData(0, 0, 320, 240).data;
        var ctx2  = imgcanvas.getContext('2d');
        var theImage = ctx2.getImageData(0, 0, imgcanvas.width, imgcanvas.height);
        var img1 = ctx2.createImageData(theImage);
        //var mvc = videocanvas.getContext('2d');
        //mvc.drawImage(live,0,0,320,240);
    for (j = 0; j < 240; j++) {
        for (i = 0; i < 320; i++) {
            x = i;
            y = j;
            r = img[pixel_location(x,y,imgcanvas.width,4)];
            g = img[pixel_location(x,y,imgcanvas.width,4)+1];
            b = img[pixel_location(x,y,imgcanvas.width,4)+2];
            //alert("r="+r + "g="+g+"b="+b);
            setPixel(img1, x, y, r, g, b, 255); // 255 opaque
        }
    }
    ctx2.putImageData(img1,0,0);
    image.src = videocanvas.toDataURL('image/jpg');
    image.width = 320;
    image.height = 240;
    jsobjtarget.src = target.src = image.src;
    new HAAR.Detector(haarcascade_frontalface_alt).image(target).complete(function(){
        if (this.objects.length > 0)
            alert(this.objects.length+" Objects found");
        for(i=0; i< this.objects.length; i++){
            var rect=this.objects[i];
            var ctx=ctx2//.getContext('2d');
            ctx.strokeStyle="rgba(0,0,0,1)";
            ctx.strokeRect(rect.x,rect.y,rect.width,rect.height);
        }
    }).detect(1, 1.25, 0.1, 1, true);
    $("#jsobjtarget").objectdetect("all", {classifier: objectdetect.frontalface}, function(faces) {
        for (var i = 0; i < faces.length; ++i) {
            $(this).highlight(faces[i], "red");

        }
    });
}, 250
);
</script>

'''''

Hi,
Thank you for your providing of the HAAR scripting, and I made the XML to JS translation script by Ruby. Can I add your commit?

Thanks,
Yumi

I generate 'haarcascade_smile.js' file by using your haar-to-js tool and using OpenCv's 'haarcascade_smile.xml', But this not working correctly.

here is screen-shot of modified example:-

Here is my generated JS file:-
http://pastebin.com/UFV1VJuP

And here is my modified html file:-
http://pastebin.com/iVJdrW8W

And here is my OpenCv's XML file:-
http://pastebin.com/5DceFVab

I try to convert haarcascade xml file to haarcascade js file on Mac terminal and get the error:

rqmac:cascades rqmac$ php haartojs.php haarcascade_lefteye_2splits.xml
Notice: Undefined offset: 2 in /Users/rqmac/Desktop/cascades/haartojs.php on line 240
(function(root) { var ={size1:160,size2:20,stages:[{thres:-7.6678442955017090e-01,trees:[{feats:[
Notice: Uninitialized string offset: 0 in /Users/rqmac/Desktop/cascades/haartojs.php on line 169
{
Notice: Uninitialized string offset: 0 in /Users/rqmac/Desktop/cascades/haartojs.php on line 176
Notice: Uninitialized string offset: 0 in /Users/rqmac/Desktop/cascades/haartojs.php on line 191
Notice: Uninitialized string offset: 0 in /Users/rqmac/Desktop/cascades/haartojs.php on line 202
thres:,has_l:false,l_val:0,l_node:,has_r:false,r_val:0,r_node:,rects:[
Notice: Uninitialized string offset: 0 in /Users/rqmac/Desktop/cascades/haartojs.php on line 210
Fatal error: Cannot use string offset as an array in /Users/rqmac/Desktop/cascades/haartojs.php on line 210
....
....


When I checked the xml file, i found the different format with your example cascade include file in Haar.js. I try to convert this xml file (from opencv-node):
https://github.com/peterbraden/node-opencv/blob/master/data/haarcascade_lefteye_2splits.xml

I hope you can solve this issue, thank you.

Hi,

I am currently trying to user HAAR.js inside a node.js project.
Since the code is not common AMD, I'm loading the code with requirejs.

With requirejs 2.0 (http://requirejs.org/docs/api.html#config-shim), I could load the files if the variables were true global.

In the browser, the way the files are loaded, the variable are already global =>
Do you think it's possible inside haar-detector.js to remove the var of

var HAAR=HAAR||{};

and the

System.out.print("var " 

inside the Test class of the jar ?

By the way, I'm not doing a PullRequest because the java files are not the repo.

Hi,

nice implementation. It works really well in the latest Chrome browser.

But I don't understand these parameters yet:

baseScale, scale_inc, increment, min_neighbors, doCannyPruning

Could you explain them a bit more?
Thx

Hi. I'm a little bit confused ... i tried your demo and for me it's not workin at all.
The mouse.htm, but even all the detection i can try after creating js files (following your guideline).

I don't mean to be aggressive, but is this supposed to be like this ?