Custom Quality Function¶

By default, the component automatically takes a picture when the built-in face detector picks up a suitable frame and the component is ready for capturing

It is possible to make custom function for determining the quality of the frame

1. Implement a quality function to find a suitable frame. It should take a single argument of type ImageData and return a Promise that resolves to a boolean. If this Promise resolves to true the frame can be used in the produced payload. When the component is ready for capturing, it will capture the latest frame for which the function returned true

   const customQualityFunction = async (imageData) => {
       const face = await SomeFaceDetector.detectFace(imageData);
   
       if (face.isValid()) {
           return true;
       }
   
       return false;
   };
   

2. Pass the quality function to the component

   const idliveFaceCapture = document.querySelector('idlive-face-capture');
   
   idliveFaceCapture.addEventListener('initialize', () => {
       idliveFaceCapture.setCustomQualityFunction(customQualityFunction);
   });
   

3. You can optionally import the version of the library without the built-in face detector, which is smaller than the standard version

   import 'idlive-face-capture-web/index-no-detector';
   

Check out example