Usage¶

1. Import the component into your application

   import 'idlive-document-capture-web';
   

2. Add the component's html tag to the place on the page where you want to display the video from the camera

   <idlive-document-capture></idlive-document-capture>
   

   NOTE: The component occupies 100% of the parent's element. Make sure it has a non-zero height and width

3. Get the component to interact with

   const idliveDocCapture = document.querySelector('idlive-document-capture');
   

4. Call openCamera action to open the camera and show video

   idliveDocCapture.openCamera();
   

5. Subscribe to capture event to get an encrypted file for verification after the photo is captured

   idliveDocCapture.addEventListener('capture', (event) => {
       const { photo, encryptedFile } = event.detail[0];
   
       sendEncryptedFileToServer(encryptedFile)
   });
   

6. Implement a method to interact with the IAD server

   const sendEncryptedFileToServer = (encryptedFile) => {
       const serverUrl = 'https://IAD_SERVER_URL:PORT';
   
       fetch(`${serverUrl}/check_capture_liveness`, {
           method: 'post',
           headers: { 'Content-Type': 'application/octet-stream' },
           body: encryptedFile,
       })
           .then(response => response.json())
           .then(result => {
               // process result from the server
           })
           .catch(e => {
               // error
           });
   }