@vidtreo/recorder-wc

Web component package for the Vidtreo video recording SDK. This package provides a ready-to-use custom element () that can be embedded in any HTML page without a framework.

Installation

``bash npm install @vidtreo/recorder-wc`

Peer Dependencies: -@vidtreo/recorder >=1.0.5

`Quick Start`

`$3`

`html

api-key="your-api-key" backend-url="https://core.vidtreo.com" >`

`$3`

#### Specific Version (Recommended for Production)

`html

api-key="your-api-key" >`

#### Latest Version (Use with Caution)

`html`

`Component API`

`$3`

All attributes are optional except where noted. Attributes use kebab-case (e.g., api-key instead of apiKey).

| Attribute | Type | Required | Default | Description | |-----------|------|----------|---------|-------------| |api-key | string| No* | - | API key for authentication. Required if not set via JavaScript. | |backend-url | string | No | https://core.vidtreo.com | Backend API URL. Automatically adds https://prefix if missing. | |countdown-duration | number | No | - | Countdown duration in milliseconds before recording starts (e.g., 3000for 3 seconds) | |max-recording-time | number | No | - | Maximum recording time in milliseconds (e.g., 300000for 5 minutes) | |user-metadata | string(JSON) | No | - | Custom metadata to attach to recordings. Must be valid JSON string. | |enable-source-switching | boolean | No | true | Enable switching between camera and screen during recording. Set to "false"to disable. | |enable-mute | boolean | No | true | Enable mute/unmute functionality. Set to "false"to disable. | |enable-pause | boolean | No | true | Enable pause/resume functionality. Set to "false"to disable. | |enable-device-change | boolean | No | true | Enable camera/microphone selection. Set to "false"to disable. | |lang | string | No | "en" | Language code for UI text ("en" or "es") | |mobile-mode | string | No | "overlay" | Mobile recording mode. Options: "overlay" (fullscreen modal), "embed" (inline), "native"(device camera app via file input). | |texts | string(JSON) | No | - | Custom text overrides for localization. Must be valid JSON string. | |watermark | string (JSON) | No | - | Watermark configuration. Must be valid JSON string. |

Watermark JSON Structure:`json { "url": "https://example.com/logo.png", "position": "bottom-right", "opacity": 0.5 }`

Note: Boolean attributes are enabled by default. To disable them, set the attribute value to "false" (string).

`$3`

#### Basic Usage

`html

api-key="your-api-key" backend-url="https://core.vidtreo.com" >`

#### With Countdown and Max Recording Time

`html api-key="your-api-key" backend-url="https://core.vidtreo.com" countdown-duration="3000" max-recording-time="300000" >`

#### With Custom Metadata

`html api-key="your-api-key" backend-url="https://core.vidtreo.com" user-metadata='{"userId": "12345", "sessionId": "abc123"}' >`

#### Disable Features

`html api-key="your-api-key" backend-url="https://core.vidtreo.com" enable-source-switching="false" enable-mute="false" enable-pause="false" enable-device-change="false" >`

#### Minimal Configuration (Only Recording)

`html api-key="your-api-key" backend-url="https://core.vidtreo.com" enable-source-switching="false" enable-mute="false" enable-pause="false" enable-device-change="false" >`

`Mobile Mode`

The web component supports three mobile recording modes:

`$3`

Opens a fullscreen modal when the user taps "Open Camera". Best for focused recording experiences.

`html api-key="your-api-key" mobile-mode="overlay" >`

`$3`

Renders the recorder inline within your page. Best when the recorder is the main content.

`html api-key="your-api-key" mobile-mode="embed" >`

`$3`

Uses the device's native camera app via file input. Best for maximum compatibility, especially on iOS Safari.

`html api-key="your-api-key" mobile-mode="native" >`

| Mode | UI | Best For | |------|-----|----------| |overlay| SDK fullscreen modal | Focused recording experience | |embed| SDK inline | Main page content | |native | Device camera app | iOS Safari compatibility |

`Programmatic Access`

The web component exposes methods and properties that can be accessed via JavaScript for advanced use cases.

`$3`

`javascript const recorder = document.querySelector('vidtreo-recorder');`

`$3`

#### Recording Control

- startRecording()- Start recording (returns Promise) -stopRecording()- Stop recording and upload (returns Promise) -pauseRecording()- Pause the current recording -resumeRecording()- Resume a paused recording -processVideo() - Process the recorded video (returns Promise)

#### Source Control

- toggleSource()- Switch between camera and screen (returns Promise) -toggleMute()- Toggle mute/unmute state -toggleSettings() - Show/hide device settings panel

#### Device Management

- handleCameraChange(deviceId: string)- Change camera device (returns Promise) -handleMicChange(deviceId: string) - Change microphone device (returns Promise)

#### Video Playback

- playVideo()- Play the processed video in a new window -downloadVideo() - Download the processed video

#### Initialization

- startCamera() - Start camera preview (returns Promise)

`$3`

`html id="my-recorder" api-key="your-api-key" backend-url="https://core.vidtreo.com" >

`$3`

`html id="my-recorder" api-key="your-api-key" backend-url="https://core.vidtreo.com" >

`$3`

`html id="my-recorder" api-key="your-api-key" backend-url="https://core.vidtreo.com" >

`Advanced Examples`

`$3`

The web component uses Shadow DOM, so styles are encapsulated. However, you can style the container:

`html

api-key="your-api-key" backend-url="https://core.vidtreo.com" >`

`$3`

`html


      id="recorder"
    api-key="your-api-key"
    backend-url="https://core.vidtreo.com"
  >

`$3`

For Vite projects, you can use environment variables:

`bash

`.env`


VITE_VIDTREO_API_KEY=your-api-key
VITE_VIDTREO_BACKEND_URL=https://core.vidtreo.com

`html

`Package Structure`

This package contains: -dist/vidtreo-recorder.js- The web component JavaScript bundle (includes inlined CSS for Shadow DOM support) -dist/vidtreo-recorder.d.ts - TypeScript declaration files

Note: CSS is inlined in the JavaScript bundle to support Shadow DOM encapsulation. No separate stylesheet file is needed.

The core SDK functionality is provided by the @vidtreo/recorder package, which is automatically installed as a peer dependency.

`Why Separate Packages?`

- Smaller SDK Package: Users who only need the programmatic SDK don't download web component files - CDN Optimization: Web component users can use jsDelivr CDN for faster loading - Clear Separation: Web component and SDK have independent versioning and distribution - Framework Agnostic: Web components work with any framework or vanilla JavaScript

`Browser Support`

The web component requires modern browser features: - Custom Elements API - Shadow DOM - MediaStream API - ES2022 JavaScript features

Supported browsers: - Chrome/Edge 90+ - Firefox 88+ - Safari 14+

`Internationalization (i18n)`

The web component supports multiple languages and custom text overrides, making it easy to localize the recorder interface for your users.

`$3`

- English (en) - Default - Spanish (es)

`$3`

#### Using Built-in Languages

`html api-key="your-api-key" backend-url="https://your-backend.com" >

api-key="your-api-key" backend-url="https://your-backend.com" lang="es" >`

#### Custom Text Overrides

Override any text by passing a JSON string to the texts attribute:

`html api-key="your-api-key" backend-url="https://your-backend.com" lang="en" texts='{"record": "Start Recording", "stop": "End Recording"}' >`

#### Complete Custom Translations (e.g., French)

`html api-key="your-api-key" backend-url="https://your-backend.com" lang="fr" texts='{ "title": "Enregistreur Vidéo", "subtitle": "Enregistrez une vidéo depuis votre caméra", "initializingCamera": "Initialisation de la caméra...", "grantPermissions": "Accordez les autorisations", "record": "Enregistrer", "stop": "Arrêter", "pause": "Pause", "resume": "Reprendre", "settings": "Paramètres", "camera": "Caméra", "microphone": "Microphone" }' >`

`$3`

Change the language dynamically using JavaScript:

`javascript const recorder = document.querySelector('vidtreo-recorder');

// Change to Spanish recorder.setAttribute('lang', 'es');

// Override specific texts recorder.setAttribute('texts', JSON.stringify({ record: 'Iniciar Grabación', stop: 'Finalizar' }));`

`$3`

| Key | English Default | Spanish Default | |-----|----------------|-----------------| |title| Video Recorder | Grabador de Video | |subtitle| Record video from your camera and transcode it to MP4 format | Graba video desde tu cámara y transcodifícalo a formato MP4 | |initializingCamera| Initializing camera... | Inicializando cámara... | |grantPermissions| Grant camera and microphone permissions when prompted | Otorga permisos de cámara y micrófono cuando se solicite | |retryCamera| Retry Camera | Reintentar Cámara | |switchingDevice| Switching device... | Cambiando dispositivo... | |recordingStartsIn| Recording starts in... | La grabación comienza en... | |switchingSource| Switching source... | Cambiando fuente... | |rec| REC | GRAB | |settings| Settings | Configuración | |record| Record | Grabar | |stop| Stop | Detener | |pause| Pause | Pausar | |resume| Resume | Reanudar | |mute| Mute | Silenciar | |unmute| Unmute | Activar sonido | |switchSource| Switch Source | Cambiar Fuente | |camera| Camera | Cámara | |microphone| Microphone | Micrófono | |processVideo| Process Video | Procesar Video | |processing| Processing... | Procesando... | |uploading| Uploading... | Subiendo... | |switchingCamera| Switching camera... | Cambiando cámara... | |switchingMicrophone| Switching microphone... | Cambiando micrófono... | |failedToStartCamera | Failed to start camera | Error al iniciar la cámara |

`$3`

`html

id="recorder" api-key="your-api-key" backend-url="https://your-backend.com" lang="en" >

`$3`

Use a base language but override specific texts:

`html api-key="your-api-key" backend-url="https://your-backend.com" lang="en" texts='{"record": "🔴 Start Capture", "stop": "⏹️ End Capture"}' >``

License

MIT

@vidtreo/recorder-wc

Web component package for the Vidtreo video recording SDK. This package provides a ready-to-use custom element () that can be embedded in any HTML page without a framework.

Installation

``bash npm install @vidtreo/recorder-wc`

Peer Dependencies: -@vidtreo/recorder >=1.0.5

`Quick Start`

`$3`

`html

api-key="your-api-key" backend-url="https://core.vidtreo.com" >`

`$3`

#### Specific Version (Recommended for Production)

`html

api-key="your-api-key" >`

#### Latest Version (Use with Caution)

`html`

`Component API`

`$3`

All attributes are optional except where noted. Attributes use kebab-case (e.g., api-key instead of apiKey).

Watermark JSON Structure:`json { "url": "https://example.com/logo.png", "position": "bottom-right", "opacity": 0.5 }`

Note: Boolean attributes are enabled by default. To disable them, set the attribute value to "false" (string).

`$3`

#### Basic Usage

`html

api-key="your-api-key" backend-url="https://core.vidtreo.com" >`

#### With Countdown and Max Recording Time

`html api-key="your-api-key" backend-url="https://core.vidtreo.com" countdown-duration="3000" max-recording-time="300000" >`

#### With Custom Metadata

`html api-key="your-api-key" backend-url="https://core.vidtreo.com" user-metadata='{"userId": "12345", "sessionId": "abc123"}' >`

#### Disable Features

`html api-key="your-api-key" backend-url="https://core.vidtreo.com" enable-source-switching="false" enable-mute="false" enable-pause="false" enable-device-change="false" >`

#### Minimal Configuration (Only Recording)

`html api-key="your-api-key" backend-url="https://core.vidtreo.com" enable-source-switching="false" enable-mute="false" enable-pause="false" enable-device-change="false" >`

`Mobile Mode`

The web component supports three mobile recording modes:

`$3`

Opens a fullscreen modal when the user taps "Open Camera". Best for focused recording experiences.

`html api-key="your-api-key" mobile-mode="overlay" >`

`$3`

Renders the recorder inline within your page. Best when the recorder is the main content.

`html api-key="your-api-key" mobile-mode="embed" >`

`$3`

Uses the device's native camera app via file input. Best for maximum compatibility, especially on iOS Safari.

`html api-key="your-api-key" mobile-mode="native" >`

`Programmatic Access`

The web component exposes methods and properties that can be accessed via JavaScript for advanced use cases.

`$3`

`javascript const recorder = document.querySelector('vidtreo-recorder');`

`$3`

#### Recording Control

#### Source Control

- toggleSource()- Switch between camera and screen (returns Promise) -toggleMute()- Toggle mute/unmute state -toggleSettings() - Show/hide device settings panel

#### Device Management

- handleCameraChange(deviceId: string)- Change camera device (returns Promise) -handleMicChange(deviceId: string) - Change microphone device (returns Promise)

#### Video Playback

- playVideo()- Play the processed video in a new window -downloadVideo() - Download the processed video

#### Initialization

- startCamera() - Start camera preview (returns Promise)

`$3`

`html id="my-recorder" api-key="your-api-key" backend-url="https://core.vidtreo.com" >

`$3`

`html id="my-recorder" api-key="your-api-key" backend-url="https://core.vidtreo.com" >

`$3`

`html id="my-recorder" api-key="your-api-key" backend-url="https://core.vidtreo.com" >

`Advanced Examples`

`$3`

The web component uses Shadow DOM, so styles are encapsulated. However, you can style the container:

`html

api-key="your-api-key" backend-url="https://core.vidtreo.com" >`

`$3`

`html


      id="recorder"
    api-key="your-api-key"
    backend-url="https://core.vidtreo.com"
  >

`$3`

For Vite projects, you can use environment variables:

`bash

`.env`


VITE_VIDTREO_API_KEY=your-api-key
VITE_VIDTREO_BACKEND_URL=https://core.vidtreo.com

`html

`Package Structure`

This package contains: -dist/vidtreo-recorder.js- The web component JavaScript bundle (includes inlined CSS for Shadow DOM support) -dist/vidtreo-recorder.d.ts - TypeScript declaration files

Note: CSS is inlined in the JavaScript bundle to support Shadow DOM encapsulation. No separate stylesheet file is needed.

The core SDK functionality is provided by the @vidtreo/recorder package, which is automatically installed as a peer dependency.

`Why Separate Packages?`

`Browser Support`

The web component requires modern browser features: - Custom Elements API - Shadow DOM - MediaStream API - ES2022 JavaScript features

Supported browsers: - Chrome/Edge 90+ - Firefox 88+ - Safari 14+

`Internationalization (i18n)`

The web component supports multiple languages and custom text overrides, making it easy to localize the recorder interface for your users.

`$3`

- English (en) - Default - Spanish (es)

`$3`

#### Using Built-in Languages

`html api-key="your-api-key" backend-url="https://your-backend.com" >

api-key="your-api-key" backend-url="https://your-backend.com" lang="es" >`

#### Custom Text Overrides

Override any text by passing a JSON string to the texts attribute:

`html api-key="your-api-key" backend-url="https://your-backend.com" lang="en" texts='{"record": "Start Recording", "stop": "End Recording"}' >`

#### Complete Custom Translations (e.g., French)

`$3`

Change the language dynamically using JavaScript:

`javascript const recorder = document.querySelector('vidtreo-recorder');

// Change to Spanish recorder.setAttribute('lang', 'es');

// Override specific texts recorder.setAttribute('texts', JSON.stringify({ record: 'Iniciar Grabación', stop: 'Finalizar' }));`

`$3`

`html

id="recorder" api-key="your-api-key" backend-url="https://your-backend.com" lang="en" >

`$3`

Use a base language but override specific texts:

`html api-key="your-api-key" backend-url="https://your-backend.com" lang="en" texts='{"record": "🔴 Start Capture", "stop": "⏹️ End Capture"}' >``

License

MIT

@vidtreo/recorder-wc

Dist Tags

@vidtreo/recorder-wc

Installation

Quick Start

$3

$3

Component API

$3

$3

Mobile Mode

$3

$3

$3

Programmatic Access

$3

$3

$3

$3

$3

Advanced Examples

$3

$3

$3

.env

Package Structure

Why Separate Packages?

Browser Support

Internationalization (i18n)

$3

$3

$3

$3

$3

$3

License

@vidtreo/recorder-wc

Dist Tags

@vidtreo/recorder-wc

Installation

Quick Start

$3

$3

Component API

$3

$3

Mobile Mode

$3

$3

$3

Programmatic Access

$3

$3

$3

$3

$3

Advanced Examples

$3

$3

$3

.env

Package Structure

Why Separate Packages?

Browser Support

Internationalization (i18n)

$3

$3

$3

$3

$3

$3

License

`Quick Start`

`$3`

`$3`

`Component API`

`$3`

`$3`

`Mobile Mode`

`$3`

`$3`

`$3`

`Programmatic Access`

`$3`

`$3`

`$3`

`$3`

`$3`

`Advanced Examples`

`$3`

`$3`

`$3`

`.env`

`Package Structure`

`Why Separate Packages?`

`Browser Support`

`Internationalization (i18n)`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`Quick Start`

`$3`

`$3`

`Component API`

`$3`

`$3`

`Mobile Mode`

`$3`

`$3`

`$3`

`Programmatic Access`

`$3`

`$3`

`$3`

`$3`

`$3`

`Advanced Examples`

`$3`

`$3`

`$3`

`.env`

`Package Structure`

`Why Separate Packages?`

`Browser Support`

`Internationalization (i18n)`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`