Selfie capturing results parsing

This page provides information on how the LIQA selfie results can be parsed and visualized.

Selfie image visualization

Subscribe to selfieImage RxJS Observable:

liqa.selfieImage$.subscribe( (selfie) => { 
    showImage(selfie);
});

UI mockup and logic scheme for selfie image visualization and retake action

Here is how your system can work with selfie image result:

showImage(selfie) { 
    /* For example: set to <img> */
    img.width = window.innerWidth;
    img.src = selfie;
 
    checkPhoto();   
    /* show image to end-user on a new canvas */
    /* show "Retake" button to close new canvas and call liqa.play again */
    /* show "Approve" button to finish current image collection session */
    /* add some logic for Retake and Approve actions */
}

Here is an example of two next steps after capturing and showing an image:

/* Pseudo code */
checkPhoto() {
    if (retakeButtonChecked) {
        /* retake scenario */
        liqa.play();
    } else if (approveButtonChecked) {
        /* approve scenario */
        liqa.unmount();
    }
}

Landmarks visualization

Subscribe to selfieLandmarks RxJS Observable:

liqa.selfieLandmarks$.subscribe( (landmarks) => {
    showLandmarks(landmarks);
  });

UI mochup and logic scheme for landmarks visualization

Here is how your system can work with selfie image result:

showLandmarks(landmarks) {
    /* set to <canvas> */
    canvas.width = img.width;
    canvas.height = img.height;  
    
    const ctx = canvas.getContext("2d");
    
    for (let i = 0; i < landmarks.length; i++) {
      const x = points[i][0] * canvas.width;
      const y = points[i][1] * canvas.height;
      ctx.beginPath();
      ctx.arc(x, y, 2, 0, 2 * Math.PI);
      ctx.fill();
    }
  }