📗API [v3.0]

This page describes all LIQA API functions. Simply copy-paste code snippets into your application.

Permissions (React Native only)

LIQA needs your users to explicitly give access to the camera. This requirement is caused by device producer data protection policies. For websites and PWA, LIQA™️ can handle request by itself, but for React Native applications LIQA™️ needs some help from your side.

To make camera access requests work correctly for React Native application, please modify your app permission manifest. Here is an explicit how-to article on it (both iOS / Android): Camera access permissions (React Native app only)

Initialization & Start

1. Locate the object where LIQA™️ will exist inside of your application or website.

2. Inject "Start" command to start LIQA™️, as soon as your user is ready to use it.

JavaScript

// template
<iframe 
    width="100%" 
    height="100%" 
    src="<access link>" 
    allow="camera <access link>"
    scrolling="no" 
    style="margin: 0px; padding: 0px; border: none; line-height: 0; overflow: hidden; "
/>
</iframe>
// js
/**
* Use variable like window.innerHeight in height parameter of <iframe />
*/
<script type="application/javascript">
    // if you are using framework as react/vue/angular you don't need this listener
    document.addEventListener('DOMContentLoaded', (event) => {
        const iframe = document.getElementsByTagName('iframe')[0];
        // Start
        iframe.onload = () => {
            setTimeout(() => {
                iframe.contentWindow.postMessage({
                      "Start": "",
                      "Style": {
                        "background_color": "#FFFFFF",
                        "main_color": "#335AFF",
                        "secondary_color": "gray",
                        "button_text_color": "white",
                        "button_text_font_size": "1.2em"
                      },
                      "Parameters": {
                        "allowed_distance": "close"
                      }
                }, '*');
            }, 500);
        }
    });
</script>

Add Cache Header to manage cache lifetime.

Add <meta /> tag to your index.html:

<meta http-equiv="Cache-control" content="public" max-age="151200" />

The max-age=<N> response directive indicates that the response remains fresh until N seconds after the response is generated.

We do not recommend making this value > 2 days to keep your system always up to date (2 days = 151200 seconds)

React Native

// const webView = useRef(null);
// const widthWebview = Dimensions.get('window').width;
// const heightWebview = Dimensions.get('window').height;

<WebView 
    bounces={true}
    scalesPageToFit={true}
    startInLoadingState
    applicationNameForUserAgent={'Haut.AI LIQA'}
    useWebKit
    originWhitelist={['*']}
    allowsInlineMediaPlayback
    mediaPlaybackRequiresUserAction={false}
    source={{ uri: '<access link>' }}
    style={{marginTop: 1, width: widthWebview, height: heightWebview }}
    ref={webView}
    javaScriptEnabled={true}
    cacheEnabled={true}
    cacheMode={"LOAD_DEFAULT"}
    mediaCapturePermissionGrantType={"grant"}
    onMessage={onMessage} // the function onMessage is described below
    onLoadEnd={(e) => {
        setTimeout(() => {
            webView.current.injectJavaScript('window.postMessage({
                Start: "",
                Style: {
                    "background_color": "#FFFFFF",
                    "main_color": "#335AFF",
                    "secondary_color": "gray",
                    "button_text_color": "white",
                    "button_text_font_size": "1.2em"
                }
            })');
        }, 300);
      }}
  />

Parameters

Initialization:

Parameter name	Meaning	Default value
<access link>	URL to interactive LIQA service	N/A

Start:

Parameter name	Meaning	Value
Start	command	"" (empty string)
Style	UI styling	{ "background_color": <hex color>, "main_color": <hex color>, "secondary_color": <hex color>, "button_text_color": <hex color>, "button_text_font_size": <font size px|em> }
Parameters	Tech properties	{ "allowed_distance": "close" | "far" }

Catch events

Building complex systems is inevitably connected with imperfections. LIQA™️ performs many actions and some of them may take time, some of them may even unexpectedly fail with errors. Events bring some transparency to the process.

Setup your application to catch events from LIQA to understand executing stage:

JavaScript

/* ... */
window.onmessage = (e) => {
    if (e.data.status) {
      if (e.data.status == "loaded") {
        console.log("LIQA loaded");
      } else if (e.data.status.includes("301")) {
        console.log(`Loading failed. Error: ${e.data.status.split(":")[1]}`);
      } else if (e.data.status == "305") {
        console.log("No camera access");
      } else if (e.data.status.includes("307")) {
        console.log(`Error occurred. Error: ${e.data.status.split(":")[1]}`);
      } else if (e.data.status == "front" || e.data.status == "back") {
        console.log(`Camera started. Camera type: ${e.data.status}`);
      }
    }
}

React Native

/* ... */
onMessage={(event) => {
  const obj = JSON.parse(event.nativeEvent.data);
    if (obj.status) {
      if (obj.status == "loaded") {
        console.log("LIQA loaded");
      } else if (obj.status.includes("301")) {
        console.log(`Loading failed. Error: ${obj.status.split(":")[1]}`);
      } else if (obj.status == "305") {
        console.log("No camera access");
      } else if (obj.status.includes("307")) {
        console.log(`Error occurred. Error: ${obj.status.split(":")[1]}`);
      } else if (obj.status == "front" || obj.status == "back") {
        console.log(`Camera started. Camera type: ${obj.status}`);
      }
    }
}

User Interface

Fit to your screen

All devices are different in terms of screen size and camera resolution, but LIQA™️ allows you to avoid the nightmare of keeping all this in mind. Just set iframe or webview tag according to the Initialization & Start instruction, and the rest LIQA™️ will do with Responsive UI

Match to your color

Defining a nice but functional UI is always a big challenge, but we are sure that we do it well. LIQA™️ allows setting your own style properties to some objects.

Read here to see what styling options are curently supported: UI Styling

All styling parameters are passed directly to LIQA™️ during "Start" command.

Read here how to setup customization: Parameters

Get image

LIQA™️ returns as output a final approved user image, that passed through AI model quality criteria and was confirmed by the user.

JavaScript

Set up a command to receive an image as an event listener.

iframe.onload = () => {
  window.onmessage = (e) => {
    if (e.data.photo) {
      // your base64 photo
    }
  }
}

React Native

Set up a command to receive an image as a function. This function must be defined and passed to webview initialization.

function onMessage(event) {
    const obj = JSON.parse(event.nativeEvent.data);
    // base64 photo: obj.photo;
    setImg(obj.photo);
  }

The image is encoded as base64 (a common image to bytes encoding method)

Exit

As soon as your user finished image capturing process, LIQA™️ is not necessary anymore.

1. Inject "Exit" command to stop LIQA™️ models
2. Hide LIQA™️ object from the user

JavaScript

iframe.contentWindow.postMessage({
    "Exit": ""
}, '*');
// add line below to hide iframe tag from the page
iframe.style.visibility = "hidden";

React Native

webView.current.injectJavaScript('window.postMessage({Exit: ""})');

All-in-one Example

This example shows the default setup of LIQA™️ in your application just in several lines of code:

JavaScript

// template
<iframe 
  width="100%" 
  height="100%" 
  src="<access link>" 
  allow="camera <access link>"
  scrolling="no" 
  style="visibility: hidden; margin: 0px; padding: 0px; border: none; line-height: 0; overflow: hidden; "
/>
</iframe>
// js
/**
* Use variable like window.innerHeight in height parameter of <iframe />
*/
this.iframe = document.querySelector("iframe");
this.iframe.onload = () => {
  this.iframe.style.visibility = "visible";
  setTimeout(() => {
    this.iframe.contentWindow.postMessage({"Start": ""}, '*');
  }, 500);
  window.onmessage = (e) => {
    if (e.data.photo) {
      console.info("Base 64 photo received", e.data.photo);
      this.iframe.style.visibility = "hidden";
    }
    if (e.data.status) {
      if (e.data.status == "loaded") {
        console.log("LIQA loaded");
      } else if (e.data.status.includes("301")) {
        console.log(`Loading failed. Error: ${e.data.status.split(":")[1]}`);
      } else if (e.data.status == "305") {
        console.log("No camera access");
      } else if (e.data.status.includes("307")) {
        console.log(`Error occurred. Error: ${e.data.status.split(":")[1]}`);
      } else if (e.data.status == "front" || e.data.status == "back") {
        console.log(`Camera started. Camera type: ${e.data.status}`);
      }
    }
  }
}

React Native

import React, { useRef, useState } from 'react';
import { Platform, StyleSheet, View, Dimensions } from 'react-native';
import { WebView } from 'react-native-webview';
import { request, requestMultiple, PERMISSIONS, RESULTS } from 'react-native-permissions';

export default function App() {
  const webView = useRef(null);
  const [webviewRenderAvailable, setWebviewRenderAvailable] = useState(false);
  const widthWebview = Dimensions.get('window').width;
  const heightWebview = Dimensions.get('window').height;
  const isiOS = (Platform.OS === 'ios');
 
  useEffect(() => {
    /*
      request / requestMultiple -> RESULTS
      RESULTS.GRANTED -- The permission is granted;
      RESULTS.BLOCKED -- The permission is denied and not requestable anymore;
      RESULTS.UNAVAILABLE -- This feature is not available (on this device / in this context);
      RESULTS.DENIED -- The permission has not been requested / is denied but requestable;
      RESULTS.UNAVAILABLE -- This feature is not available (on this device / in this context);
    */
    if (isiOS) {
      request(PERMISSIONS.IOS.CAMERA)
        .then((statuses) => {
            if (statuses[PERMISSIONS.IOS.CAMERA] == RESULTS.GRANTED) {
                setWebviewRenderAvailable(true);
            });      
          });
    } else {
      request(PERMISSIONS.ANDROID.CAMERA)
        .then((result) => {
            
            if (result == RESULTS.GRANTED) {
                setWebviewRenderAvailable(true);
            }
        });
    }
  });
  return (
    <View style={styles.container}>
      { webviewRenderAvailable &&
        <WebView 
          bounces={true}
          scalesPageToFit={true}
          startInLoadingState
          applicationNameForUserAgent={'Liqa Service e-Com'}
          useWebKit
          originWhitelist={['*']}
          allowsInlineMediaPlayback
          mediaPlaybackRequiresUserAction={false}
          source={{ uri: '<access link>' }}
          style={{marginTop: 1, width: widthWebview, height: heightWebview }}
          ref={webView}
          javaScriptEnabled={true}
          cacheEnabled={true}
          cacheMode={"LOAD_DEFAULT"}
  
          onMessage={(event) => {
            const obj = JSON.parse(event.nativeEvent.data);
            if (obj.photo) {
              // base64 photo: obj.photo;
              console.log( "Base 64 photo received" );
            }
            if (obj.status) {
              if (obj.status == "loaded") {
                console.log("LIQA loaded");
              } else if (obj.status.includes("301")) {
                console.log(`Loading failed. Error: ${obj.status.split(":")[1]}`);
              } else if (obj.status == "305") {
                console.log("No camera access");
              } else if (obj.status.includes("307")) {
                console.log(`Error occurred. Error: ${obj.status.split(":")[1]}`);
              } else if (obj.status == "front" || obj.status == "back") {
                console.log(`Camera started. Camera type: ${obj.status}`);
              }
            }
          }}
          onLoadEnd={(e) => {
            // Run LIQA
            setTimeout(() => webView.current.injectJavaScript('window.postMessage({Start: ""})'), 300);
          }}
        />
      }
    </View>
  );
}

Help needed?

We are continuously improving our product and we are happy to listen to your voice.

Let us know via creating a ticket in our Haut.AI Helpdesk!