Camera video input ratio issue on canvas render at mobile screen?

Hi, is there any known issue on mobile for drawing render video on canvas regarding camera ratio or input?

I noticed that on both Android and iOS that when camera input was coming from phone it seems like it was breaking the render draw box in side canvas ending up leaking out side.

Any input would be appreciated. Thank you.

Hey @kevinlabx

Thanks for your feedback.

This is usually due to coordinate calculation issues, where the coordinates on the canvas do not match the coordinates of the overlay DOM elements.

Can you try our sample app or use individual HTML elements to render the video?

Thanks
Vic

It seems like input width and height was correct but somehow render process is miscalculating on the smaller screen.

image

I end up using canvas because it was putting video in more efficient way in the maximized screen instead of HTML element and on the sample app it wasn’t properly using the screen space compare to canvas.

Is there known issue on Canvas? because input seems correct but it seems like it’s miscalculating on smaller screen and working fine on large screen.

@vic.yang

Hey @kevinlabx

In theory, there shouldn’t be any issues.

Could you please double-check that the canvas width and height are consistent with the video coordinates you’re calculating? Also, please ensure you are using canvas.width instead of canvas.style.width.

Thanks
Vic

1 Like

@vic.yang Thank you. I think I found some clue on my internal code on calculation.
I appreciate the help. I will keep you posted if I found otherwise.

Have a awesome day. :laughing: