search

justadudewhohacks / face-api.js

JavaScript API for face detection and face recognition in the browser and nodejs with tensorflow.js
MIT License
16.68k stars 3.71k forks source link

Issue in Face Tilt webcam #190

Open AkshayAdiga1997 opened 5 years ago

AkshayAdiga1997 commented 5 years ago

I tried working on the issues under https://github.com/justadudewhohacks/face-api.js/issues/152. It still doesn't work. The degree value generated is not even close. I have tried editing the drawBox() in face-api.js as such:

function drawBox(ctx, x, y, w, h, options) { const imgEl = $('#video').get(0) var drawOptions = Object.assign(getDefaultDrawOptions(), (options || {})); ctx.strokeStyle = drawOptions.boxColor; ctx.lineWidth = drawOptions.lineWidth; const landmarks =detectLandmarks(imgEl) landmarks.then(function(result) { var landmarks=result; var dY = landmarks['positions'][45]['y'] - landmarks['positions'][36]['y'] var dX = landmarks['positions'][45]['x'] - landmarks['positions'][36]['x'] var degree = Math.atan(dY/dX) ctx.translate(x+w/2,y+h/2) ctx.rotate(degree) ctx.translate((-w/2)-x,(-h/2)-y) ctx.strokeRect(x, y, w, h); }); }

Bajajar commented 5 years ago

1/ ctx.rotate(degree) should be ctx.rotate(-degree)

2/ You might create a new canvas, then translate the central point of the rotated image to the central point of the new canvas. After all, you run the face detection again in order to get aligned face.

AkshayAdiga1997 commented 5 years ago

1/ ctx.rotate(degree) should be ctx.rotate(-degree)

2/ You might create a new canvas, then translate the central point of the rotated image to the central point of the new canvas. After all, you run the face detection again in order to get aligned face.

I did make the changes. What I am trying to tell is that, the degree value generated (in radians or when converted into degrees ) is not correct. How do I make that right?