(Face: Camera) detected coordinates aren't correct.

[wonn223]

Thank you for giving me a chance to use tracking.js. It is awesome. this question would not be related with the issue tab, but i am trying to ask about how to get correct face position. I've spent too much time on this.

const tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);

i am using face/nose/mouth classifiers. I’ve checked rects appear on the canvas, but the positions are not correct.

which things do i have to consider?I did the below :

1. element size checking - the width/height of both video element and canvas should be same
2. vid size checking - when getUserMedia API getting executed, I set up { width:320, height: 240 }.

here is my code.

HTML

<div className="FaceTrackingArea">
  <video id="VChatSmallBox" autoPlay  playsInline></video>
  <canvas id="faceTrackingCanvas" style={ { width: 320, height : 240 }}></canvas>
</div>

CSS

` .FaceTrackingArea { width: 50vw; height: 35vh; / left: 10%; / top: 30%; position: absolute; z-index: 1001; margin: 0 auto; }

VChatSmallBox { width : 320, height: 240 } `

`

JS tracker.on('track', e => { context.clearRect(0, 0, canvas.width, canvas.height); e.data.forEach( rect => { console.log(rect.x, rect.y) context.strokeStyle = 'red'; context.strokeRect(rect.x , rect.y, rect.width, rect.height); }) });

Thank you.

[damodaran]

@wonn223 Is this issue resolved? Could you please let me know how? I am facing the same issue!

[dudizimber]

In case you changed the size of the video and canvas element, you should pass the new values to the track method.

HTML: `

<canvas id="canvas" width="640" height="480"></canvas>

`

JS: tracking.track('#video', tracker, { camera: true, width: 640, height: 480 });