Início Rápido

Comece a usar o VIDTREO em menos de 5 minutos. Este guia irá orientá-lo através do processo de gravação e upload do seu primeiro vídeo.

Instale o SDK

Escolha seu método de integração e instale o pacote:

npm install @vidtreo/recorder-react @vidtreo/recorder

npm install @vidtreo/recorder-wc

npm install @vidtreo/recorder

Obtenha sua API Key

Faça login no Dashboard VIDTREO
Navegue até Configurações → API Keys
Clique em Criar Nova Key
Copie sua API key

Mantenha sua API key segura. Nunca a exponha em código do cliente para aplicações em produção. Use variáveis de ambiente em vez disso.

Adicione o Gravador

import { VidtreoRecorder } from '@vidtreo/recorder-react';

function VideoRecorder() {
  return (
    <VidtreoRecorder
      apiKey="sua-api-key"
      onUploadComplete={(result) => {
        console.log('URL do Vídeo:', result.uploadUrl);
        console.log('ID da Gravação:', result.recordingId);
      }}
      onError={(error) => {
        console.error('Erro de gravação:', error);
      }}
    />
  );
}

export default VideoRecorder;

<!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"
    id="recorder"
  ></vidtreo-recorder>

  <script>
    const recorder = document.getElementById('recorder');

    recorder.addEventListener('upload-complete', (e) => {
      console.log('URL do Vídeo:', e.detail.uploadUrl);
    });

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

import { VidtreoRecorder } from '@vidtreo/recorder';

const recorder = new VidtreoRecorder({
  apiKey: 'sua-api-key',
  onUploadComplete: (result) => {
    console.log('URL do Vídeo:', result.uploadUrl);
  },
  onError: (error) => {
    console.error('Erro:', error);
  }
});

// Inicializar e começar preview
await recorder.initialize();
const stream = await recorder.startPreview();

// Conectar stream ao elemento vídeo
const videoElement = document.querySelector('video');
videoElement.srcObject = stream;

// Iniciar gravação
await recorder.startRecording();

// Parar gravação (chamar quando terminar)
const result = await recorder.stopRecording();
console.log('Gravação completa:', result);

Grave um Vídeo

Conceda Permissões: Permita acesso à câmera e microfone quando solicitado
Preview: Veja-se na prévia do vídeo
Gravar: Clique no botão de gravar para começar
Parar: Clique em parar quando terminar
Upload: O vídeo é enviado automaticamente para o VIDTREO

O callback onUploadComplete é disparado quando seu vídeo está pronto com:

uploadUrl: URL direta para seu vídeo
recordingId: Identificador único da gravação

Exemplo Completo em React

Aqui está um exemplo completo com todos os recursos comuns:

import { VidtreoRecorder } from '@vidtreo/recorder-react';
import { useState } from 'react';

function App() {
  const [videoUrl, setVideoUrl] = useState<string | null>(null);
  const [isUploading, setIsUploading] = useState(false);

  return (
    <div className="app">
      <h1>Gravador de Vídeo</h1>

      <VidtreoRecorder
        apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
        enableSourceSwitching={true}
        enableMute={true}
        enablePause={true}
        enableDeviceChange={true}
        maxRecordingTime={300000} // 5 minutos
        countdownDuration={3000}   // contagem regressiva de 3 segundos
        lang="pt"
        onRecordingStart={() => {
          console.log('Gravação iniciada');
          setVideoUrl(null);
        }}
        onRecordingStop={() => {
          console.log('Gravação parada');
          setIsUploading(true);
        }}
        onUploadProgress={(progress) => {
          console.log(`Progresso do upload: ${Math.round(progress * 100)}%`);
        }}
        onUploadComplete={(result) => {
          setVideoUrl(result.uploadUrl);
          setIsUploading(false);
          console.log('Upload completo!', result);
        }}
        onError={(error) => {
          console.error('Erro:', error);
          setIsUploading(false);
        }}
      />

      {isUploading && <p>Enviando vídeo...</p>}

      {videoUrl && (
        <div className="result">
          <h2>Seu Vídeo</h2>
          <video src={videoUrl} controls />
          <a href={videoUrl} target="_blank">Abrir em nova aba</a>
        </div>
      )}
    </div>
  );
}

export default App;

O Que Vem a Seguir?

Integração React — Guia completo de React com hooks
Web Component — Guia agnóstico de framework
Core SDK — Construa UIs personalizadas

Opções de Configuração — Todas as configurações disponíveis
Callbacks — Manipule eventos e mudanças de estado
Personalização — Estilos e temas

Gravação de Tela — Capture tela e abas
UI Personalizada — Construa sua própria interface
Uso Avançado — Suporte offline, lógica de retry

Início Rápido

Início Rápido

Instale o SDK

Obtenha sua API Key

Adicione o Gravador

Grave um Vídeo

Exemplo Completo em React

O Que Vem a Seguir?

Nesta página