youverse-webcam-component

Youverse Webcam Component

Getting Started

npm install youverse-webcam-component

License token (JWT) setup

Before using this component, you must obtain a valid license token (JWT) from your backend service.

1. Send an HTTP GET request to the authentication endpoint:

   • Endpoint: https://web-sdk.youverse.id/auth-token
   • Headers:
     • x-api-key: Your API key (get it from your Youverse dashboard at https://www.youverse.id/)
   • Parameters:
     • customer_bind: Customer identifier required by the service

2. Response: Backend returns authentication payload containing the JWT token.

3. Use the token as the license attribute:

   <youverse-webcam license="JWT_TOKEN" ...></youverse-webcam>

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 
    license="JWT_TOKEN"
    cancel-verification="false"
    change-camera="true"
></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"
        integrity="sha384-GE/E2IVd6L8//kLYg9p8Ij9FD6uQbPsIZZEZ32NvjqSUR417Nf3F2MsouE/o5e6N"
        crossorigin="anonymous"></script>

Note: The integrity attribute ensures the script has not been tampered with. The hash is updated automatically with each release — check the latest release for the current value. The crossorigin="anonymous" attribute is required when loading from a CDN.

Add the component name to the .html file.

<youverse-webcam 
    license="JWT_TOKEN"
    cancel-verification="false"
    change-camera="true"
></youverse-webcam>

Attributes

Attribute	Info	Data type	Default Value	Values
license	JWT license token required to authorize the component	string	-	string (required)
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	true	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
background-color	Background color of the component interface	string	#fff	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('YV_SELFIE_NEXT_STEP', (event) => console.log(event.detail));

Type of events:

Event	Description	Event Handling
YV_SELFIE_NEXT_STEP	Event triggered when a selfie is taken	Handled by a designated event listener in the application(listener)
YV_SELFIE_CANCEL	Event triggered when cancellation occurs	Handled by a designated event listener in the application(listener)
YV_SELFIE_RESPONSE_NEXT_STEP	Event to communicate with the component after YV_SELFIE_NEXT_STEP	Dispatched by the application to signal handling components(dispatch)
YV_SELFIE_RESPONSE_CANCEL	Event to communicate with the component after YV_SELFIE_CANCEL	Dispatched by the application to signal handling components(dispatch)

Response Events

Type of events:

Event	Response Parameters	Usage	Description
YV_SELFIE_NEXT_STEP	{ detail: { metadata: object, image: string } }	event.detail.image	The event returns an image
YV_SELFIE_CANCEL	null	null	The event has no return

Attest payload with your backend service

Before validating the payload, you must send the captured data to the attestation endpoint from your backend service.

1. Send an HTTP POST request to the attestation endpoint:

   • Endpoint: https://web-sdk.youverse.id/attest
   • Payload:
     • metadata: Metadata object generated by the component
     • image: Captured image data

2. Response: Backend returns an attestation result indicating whether the payload is valid and trusted.

For more information please contact us.