Youverse Voice Capture Component

A lightweight web component that records voice directly in the browser and outputs WAV audio files.

Getting Started

npm install yv-voice-capture-web

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-voice-capture license="JWT_TOKEN" ...></youverse-voice-capture>

Integration via NPM

Install yv-voice-capture-web:

npm i yv-voice-capture-web

Import the component module into your .js file:

// If you use module bundler
import 'yv-voice-capture-web';

// If you don't use module bundler
import './node_modules/yv-voice-capture-web/js/dist/youverse-voice-capture.min.js';

Add the component name to the .html file.

<youverse-voice-capture 
    license="JWT_TOKEN"
    locale="en"
    max-duration="5"
></youverse-voice-capture>

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/yv-voice-capture-web@latest/js/dist/youverse-voice-capture.min.js"></script>

Add the component name to the .html file.

<youverse-voice-capture 
    license="JWT_TOKEN"
    locale="en"
    max-duration="5"
></youverse-voice-capture>

Attributes

Attribute | Info | Data type | Default Value | Values ------------------|------------------------------------------------------------------|---------------|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- license | JWT license token required to authorize the component | string | - | string (required) locale | The language of the component interface | string | en | en, pt, es, ru, de, pl, it, hu, zh, sk, uk, fr, ar, nl, id, vi, ko, ms, ro, el, tr, ja, cs, th, hi, bn, he, fi, sv, da, hr, no max-duration | Maximum recording duration in seconds | number | 5 | Any positive number title-text | Text for the component title. Translation based on the language selected | string | Voice verification | string
info-text | Text for the component info. Translation based on the language selected | string | Tap to record your voice | string

Events

You can subscribe to the component events.

For example:

document.addEventListener('YV_VOICE_EVENT', (event) => {
  console.log(event.detail);
  // event.detail contains:
  // - audio: Blob (WAV format)
  // - metadata: Object (for attestation)
  
  // Example: Download the recorded audio
  const url = URL.createObjectURL(event.detail.audio);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'recording.wav';
  a.click();
});

Type of events:

| Event | Description | Event Handling | |-------------------|---------------------------------------------|--------------------------------------------------| | YV_VOICE_EVENT| Event triggered when voice recording stops | Handled by a designated event listener in the application (listener) |

Event Detail Properties:

| Property | Type | Description | |--------------|----------|----------------------------------------| | audio | Blob | The recorded audio in WAV format | | metadata | Object | Metadata object for attestation |

Metadata Object Structure:

| Property | Type | Description | |---------------|----------|--------------------------------------------------| | session | string | Session identifier | | upload | Object | Upload metadata (hash, ts, nonce) | | signature | string | Cryptographic signature for verification |

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
     • audio: Captured audio data (base64 encoded)

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

For more information please contact us.