@glair/web-components
TypeScript icon, indicating that this package has built-in type declarations

0.0.1-beta.6 • Public • Published

GLAIR

A collection of GLAIR's web components.

Latest Release License

Basic Usage

There are two ways to consume GLAIR web components:

  1. Directly via <script> tag.
  2. Via ES Module (recommended if you use module bundler or framework e.g., NextJS).

Directly via <script> tag

Add the following <script> tag after <body>. Replace the {web-component-name} as needed.

<script
  type="module"
  src="https://unpkg.com/@glair/web-components/standalone/{web-component-name}.js"
></script>

Specify version number if you want to use a specific version. For example:

<script
  type="module"
  src="https://unpkg.com/@glair/web-components@0.0.1-beta.6/standalone/{web-component-name}.js"
></script>

Fully working sample using glair-webcam component (CodeSandbox demo link):

<!DOCTYPE html>
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GLAIR's Web Components</title>
  <style>
    #webcam-wrapper {
      width: 480px;
      margin: 0 auto;
    }

    #instruction {
      background: black;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 2rem;
      text-align: center;
    }

    #sshot-btn {
      cursor: pointer;
      border: 2px solid white;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      background: red;
    }
  </style>
  <body>
    <div id="webcam-wrapper">
      <glair-webcam></glair-webcam>
      <div id="instruction">
        <p style="font-weight: bold">Take photo</p>
        <button id="sshot-btn"></button>
        <p>Make sure your face is clearly visible on the marked area</p>
      </div>
    </div>
  </body>

  <script
    type="module"
    src="https://unpkg.com/@glair/web-components/standalone/webcam.js"
  ></script>
  <script>
    const glairWebcam = document.querySelector("glair-webcam");
    glairWebcam.setAttribute(
      "screenshotArea",
      JSON.stringify({
        x: 25,
        y: 25,
        width: 50,
        height: 50,
        enableOverlay: true,
      })
    );
    const btn = document.querySelector("#sshot-btn");

    btn.addEventListener("click", async () => {
      const base64sshot = await glairWebcam.screenshot();
      const fetchSshot = await fetch(base64sshot);
      const blob = await fetchSshot.blob();
      console.log(base64sshot, blob);

      // Send the blob to your backend server
      // Then, your backend server can send it to GLAIR Vision's API
    });
  </script>
</html>

Via ES Module

Install the @glair/web-components from NPM:

npm install @glair/web-components

Then on the code:

import "@glair/web-components/lib/{web-component-name}";
// Now you can render <glair-webcam></glair-webcam>

List of GLAIR Web Components

No Name Tag <script> ES Module Demo
1 Webcam <glair-webcam> /standalone/webcam /lib/webcam Edit GLAIR Web Component Sample – Webcam

Webcam

This component provides you an easier access for webcam. It is a wrapper around MediaDevices.getUserMedia().

Attributes

Name Type Default Value Notes
width number 480 The width of the webcam and the width of the screenshot's result.
height number 480 The height of the webcam and the height of the screenshot's result.
facingMode string user Corresponds to MediaTrackConstraints.facingMode. Set to environment to use rear camera. See MDN Docs for detail.
mirrored boolean false Set to true to mirror the video horizontally.
screenshotArea string {"x":0...} Enables custom and configurable screenshots, defining the area and overlay display. More detail here.

Screenshot Area

screenshotArea property is a JSON object string that enables custom screenshots with specific area and overlay configurations. This property consists of five sub-properties:

Name Type Default Value Notes
x number 0 Represents the horizontal starting coordinate point (as a percentage) from where the screenshot will be captured. It defines the left-most coordinate of the region to capture. [0, 100]
y number 0 Represents the vertical starting coordinate point (as a percentage) from where the screenshot will be captured. It defines the top-most coordinate of the region to capture. [0, 100]
width number 100 Determines the width (as a percentage) of the screenshot area. It defines the horizontal extent of the region to capture from the starting point x. (0, 100]
height number 100 Determines the height (as a percentage) of the screenshot area. It defines the vertical extent of the region to capture from the starting point y. (0, 100]
enableOverlay boolean false A boolean that determines whether the overlay for the screenshot should be displayed or not

Slots

Slots here mean the Web Component Slot element. This allows you to plug-in your own custom elements to the slot and override the default behavior.

Slot Name Note Case
user-media Displayed when the component receives a media stream (camera access granted).
user-media-error Displayed when the component can't receive a media stream (camera access not granted).

Methods

Method signature Return Value Description
screenshot() Promise<string> Returns a promise of base64 encoded string of the current image shown on webcam.

Sample Usages

Sample usage for glair-webcam has been provided at Basic Usage section.

Sample usage with custom element for slot user-media-error:

<glair-webcam>
  <div
    slot="user-media-error"
    style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
  >
    Camera permission denied
  </div>
</glair-webcam>

Use Cases

glair-webcam will help you to create OCR or face biometrics UI. You can use it to take photos of documents (e.g. KTP, Passport) or the user's face and send it to GLAIR Vision's API for OCR & liveness detection.

Package Sidebar

Install

npm i @glair/web-components

Weekly Downloads

7

Version

0.0.1-beta.6

License

MIT

Unpacked Size

74.3 kB

Total Files

10

Last publish

Collaborators

  • teguh.s.santoso
  • sahatnicholas-gdp
  • timotiusnc
  • glair-admin