Add Camera overlay in web app

Hello,

I am developing a mobile web application. In my app I need to take pictures of ID cards. This picture is sent to an OCR engine for text extraction.
The OCR engine needs images with good quality to have a high extraction of the text.

I want the users to take picture of only the card frame with minimum background noise. For that, I need to implement a layout over the phone camera, so the user can take the picture of only the card frame.

Once the picture is taken, it must not be resized or altered in its quality. Layout must not block any camera function like autofocus or zoom in.

This layout must be written in javascript and be easily integrated into my project.

I attached an image for reference of the expected layout. It is just for reference, you can implement another layout as long as it is functional.

Thanks.