Custom Quality Function¶

By default, the component automatically takes a picture when the built-in face detector picks up a suitable frame

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

1. Subscribe to the open event and get the html video element

   const idliveFaceCapture = document.querySelector('idlive-face-capture');
   
   idliveFaceCapture.addEventListener('open', (event) => {
       const { video } = event.detail[0];
   
       checkVideoQuality(video);
   });
   

2. Implement a quality function to find a suitable frame. It should call the takePhoto action when it finds a frame to capture

   const checkVideoQuality = (video) => {
       SomeFaceDetector.detectBestFrame(video).then(() => {
           idliveFaceCapture.takePhoto();
       });
   };
   

3. Optional you can disable auto capture so that the built-in face detector does not automatically take a photo

   <idlive-face-capture
       auto_capture_disabled
   >
   </idlive-face-capture>
   

4. Optional you can import the version of the library without a face detector, which is smaller than the standard version

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

Check out example