Data Entry Automation via OCR

I'm looking to integrate Optical Character Recognition (OCR) into my web application. The primary goal is to automate data entry processes.

The current application contains manual data entry. I am attaching a screenshot of how it is entered manually and a picture of the paper from which it is typed. OCR should be done automatically. We can take pictures with a mobile phone in a few seconds so that everything is finished.

The application is in spring boot and angular. The database is mysql.

Functionality for Taking Photos
Using HTML5 and JavaScript, you can use an input element with the type file and the attribute accept="image/*" to allow users to take pictures of documents directly from the browser on a mobile device.
Uploading the Image to the Server
When a user takes a picture and clicks the save button, the image is sent to the backend server via an HTTP POST request. The backend server can use a framework Spring Boot (for Java) to process the uploaded images.
Image Processing and Data Extraction
On the server, you can use OCR (Optical Character Recognition) technology to recognize and extract data from images. Libraries like Tesseract OCR (available for Python, JavaScript, and other languages) can be useful for this task.
Data Storage
The extracted data can then be stored in a MYSQL database.
Data Synchronization with the Computer
The data can be immediately available on a computer via the web application or a specialized desktop application. Real-time synchronization can be achieved using technologies like WebSockets.
Security and Authentication
It is important to ensure the security of the application by using HTTPS protocol, user authentication (e.g., using JWT - JSON Web Tokens), and data encryption