Youverse Webcam Component

Getting Started

npm install youverse-webcam-component

Integration via NPM

Install youverse-webcam-component:

npm i youverse-webcam-component

Import youverseWebcam from youverse-webcam-component into your .js file:

// If you use module bundler
import { youverseWebcam } from 'youverse-webcam-component';

// If you don't use module bundler
import { youverseWebcam } from './node_modules/youverse-webcam-component/js/dist/youverse-webcam.min.js';

Add the component name to the .html file.

<youverse-webcam 
    cancel-verification 
    change-camera
></youverse-webcam>

Integration via CDN

Connect the script in your .html file. Here is the CDN link: https://www.jsdelivr.com/package/npm/:package@:version/:file

For example:

<script src="https://cdn.jsdelivr.net/npm/youverse-webcam-component@latest/js/dist/youverse-webcam.min.js"></script>

Add the component name to the .html file.

<youverse-webcam 
    cancel-verification 
    change-camera
    locale="en"
></youverse-webcam>

Attributes

Attribute | Info | Data type | Default Value | Values
-------------------------|------------------------------------------------------------------------------------------------------|---------------|---------------------------------------------------------|------------------ face-position-check | Option for guided face positioning | boolean | true | true, false
cancel-verification | Option to cancel verification. If true, an option to cancel de verification will appear | boolean | false | true, false
change-camera | Option to change camera. If true and if exist multiple cameras, an icon to switch camera will appear | boolean | true | true, false
locale | The language of the component interface | string | en | en, pt, es
color | The color of the component interface | string | #492280 | hex color string title-text | Text for the component title. Translation based on the language selected | string | Take a selfie | string
info-text | Text for the component info. Translation based on the language selected | string | Make sure that your face is in the frame and is visible | string

Events

You can subscribe to the component events.

For example:

document.addEventListener('NEXT_STEP_EVENT', (event) => console.log(event.detail)); // Event

Type of events:

| Event | Description | Event Handling | |------------------------------|----------------------------------------------------------------|--------------------------------------------------------------| | NEXT_STEP_EVENT | Event triggered when a selfie is taken | Handled by a designated event listener in the application(listener) | | CANCEL_EVENT | Event triggered when cancellation occurs | Handled by a designated event listener in the application(listener) | | RESPONSE_NEXT_STEP_EVENT | Event to communicate with the component after NEXT_STEP_EVENT | Dispatched by the application to signal handling components(dispatch) | | RESPONSE_CANCEL_EVENT | Event to communicate with the component after CANCEL_EVENT | Dispatched by the application to signal handling components(dispatch) |

Response Events

Type of events:

Event | Response Parameters | Usage | Description
------------------------------|-------------|------|---------------------------------------------------------------- NEXT_STEP_EVENT |{ detail: { image: string } } | event.detail.image | The event returns an image
CANCEL_EVENT | null | null | The event has no return

For more information please contact us.