React
Follow these steps to get started with ReactJS.
-
Set up the workspace by running the following command:
npx create-react-app ocrtest
A folder/directory named
ocrtest
should appear and the folder/ directory structure should look like this:ocrtest/ | +-- node_modules/ | +-- public/ | | | +-- favicon.ico | | | +-- index.html | | | +-- logo192.png | | | +-- logo512.png | | | +-- manifest.json | | | \-- robots.txt | +-- src/ | | | +-- App.css | | | +-- App.js | | | +-- App.test.js | | | +-- index.css | | | +-- index.js | | | +-- logo.svg | | | +-- reportWebVitals.js | | | \-- setupTests.js | +-- .gitignore | +-- package-lock.json | +-- package.json | \-- README
-
Put the
ocr
folder/directory that contains the ocr engine and builders likebuilder.js
, into thepublic
folder/directory. -
Add the ocr package to
package.json
by running this command in theocrtest
react.js project.npm i file:public/ocr
This will add
@verihubs/ocr
dependency inpackage.json
. -
Add an import to
index.js
file insidesrc
folder.import Builder from '@verihubs/ocr';
-
Add the following code to the
index.js
file insidesrc
folder.window.OCRSDK = new Builder() .setAttemptCount(3) .setProxyMiddleware({ Extract: { url: 'http://localhost:8888/ocr/extract-async', headers: { 'App-ID': '<replace-me-with-app-id>', 'API-Key': '<replace-me-with-api-key>', }, }, ExtractResult: { url: 'http://localhost:8888/ocr/extract-async/result', headers: { 'App-ID': '<replace-me-with-app-id>', 'API-Key': '<replace-me-with-api-key>', }, }, License: { url: 'http://localhost:8888/license/{license_id}/check', headers: { 'App-ID': '<replace-me-with-app-id>', 'API-Key': '<replace-me-with-api-key>', }, }, }) .setURL('./ocr') .build();
Replace proxy middleware URLs with a URL that points to the correct endoints, and replace
<replace-me-with-app-id>
and<replace-me-with-api-key>
with the appropriateAPP-ID
andAPIKey
for the ocr (remove the headers if the api doesn't need credentials or the url is pointing towards an intermediate endpoint).Look Out!
To not accidentally leak of AppID and APIKey for ocr, always pass them to an intermediate endpoint (like a proxy middleware) and append the AppID and APIKey header before reaching Verihubs' ocr service in production. Additional data can also be passed to this intermediate endpoint for end user identification.
For more information about creating a Proxy Middleware, refer to Proxy Middleware.
For API documentation of the Builder, refer to
Builder
. -
Add import for
React
inApp.js
.import React from 'react';
-
Populate the
App
component logic by the code below:function App() { const [image, setImage] = React.useState(''); const [data, setData] = React.useState(''); React.useEffect(() => { const ocrMessageListener = ({ data: { data, subject } }) => { switch (subject) { case "OCR.Verbose": alert(data.message); break; case "Internal.Error": switch (data.message) { case "SANDBOX_ID_NOT_ALLOWED": alert("Invalid sandbox image code"); global.OCRSDK.onDestroy(); break; case "INSUFFICIENT_QUOTA": alert("Insufficient quota"); global.OCRSDK.onDestroy(); break; case "INTERNAL_SERVER_ERROR": alert("Internal server error occured."); break; case "PROCESS_TIMEOUT": alert("KTP Extraction timeout."); break; default: alert("An error occured. Please check the console."); console.log(data.message); break; } break; case "OCR.Success": setImage(data.image.url); setData(JSON.stringify(data, undefined, 2)); setTimeout(() => { global.OCRSDK.onDestroy(); }, 3000); break; case "OCR.Cancelled": case "OCR.OutOfChance": document.getElementById('data-result').innerText = data.message; global.OCRSDK.onDestroy(); break; case "Camera.NotFound": case "Camera.PermissionDenied": alert("Camera is not detected or permission denied"), global.OCRSDK.onDestroy(); break; } }; window.addEventListener('message', ocrMessageListener); return () => { window.removeEventListener('message', ocrMessageListener); }; }, []); const doOCRProcess = React.useCallback(() => { window.OCRSDK.onStart(); }, []); return (
Info
Check System Messages for full system message references.
-
Replace the jsx component inside
App.js
with the code below:return ( <div> <button onClick={doOCRProcess}> Run OCR Process </button> <br /> <img src={image} alt="" /> <div className="data-result">{data}</div> </div> );
-
Replace the whole content of
App.css
with the code below:.data-result { font-family: 'Courier New', Courier, monospace; white-space: pre-wrap; background-color: #0002; overflow: auto; }
To try the above implementation you can run the following command from the ocr
project:
npm run dev
Updated about 2 months ago