https://github.com/veryfi/veryfi-lens-wasm
https://github.com/veryfi/veryfi-lens-wasm
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/veryfi/veryfi-lens-wasm
- Owner: veryfi
- Created: 2023-08-24T18:37:09.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-15T21:10:16.000Z (about 1 year ago)
- Last Synced: 2025-05-04T05:33:07.110Z (5 months ago)
- Language: JavaScript
- Size: 16.5 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lens for Browser socket version has been moved to a separate package https://github.com/veryfi/veryfi-lens-socket
# Veryfi Lens for Browser WASM SDK
Veryfi Lens for Web SDK is a framework for your web app to give it document capture superpowers in minutes.
Lens follows a client-server architecture where the server is for validating your client and getting session key and the client side is for displaying and showing Lens components for capturing documents.
**_You can skip first step and copy wasm folder from package directory manually if you want to do so_.**
1. run `npm exec veryfi-lens-wasm-setup` and provide it with path to directory where
**they have to be accessible from your project's entry point with relative paths** (for next.js `public/wasm`)
2. Import package `import VeryfiLens from 'veryfi-lens-wasm'`
or `const lens = require('veryfi-lens-wasm').default` inside `useEffect` for next.js
3. Add `id='veryfi-container'` to a div you want lens to appear (it should have full height and hidden overflow)
For usual receipt (Next.Js example)
```
const [veryfiLens, setVeryfiLens] = useState<{
setUserAgent: (arg0: string) => void;
initWasm: (arg0: string) => void;
startCameraWasm: () => void;
captureWasm: (
arg0: React.Dispatch>,
arg1: React.Dispatch>
) => void;
} | null>(null);
useEffect(() => {
const startWasm = async () => {
if (typeof window !== 'undefined') {
const lens = require('veryfi-lens-wasm').default;
lens.setUserAgent(navigator.userAgent);
await lens.initWasm(sessionToken);
setVeryfiLens(lens);
}
}
startWasm()
}, []);
const takePhoto = () => {
if (veryfiLens) {
veryfiLens.captureWasm(setImage, setIsEditing)
} else {
console.log('veryfiLens is not initialized')
}
};
// setImage is cropped image setter(for example react's useState hook), returns string
// setIsEditing returns `true` if image was succesfully cropped (we use it to change screens)
```
For Long receipt (Next.Js example)
Add container with id="preview-container" to see stitching preview
```
```
```
const [veryfiLens, setVeryfiLens] = useState<{
startStitching(): void;
setUserAgent: (arg0: string) => void;
initWasmLong: (arg0: string) => void;
startCameraWasm: () => void;
captureLong: (
arg0: React.Dispatch>,
arg1: React.Dispatch>
) => void;
} | null>(null);
const [isStitching, setIsStitching] = useState(false)
useEffect(() => {
const startWasm = async () => {
if (typeof window !== 'undefined') {
const lens = require('veryfi-lens-wasm').default;
lens.setUserAgent(navigator.userAgent);
await lens.initWasmLong(sessionToken);
setVeryfiLens(lens);
}
}
startWasm()
}, []);
// Start button
const startStitching = () => {
if (veryfiLens) {
veryfiLens.startStitching();
setIsStitching(true);
} else {
console.log("veryfiLens is not initialized");
}
};
// Stop button
const stopStitching = () => {
if (veryfiLens) {
veryfiLens.captureLong(setImage, setIsEditing);
}
};
```
To use wasm in dev environment, you have to use https and ssl
If using Next.js add following to next.config.js:
```
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'Cross-Origin-Opener-Policy',
value: 'same-origin'
},
{
key: 'Cross-Origin-Embedder-Policy',
value: 'require-corp'
}
]
}
]
},
webpack: (config) => {
config.resolve.fallback = { fs: false, path:false, "crypto": false };
return config;
},
```
If using Vite and Vue:
1. install serve `npm i serve`
2. Add following to your vite config
```
server: {
https: {
key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')), //path to your cert
cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')),},
proxy: {},
hmr: {
protocol: 'wss',
timeout: 30000,
},
watch: {},
open: true,
host: true,
strictPort: false,
force: false,
cors: true,
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
}
}
```
3. `serve -s dist -p 3000`
If using Angular:
1. You can copy files to `src` directory, then add it to assets in `angular.json`
```
"assets": [
"src/favicon.ico",
"src/assets",
"src/wasm"
],
```
2. for dev environment you can use node server (server file has to be in the same folder with your index.html)
```
const http = require("http");
const fs = require("fs").promises;
const host = "localhost";
const port = 3000;
const typeMap = {
html: "text/html",
css: "text/css",
js: "text/javascript",
wasm: "application/wasm",
};
const requestListener = function (req, res) {
let url = req.url;
if (url === "/") url = "/index.html";
for (const [key, value] of Object.entries(typeMap)) {
if (url.endsWith(key)) res.setHeader("Content-Type", value);
}
fs.readFile(__dirname + url)
.then((contents) => {
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
res.writeHead(200);
res.end(contents);
})
.catch((err) => {
console.log("error: ", url);
console.log("Error", err.stack);
console.log("Error", err.name);
console.log("Error", err.message);
res.writeHead(500);
return;
});
};
const server = http.createServer(requestListener);
server.listen(port, host, () => {
console.log(`Server is running on http://${host}:${port}`);
});
```
1. run it with `node server.js`
2.`npx local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3001 --target 3000` (You will need local certificate, possible to make with `mkcert`)
3. Go to `https://localhost:3001`
For production build (any framework) or if you prefer using build instead of dev environment `wasm` directory should be in your `dist` directory (near your built index.html)
```
'Cross-Origin-Opener-Policy', 'same-origin';
'Cross-Origin-Embedder-Policy', 'require-corp';
```