Use VIDTREO com qualquer framework ou HTML vanilla usando o elemento personalizado.

Web Component

O pacote @vidtreo/recorder-wc fornece um Web Component agnóstico de framework que funciona com Vue, Angular, Svelte ou HTML puro.

Instalação

Via npm

npm install @vidtreo/recorder-wc

Via CDN (Sem Build)

<script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/recorder-wc@latest/dist/vidtreo-recorder.js"></script>

Uso Básico

HTML

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/recorder-wc@latest/dist/vidtreo-recorder.js"></script>
</head>
<body>
  <vidtreo-recorder
    api-key="sua-api-key"
    lang="pt"
  ></vidtreo-recorder>

  <script>
    const recorder = document.querySelector('vidtreo-recorder');

    recorder.addEventListener('upload-complete', (event) => {
      console.log('URL do Vídeo:', event.detail.uploadUrl);
      console.log('ID da Gravação:', event.detail.recordingId);
    });

    recorder.addEventListener('error', (event) => {
      console.error('Erro:', event.detail);
    });
  </script>
</body>
</html>

Vue.js

<template>
  <vidtreo-recorder
    :api-key="apiKey"
    lang="pt"
    @upload-complete="handleUploadComplete"
    @error="handleError"
  />
</template>

<script setup>
import '@vidtreo/recorder-wc';

const apiKey = import.meta.env.VITE_VIDTREO_API_KEY;

function handleUploadComplete(event) {
  console.log('URL do Vídeo:', event.detail.uploadUrl);
}

function handleError(event) {
  console.error('Erro:', event.detail);
}
</script>

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import '@vidtreo/recorder-wc';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ...
})
export class AppModule {}

<!-- recorder.component.html -->
<vidtreo-recorder
  [attr.api-key]="apiKey"
  lang="pt"
  (upload-complete)="onUploadComplete($event)"
  (error)="onError($event)"
></vidtreo-recorder>

Svelte

<script>
  import '@vidtreo/recorder-wc';

  const apiKey = import.meta.env.VITE_VIDTREO_API_KEY;

  function handleUploadComplete(event) {
    console.log('URL do Vídeo:', event.detail.uploadUrl);
  }

  function handleError(event) {
    console.error('Erro:', event.detail);
  }
</script>

<vidtreo-recorder
  api-key={apiKey}
  lang="pt"
  on:upload-complete={handleUploadComplete}
  on:error={handleError}
/>

Atributos

Todos os atributos usam kebab-case (convenção HTML):

Atributo	Tipo	Padrão	Descrição
`api-key`	`string`	obrigatório	Sua API key do VIDTREO
`backend-url`	`string`	`https://core.vidtreo.com`	Endpoint da API
`countdown-duration`	`number`	`3000`	Contagem regressiva (ms)
`max-recording-time`	`number`	`undefined`	Duração máxima (ms)
`user-metadata`	`string`	`undefined`	JSON string de metadados
`enable-source-switching`	`boolean`	`true`	Alternar câmera/tela
`enable-mute`	`boolean`	`true`	Botão de mudo
`enable-pause`	`boolean`	`true`	Pausar/retomar
`enable-device-change`	`boolean`	`true`	Seleção de dispositivos
`mobile-mode`	`string`	`"overlay"`	Modo móvel: `"overlay"`, `"embed"`, `"native"`
`lang`	`string`	`"en"`	Idioma da UI
`texts`	`string`	`undefined`	JSON string de textos personalizados

Definir Atributos Dinamicamente

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

// Atributos simples
recorder.setAttribute('lang', 'pt');
recorder.setAttribute('max-recording-time', '120000');

// Atributos JSON (metadados e textos)
recorder.setAttribute('user-metadata', JSON.stringify({
  userId: 'user-123',
  sessionId: 'session-456'
}));

recorder.setAttribute('texts', JSON.stringify({
  record: 'Iniciar Captura',
  stop: 'Finalizar Captura'
}));

Eventos

Escute eventos usando addEventListener ou sintaxe específica do framework:

Evento	Detalhe	Descrição
`recording-start`	`{}`	Gravação iniciada
`recording-stop`	`{}`	Gravação parada
`upload-progress`	`{ progress: number }`	Progresso do upload (0-1)
`upload-complete`	`{ uploadUrl, recordingId }`	Upload finalizado
`upload-error`	`{ error: Error }`	Upload falhou
`error`	`{ error: Error }`	Qualquer erro

Exemplos de Eventos

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

recorder.addEventListener('recording-start', () => {
  console.log('Gravação iniciada');
});

recorder.addEventListener('recording-stop', () => {
  console.log('Gravação parada');
});

recorder.addEventListener('upload-progress', (e) => {
  const percent = Math.round(e.detail.progress * 100);
  console.log(`Progresso do upload: ${percent}%`);
});

recorder.addEventListener('upload-complete', (e) => {
  console.log('URL do Vídeo:', e.detail.uploadUrl);
  console.log('ID da Gravação:', e.detail.recordingId);
});

recorder.addEventListener('error', (e) => {
  console.error('Erro:', e.detail.error);
});

Métodos

Controle o gravador programaticamente:

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

// Iniciar prévia da câmera
await recorder.startCamera();

// Controles de gravação
await recorder.startRecording();
await recorder.stopRecording();
recorder.pauseRecording();
recorder.resumeRecording();

// Controles de fonte
await recorder.toggleSource();  // Trocar câmera/tela
recorder.toggleMute();

// Controles de dispositivos
await recorder.handleCameraChange('device-id');
await recorder.handleMicChange('device-id');

// Painel de configurações
recorder.toggleSettings();

// Reprodução de vídeo (após gravar)
recorder.playVideo();
recorder.downloadVideo();

// Processar vídeo (transcodificação)
await recorder.processVideo();

Estilos

O Web Component é renderizado no light DOM (sem Shadow DOM), então sua estrutura pode ser estilizada com CSS normal. Estilize o container:

vidtreo-recorder {
  /* Dimensões do container */
  width: 100%;
  max-width: 640px;
  height: 480px;

  /* Estilos do container */
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Propriedades CSS Personalizadas (Em Breve)

vidtreo-recorder {
  --vidtreo-primary-color: #3b82f6;
  --vidtreo-background: #1f2937;
  --vidtreo-text-color: #ffffff;
  --vidtreo-border-radius: 8px;
}

Internacionalização

Idiomas Integrados

<!-- Inglês (padrão) -->
<vidtreo-recorder api-key="..." lang="en"></vidtreo-recorder>

<!-- Espanhol -->
<vidtreo-recorder api-key="..." lang="es"></vidtreo-recorder>

<!-- Português -->
<vidtreo-recorder api-key="..." lang="pt"></vidtreo-recorder>

Textos Personalizados

<vidtreo-recorder
  api-key="..."
  lang="pt"
  texts='{"record": "Iniciar Captura", "stop": "Finalizar Captura", "uploading": "Enviando..."}'
></vidtreo-recorder>

Chaves de Texto Disponíveis

Chave	Padrão (Português)
`title`	Gravar Vídeo
`subtitle`	Clique em gravar para começar
`initializingCamera`	Inicializando câmera...
`grantPermissions`	Por favor conceda permissões de câmera
`retryCamera`	Tentar Novamente
`switchingDevice`	Trocando dispositivo...
`recordingStartsIn`	A gravação começa em
`switchingSource`	Trocando fonte...
`rec`	REC
`settings`	Configurações
`record`	Gravar
`stop`	Parar
`pause`	Pausar
`resume`	Retomar
`mute`	Silenciar
`unmute`	Ativar Áudio
`switchSource`	Trocar Fonte
`camera`	Câmera
`microphone`	Microfone
`processVideo`	Processar Vídeo
`processing`	Processando...
`uploading`	Enviando...
`switchingCamera`	Trocando câmera...
`switchingMicrophone`	Trocando microfone...
`failedToStartCamera`	Falha ao iniciar câmera

Exemplo Completo

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gravador de Vídeo</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/recorder-wc@latest/dist/vidtreo-recorder.js"></script>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }

    vidtreo-recorder {
      width: 100%;
      max-width: 640px;
      height: 480px;
      display: block;
      margin: 0 auto;
      border-radius: 12px;
      overflow: hidden;
    }

    .result {
      margin-top: 2rem;
      text-align: center;
    }

    .result video {
      max-width: 100%;
      border-radius: 8px;
    }

    .progress {
      margin-top: 1rem;
      text-align: center;
    }

    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <h1>Grave seu Vídeo</h1>

  <vidtreo-recorder
    id="recorder"
    api-key="sua-api-key"
    enable-source-switching="true"
    enable-mute="true"
    enable-pause="true"
    enable-device-change="true"
    max-recording-time="120000"
    countdown-duration="3000"
    lang="pt"
  ></vidtreo-recorder>

  <div id="progress" class="progress hidden">
    <p>Enviando: <span id="percent">0</span>%</p>
  </div>

  <div id="result" class="result hidden">
    <h2>Gravação Completa!</h2>
    <video id="video" controls></video>
    <p><a id="link" href="#" target="_blank">Abrir em nova aba</a></p>
  </div>

  <script>
    const recorder = document.getElementById('recorder');
    const progress = document.getElementById('progress');
    const percent = document.getElementById('percent');
    const result = document.getElementById('result');
    const video = document.getElementById('video');
    const link = document.getElementById('link');

    recorder.addEventListener('recording-start', () => {
      result.classList.add('hidden');
    });

    recorder.addEventListener('upload-progress', (e) => {
      progress.classList.remove('hidden');
      percent.textContent = Math.round(e.detail.progress * 100);
    });

    recorder.addEventListener('upload-complete', (e) => {
      progress.classList.add('hidden');
      result.classList.remove('hidden');
      video.src = e.detail.uploadUrl;
      link.href = e.detail.uploadUrl;
    });

    recorder.addEventListener('error', (e) => {
      progress.classList.add('hidden');
      alert('Erro: ' + e.detail.error.message);
    });
  </script>
</body>
</html>

Suporte TypeScript

Para projetos TypeScript, adicione declarações de tipos:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'vidtreo-recorder': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          'api-key'?: string;
          'backend-url'?: string;
          'countdown-duration'?: string;
          'max-recording-time'?: string;
          'user-metadata'?: string;
          'enable-source-switching'?: string;
          'enable-mute'?: string;
          'enable-pause'?: string;
          'enable-device-change'?: string;
          'lang'?: string;
          'texts'?: string;
        },
        HTMLElement
      >;
    }
  }
}

Próximos Passos

Opções de Configuração — Todas as configurações
Referência de Callbacks — Manipulação de eventos
Exemplos — Mais exemplos

Componente Web