Question

I am using this library for face detecting on a live feed from the users camera, what I am trying to accomplish is place an item overlay on the users head. The example the demo comes with is silly glasses that follows the users face. Instead of the face I would like to track the users head, I know its possible as Google does this on Google Hangout where you can place various items while video chatting. Are there any tutorials this and can I continue using CCV’s library and expand on it for this feature?

Answer 1

Took me a bit to figure out but I figured out the problem.

In the script to calculate the position [Function “drawToCanvas”] I had to mess with the width and height calculations. My out put is as follows.

var video = App.video,
            ctx = App.context,
            backCtx = App.backContext,
            m = 5,
            w = 20,
            i ,
            comp;

        ctx.drawImage(video, 0, 0, App.canvas.width, App.canvas.height);

        backCtx.drawImage(video, 0, 0, App.backCanvas.width, App.backCanvas.height);

        comp = ccv.detect_objects(App.ccv = App.ccv || {
            canvas: App.backCanvas,
            cascade: cascade,
            interval: 4,
            min_neighbors: 1
        });

        if (comp.length) {
            App.comp = comp;
        }

        for (var i = 0; i < App.comp.length; i++){
            //ctx.drawImage(App.glasses, App.comp[i].x, App.comp[i].y+(App.comp[i].height*.7), App.comp[i].width, (App.comp[i].height/4));
            ctx.drawImage(App.glasses, (App.comp[i].x - w / .7) * m, (App.comp[i].y - w / .5) * m, (App.comp[i].width + w) * m, (App.comp[i].height + w) * m);

That is so it can place what ever image you are using on top of the users head.