📗API [v3.0]

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

Permissions (React Native only)

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

// 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)

Catch events

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

/* ... */
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}`);
      }
    }
}

User Interface

Fit to your screen

Match to your color

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

Read here how to setup customization: Parameters

Get image

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

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

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

Exit

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

All-in-one Example

// 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}`);
      }
    }
  }
}

Help needed?

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

Last updated