API [v2.5]

LIQA Service API functions

Permissions (React Native only)

To allow LIQA request access to user camera, it is necessary to modify the React Native app permission manifest. Read here how to do it (for both iOS / Android): App permissions (React Native only)

Initialization & Start

Before LIQA can start, it is necessary to locate the object where to put LIQA - initialize. As soon as all is ready you can start LIQA. This command will request camera access from the user, compile models and run live process of image capturing.

Copy and paste this part of code inside of your application to perform start:

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; "
/>
// 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": "<properties>"
                }, '*');
            }, 500);
        }
    });
</script>

Add Cache Header to 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: "<properties>"})');
        }, 300);
      }}
  />

Input parameters

Initialization parameters:

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

Start parameters for LIQA Light / e-Commerce:

Parameter name	Meaning	Default value
<properties>	Placeholder for future parametrization	"" (empty string)

Start parameters for LIQA Feet:

<properties> for LIQA Feet

"left" - for left leg;

"right" - for right leg;

"left&right" - for both legs;

Initialization may take some time to connect to Haut.AI servers, authenticate the request and download all assets. Start may take some time to compile AI models of LIQA for exact device. Depending on the available device computational capacities, this process may take from 1.5 to 15 seconds (for old devices).

If camera access is not granted during the start event, LIQA will return an error.

As devices may vary on screen / camera size, LIQA automatically adjust video and UI to the most suitable resolution. Read here to learn how it works and what devices are supported: Responsive UI

Get photo

LIQA performs live image analysis to help your user to find the best postion and illumination and take a high quality photo. As a result LIQA returns image encoded as base64 (common image encoding to bytes).

Copy and paste this part of code inside of your system to receive a final image:

JavaScript

Command to receive an image should be defined as event listener.

LIQA e-Commerce / Light

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

LIQA Feet

iframe.onload = () => {
  window.onmessage = (e) => {
    if (e.data.left || e.data.right) {
      // left leg photo in e.data.left;
      // right leg photo in e.data.right;
    }
  }
}

React Native

Command to receive an image should be defined and passed to WebView initialization.

LIQA e-Commerce / Light

function onMessage(event) {
    // base64 photo: event.nativeEvent.data;
    setImg(event.nativeEvent.data);
  }

LIQA Feet

function onMessage(event) {
    const obj = JSON.parse(event.nativeEvent.data);
    if (obj.left) {
      // left leg photo in obj.left
    }
    if (obj.right) {
      // right leg photo in obj.right
    }
  }

Exit

As soon as your user finished image capturing process, the LIQA is no longer necessary and can be hidden from the user.

Copy and paste this part of code inside of your application to perform exit:

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

LIQA e-Commerce / Light

The example below shows several lines of code for using LIQA in your application.

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; "
/>

// 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";
    }
  }
}

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) => {
            // base64 photo in event.nativeEvent.data 
            console.log( "Base 64 photo received" );
          }}
          onLoadEnd={(e) => {
            // Run LIQA
            setTimeout(() => webView.current.injectJavaScript('window.postMessage({Start: ""})'), 300);
          }}
        />
      }
    </View>
  );
}

LIQA Feet

The example below shows several lines of code for using LIQA in your application.

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; "
/>

// js
/**
* Use variable like window.innerHeight in height parameter of <iframe />
*/
this.iframe = document.querySelector("iframe");
this.iframe.onload = () => {
  setTimeout(() => {
    this.iframe.contentWindow.postMessage({"Start": "left&right"}, '*');
  }, 500);
  this.iframe.style.visibility = "visible";
  window.onmessage = (e) => {
    if (e.data.left || e.data.right) {
      // left leg photo in e.data.left;
      // right leg photo in e.data.right;
    }
  }
}

React Native

import React, { useRef, useState } from 'react';
import { StyleSheet, Text, View, Dimensions, Button } from 'react-native';
import { WebView } from 'react-native-webview';
import { request, 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) {
      requestMultiple([
        PERMISSIONS.IOS.CAMERA, 
        PERMISSIONS.IOS.MICROPHONE
      ])
        .then((statuses) => {
            if ((statuses[PERMISSIONS.IOS.CAMERA] == RESULTS.GRANTED) && 
                (statuses[PERMISSIONS.IOS.MICROPHONE] == 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 Feet'}
          useWebKit
          originWhitelist={['*']}
          allowsInlineMediaPlayback
          mediaPlaybackRequiresUserAction={false}
          source={{ uri: '<access link>' }}
          style={{marginTop: 1, width: widthWebview, height: heightWebview }}
          ref={webView}
          javaScriptEnabled={true}
          cacheEnabled={true}
          onMessage={(event) => {
            const obj = JSON.parse(event.nativeEvent.data);
            if (obj.left) {
              // left leg photo in obj.left
            }
            if (obj.right) {
              // right leg photo in obj.right
            }
          }}
          onLoadEnd={(e) => {
            // Run LIQA
            setTimeout(() => webView.current.injectJavaScript('window.postMessage({Start: "left&right"})'), 300);
          }}
        />
      }
    </View>
  );
}