How to I get current coordinates by viewport for a detected face for different devices

[harundogan01]

Hi,

My goal is to take a photo of the face detected in the mobile browser when it hovers over the red image that is fixed in the middle of the page. But I am encountering a problem here. Coordinate values change on different devices and I cannot detect the face exactly. I have to manually adjust the resolution but there are hundreds of phones with different resolutions. I want to solve this situation with a fixed coordinate. Regardless of the resolution, I want to check the hover status of the image in the middle of the page by comparing the coordinates of the two, and if the coordinates are equal, I want to take a photo of the face. However, the coordinates I have for the face do not give the current position on the page. What can I do?

Thanks

[LeonardoMachado30]

Hello Harundogan01, I believe you can do what I did, I set a resolution of 720p with the width size 360px and 400px height for the capture, the video is at 720p and the size of the video doesn't matter, what matters is when you go to capture the image and set it on the canvas, you should resize, this solves part of the problem of device adaptability, I couldn't test on all devices but currently all the ones I tested worked

[Dsalomon-16]

redimensiona en proporción y usa vh para las medidas metes el lienzo dentro de un div contenedor y el lienzo se ajusta a ese div, así limitas y usas medidas de acuerdo al dispositivo.