Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Haar.Js video demo problems #9

aqiruse opened this Issue Jan 28, 2013 · 2 comments


None yet
2 participants

aqiruse commented Jan 28, 2013

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:


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

$.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"
<script type="text/javascript" src="./haar-detector.js"></script>
<script type="text/javascript" src="./cascades/haarcascade_frontalface_alt.js"></script>
<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 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>
    <H1>Video Canvas</H1>
    <canvas width="320" id="vidcanvas" height="240"></canvas> 
<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'/>

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);
        } else
            video.src = stream; // Opera
    }, onFailSoHard);
    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 () 
        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');
    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
    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');
    }).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



foo123 commented Jan 28, 2013

hello there, i see you have a line

jsobjtarget.src = target.src = image.src;
new HAAR.Detector(haarcascade_frontalface_alt).image(target)

However target is not defined anywhere, so it is undefined, dont you get any js errors for that?

You have a global var image=new Image();
but target is undefined.

HAAR.js can work directly with canvas element, not need to pass image element, or src
also i am not sure if src set as data url will work, at least with HAAR.js, i havent tested it myself.

aqiruse commented Jan 29, 2013

I changed new HAAR.Detector(haarcascade_frontalface_alt).image(target) to read new HAAR.Detector(haarcascade_frontalface_alt).image(vidcanvas) and now it works perfectly. Thanks for the help! Works great with a video stream that is converted to a a canvas and then the canvas is passed in.

@aqiruse aqiruse closed this Jan 29, 2013

@foo123 foo123 added the question label Mar 24, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment