Setup

info

When you initialize any flavor of Lens that uses WASM it will run checks to make sure that SharedArrayBuffer is availiable
If everything is set correctly you will see following messages in your console: SIMD available: true Threads available: true

VanillaJS/Node

Check out our example

1. Next to your index.html create server.js
2. Copy following code to your server.js:

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"); // Cross origin isolation headers
    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}`);
});

Next.js(Webpack)

Check out our example

1. 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'
          }
        ]
      }
    ]
  },

2. Run your project with npm run dev

React

Check out our example

info

If you are using create-react-app you can't set cross-origin isolation headers for dev environment, to check if WASM working correctly build your project and serve it with a Node/Express server.

1. If you are using Vite add following to your vite.config.js:

  server: {
    headers: {
      'cross-origin-opener-policy': 'same-origin',
      'cross-origin-embedder-policy': 'require-corp',
    }
  },

2. Run your project with npm run dev

Angular

Check out our example

1. After you copied WASM files to some directory (i.e. src) add it to assets in angular.json

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/wasm"
],

2. To be able to use WASM in dev environment (with ng serve) you need to add cross-origin isolation headers to your serve configuration in angular.json

   "serve": {
            "development": {
              "buildTarget": "veryfi-lens-demo-angular:build:development",
              "headers": {
                "Cross-Origin-Opener-Policy": "same-origin",
                "Cross-Origin-Embedder-Policy": "require-corp"
              }
            }
          }

3. To be able to use WASM in production you need serve it with cross-origin isolation headers (see VanillaJS/Node or Express example)

Svelte(Vite)

Check out our example

1. Install Express.js npm install express (Or use Node server from VanillaJS/Node example)
2. Create server.cjs (Required to run app with cross-origin isolation headers)

const express = require('express')
const path = require('path')

const app = express()

// Set headers
app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
  next()
})

// Serve static files
app.use(express.static(path.join(__dirname, 'build')))

// Start server
const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`)
})

Express

Check out our example

1. Next to your index.html create server.js
2. Copy following code to your server.js:

const express = require('express')
const axios = require('axios')
const cors = require('cors')
const path = require('path')

const PORT = 5001
const VALIDATE_URL = 'https://lens.veryfi.com/rest/validate_partner'
const CLIENT_ID = 'YOUR_CLIENT_ID' // make sure to keep it as a secret

const app = express()
app.use(cors())
app.use(express.json())

// This is required for the wasm to work
app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
  next()
})

app.post('/session', getSession)

app.listen(PORT, function (err) {
  if (err) console.log(err)
  console.log('Server listening on PORT', PORT)
})

async function getSession(request, response) {
  const session = await getVeryfiSession(CLIENT_ID)
  response.send(session)
}

async function getVeryfiSession(clientId) {
  return await axios
    .post(
      VALIDATE_URL,
      {},
      {
        headers: {
          'CLIENT-ID': clientId,
        },
      }
    )
    .then((response) => {
      return {
        session: response.data.session,
      }
    })
    .catch((error) => error)
}

app.use(
  '/veryfi-lens-wasm',
  express.static(path.join(__dirname, '/src/veryfi-lens-wasm'))
)
app.use(express.static(path.join(__dirname, '/src')))

info

To test Lens For Web on mobile device use HTTPS and SSL (Mobile devices don't provide acces to cameras via http)

1. Install local-ssl-proxy npm install -g local-ssl-proxy
2. Create certificates for localhost (for example with mkcert)
3. Put certificates to your project folder
4. Run proxy with your ports npx local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3001 --target 3000
5. Go to https://localhost:3001 from your mobile device