Initialization

VanillaJS/Node

1. Create index.js next to your index.html
2. Import it to your index.html <script src="index.js" type="module"></script>
3. Import SDK to your index.js import VeryfiLens from "./veryfi-lens-wasm/veryfi-lens.js"
4. Set process url and your credentials from Authentification

const PROCESS_DOCUMENT_URL = "https://lens.veryfi.com/rest/process" or "https://lens-dev.veryfi.com/rest/process";
const CLIENT_ID = "YOUR_CLIENT_ID";
const API_KEY = "YOUR_API_KEY";
const USERNAME = "your.username";

5. Add function to validate client and receive session token (it is necessary to initialize Lens)

async function validatePartner(clientId) {
  const validateUrl = "https://lens.veryfi.com/rest/validate_partner";
  try {
    const requestOptions = {
      method: "POST",
      headers: { "CLIENT-ID": clientId },
    };
    const response = await fetch(validateUrl, requestOptions);
    const data = await response.json();
    return data.session;
  } catch (error) {
    console.error("Error validating partner:", error);
    return null;
  }
}

6. Call it const sessionToken = validatePartner(CLIENT_ID)

7. Call const deviceData = await VeryfiLens.getDeviceData() (Is reqiured to send an image to our backend)

8. Call await VeryfiLens.init(sessionToken, CLIENT_ID)
   • To capture detected document call await VeryfiLens.capture()

info

If you want to use blur detection you need to add id="blur-detector" to any element inside your HTML file

Next.JS(TypeScript)

1. Create .env file
2. Store your credentials from Authentification in .env file

NEXT_PUBLIC_PROCESS_DOCUMENT_URL = https://lens.veryfi.com/rest/process or https://lens-dev.veryfi.com/rest/process
NEXT_PUBLIC_CLIENT_ID=YOUR_CLIENT_ID
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
NEXT_PUBLIC_USERNAME=YOUR_USERNAME

They are required for initialization of Lens For Web and for processing of resulting image

3. Import SDK

• import VeryfiLens from 'veryfi-lens-wasm'
• const VeryfiLens = require('veryfi-lens-wasm').default

4. Add a function to validate partner and receive session token (it is necessary to initialize Lens)

const validatePartner = async (clientId: string): Promise<any> => {
  const validateUrl = 'https://lens.veryfi.com/rest/validate_partner';
  const requestOptions = {
    method: 'POST',
    headers: {
      'CLIENT-ID': clientId,
    },
  };

  return fetch(validateUrl, requestOptions)
    .then((response) => response.json())
    .then((data) => {
      return data.session;
    })
    .catch((error) => {
      return error;
    });
};

5. Initialize Lens

const [VeryfiLens, setVeryfiLens] = useState<VeryfiLens | null>(null);

  useEffect(() => {
    let intervalRef: number | undefined;
    if (typeof window !== 'undefined') {
      const startLens = async () => {
        const lens = require('veryfi-lens-wasm').default;
        lens.init(sessionToken);
        setVeryfiLens(lens);
        intervalRef = window.setInterval(() => {
          setSocketStatusColor(lens.getSocketStatusColor());
        }, SOCKET_STATUS_UPDATE_INTERVAL);
      }
      startLens();
    }
    return () => {
      clearInterval(intervalRef);
    };
  }, [sessionToken]);

6. Add function to capture the frame

  const takePhoto = () => {
    if (VeryfiLens) {
      VeryfiLens.capture(setImage, setIsEditing)
    } else {
      setError('veryfiLens is not initialized');
    }
  };

info

If you want to use blur detection you need to add id="blur-detector" to any element inside your component

React

1. Add your credentials from Authentification to your component (Recommended to use .env file to store sensetive data)

const PROCESS_DOCUMENT_URL = "https://lens.veryfi.com/rest/process"; or "https://lens-dev.veryfi.com/rest/process";
const CLIENT_ID = "YOUR_CLIENT_ID";
const API_KEY = "YOUR_API_KEY";
const USERNAME = "your.username";

They are required for initialization of Lens For Web and for processing of resulting image

2. Import SDK

• import VeryfiLens from 'veryfi-lens-wasm'
• const VeryfiLens = require('veryfi-lens-wasm').default

3. Add a function to validate partner and receive session token (it is necessary to initialize Lens)

async function validatePartner(clientId) {
  const validateUrl = "https://lens.veryfi.com/rest/validate_partner";
  try {
    const requestOptions = {
      method: "POST",
      headers: { "CLIENT-ID": clientId },
    };
    const response = await fetch(validateUrl, requestOptions);
    const data = await response.json();
    return data.session;
  } catch (error) {
    console.error("Error validating partner:", error);
    return null;
  }
}

4. Initialize Lens

const [VeryfiLens, setVeryfiLens] = useState(null);

  useEffect(() => {
    let intervalRef;
    if (typeof window !== 'undefined') {
      const startLens = async () => {
        const lens = require('veryfi-lens-wasm').default;
        lens.init(sessionToken);
        setVeryfiLens(lens);
        intervalRef = window.setInterval(() => {
          setSocketStatusColor(lens.getSocketStatusColor());
        }, SOCKET_STATUS_UPDATE_INTERVAL);
      }
      startLens();
    }
    return () => {
      clearInterval(intervalRef);
    };
  }, [sessionToken]);

5. Add function to capture the frame

  const takePhoto = () => {
    if (VeryfiLens) {
      VeryfiLens.capture(setImage, setIsEditing)
    } else {
      setError('veryfiLens is not initialized');
    }
  };

info

If you want to use blur detection you need to add id="blur-detector" to any element inside your component

Angular

1. Import Lens to your app.component.ts import VeryfiLens from 'veryfi-lens-wasm'
2. Add your credentials

const PROCESS_DOCUMENT_URL = "https://lens.veryfi.com/rest/process"; or "https://lens-dev.veryfi.com/rest/process";
CLIENT_ID = "YOUR_CLIENT_ID";
API_KEY = "YOUR_API_KEY";
USERNAME = "your.username"

3. Add function to validate client and receive session token (it is necessary to initialize Lens)

  async getVeryfiSession(CLIENT_ID: string) {
    return await axios
      .post(
        this.VALIDATE_URL,
        {},
        {
          headers: {
            'CLIENT-ID': CLIENT_ID,
          },
        }
      )
      .then((response) => {
        console.log(response.data.session);
        this.session = response.data.session;
      })
      .catch((error) => error);
  }

4. You can call it in ngOnInit lifecycle hook (together with getDeviceData() which is required to send an image to our backend)

  async ngOnInit() {
    this.getVeryfiSession(this.CLIENT_ID);
    this.deviceData = await VeryfiLens.getDeviceData();
  }

5. Initialize Lens

async initLens(): Promise<void> {
    setTimeout(() => { //use if Lens load before your layout renders (ERROR TypeError: Cannot read properties of null (reading 'appendChild'))
   await VeryfiLens.init(this.session, this.CLIENT_ID);
    }, 1000)
  }

6. Add function to capture the frame

  async capture() {
    this.setImage(await VeryfiLens.capture());
  }

info

If you want to use blur detection you need to add id="blur-detector" to any element inside your component

Svelte

1. Set process url and your credentials from Authentification in your component or in your .env file

const PROCESS_DOCUMENT_URL = "https://lens.veryfi.com/rest/process"; or "https://lens-dev.veryfi.com/rest/process";
const CLIENT_ID = "YOUR_CLIENT_ID";
const API_KEY = "YOUR_API_KEY";
const USERNAME = "your.username";

2. Add function to validate client and receive session token (it is necessary to initialize Lens)

async function validatePartner(clientId) {
  const validateUrl = "https://lens.veryfi.com/rest/validate_partner";
  try {
    const requestOptions = {
      method: "POST",
      headers: { "CLIENT-ID": clientId },
    };
    const response = await fetch(validateUrl, requestOptions);
    const data = await response.json();
    return data.session;
  } catch (error) {
    console.error("Error validating partner:", error);
    return null;
  }
}

3. Call it const sessionToken = validatePartner(CLIENT_ID)

4. Import Lens to your component inside onMount

  onMount(async () => {
        const module = await import('veryfi-lens-wasm');
        VeryfiLens = module.default;
    })

5. Call const deviceData = await VeryfiLens.getDeviceData() (Is reqiured to send an image to our backend)

6. Choose one of the Lens Flavors and Initialize (Pass your sessionToken and CLIENT_ID)

7. Initialize Lens (You can do it in onMount right after import)

  onMount(async () => {
        VeryfiLens.init(sessionToken.session, CLIENT_ID)
    })

8. Create a function to capture the frame

    const takePhoto = () => {
      if (VeryfiLens) {
        VeryfiLens.capture();
      } else {
        console.log('veryfiLens is not initialized');
      }
    };

9. Now if you run your app using node server.cjs, you should see a video feed from your device's camera (Give browser pemission to use camera)

info

If you want to use blur detection you need to add id="blur-detector" to any element inside your component