@glair/web-components
v0.0.1-beta.6
Published
A collection of GLAIR's web components
Downloads
24
Readme
Basic Usage
There are two ways to consume GLAIR web components:
- Directly via
<script>tag. - 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/[email protected]/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-componentsThen 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 | 
|
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.