Callbacks

VIDTREO fornece callbacks para manipular eventos de gravação, progresso de upload e erros. Isso permite construir UIs responsivas e integrar com a lógica da sua aplicação.

Ciclo de Vida da Gravação

onRecordingStart

Dispara quando a gravação começa (após a contagem regressiva terminar).

<VidtreoRecorder
  onRecordingStart={() => {
    console.log('Gravação iniciada');
    setIsRecording(true);
    // Ocultar outros elementos de UI
    // Iniciar um timer
    // Registrar evento de analytics
  }}
/>

onRecordingStop

Dispara quando a gravação termina (antes do upload começar).

<VidtreoRecorder
  onRecordingStop={() => {
    console.log('Gravação parada');
    setIsRecording(false);
    setIsProcessing(true);
    // Mostrar indicador de processamento
  }}
/>

Eventos de Upload

onUploadProgress

Dispara periodicamente durante o upload com o valor de progresso (0-1).

<VidtreoRecorder
  onUploadProgress={(progress) => {
    // progress está entre 0 e 1
    const percent = Math.round(progress * 100);
    console.log(`Progresso do upload: ${percent}%`);
    setUploadProgress(percent);
  }}
/>

Exemplo de Barra de Progresso:

function Recorder() {
  const [progress, setProgress] = useState(0);
  const [isUploading, setIsUploading] = useState(false);

  return (
    <>
      <VidtreoRecorder
        onRecordingStop={() => setIsUploading(true)}
        onUploadProgress={(p) => setProgress(Math.round(p * 100))}
        onUploadComplete={() => setIsUploading(false)}
      />

      {isUploading && (
        <div className="progress-bar">
          <div
            className="progress-fill"
            style={{ width: `${progress}%` }}
          />
          <span>{progress}%</span>
        </div>
      )}
    </>
  );
}

onUploadComplete

Dispara quando o upload completa com sucesso.

<VidtreoRecorder
  onUploadComplete={(result) => {
    console.log('URL do Vídeo:', result.uploadUrl);
    console.log('ID da Gravação:', result.recordingId);

    // Salvar no seu banco de dados
    saveVideoToDatabase({
      url: result.uploadUrl,
      id: result.recordingId
    });

    // Mostrar mensagem de sucesso
    showNotification('Vídeo enviado com sucesso!');

    // Navegar para página do vídeo
    router.push(`/videos/${result.recordingId}`);
  }}
/>

Objeto Result:

interface UploadCompleteResult {
  uploadUrl: string;    // URL direta para o arquivo de vídeo
  recordingId: string;  // Identificador único da gravação
}

onUploadError

Dispara quando o upload falha.

<VidtreoRecorder
  onUploadError={(error) => {
    console.error('Upload falhou:', error.message);

    // Mostrar erro ao usuário
    showNotification('Upload falhou. Por favor tente novamente.', 'error');

    // Registrar em serviço de tracking de erros
    errorTracker.capture(error);

    // Oferecer opção de retry
    setShowRetryButton(true);
  }}
/>

Tratamento de Erros

onError

Dispara para qualquer erro durante o processo de gravação.

<VidtreoRecorder
  onError={(error) => {
    console.error('Erro do gravador:', error);

    // Tratar tipos específicos de erros
    if (error.message.includes('permission')) {
      showNotification('Por favor permita acesso à câmera');
    } else if (error.message.includes('NotSupported')) {
      showNotification('Seu navegador não suporta gravação');
    } else {
      showNotification('Ocorreu um erro');
    }
  }}
/>

Erros Comuns:

Erro	Causa	Solução
`NotAllowedError`	Usuário negou permissão de câmera/mic	Solicitar ao usuário que permita acesso
`NotFoundError`	Câmera ou microfone não encontrado	Verificar conexões de dispositivos
`NotSupportedError`	Navegador não suporta WebCodecs	Usar um navegador suportado
`OverconstrainedError`	Restrições solicitadas não satisfatórias	Usar restrições padrão
`Upload failed`	Erro de rede durante upload	Retry com backoff exponencial

Exemplo Completo

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

function VideoRecorderWithCallbacks() {
  const [status, setStatus] = useState<'idle' | 'recording' | 'uploading' | 'complete' | 'error'>('idle');
  const [progress, setProgress] = useState(0);
  const [videoUrl, setVideoUrl] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  return (
    <div className="recorder-container">
      <VidtreoRecorder
        apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
        lang="pt"
        onRecordingStart={() => {
          setStatus('recording');
          setError(null);
        }}
        onRecordingStop={() => {
          setStatus('uploading');
        }}
        onUploadProgress={(p) => {
          setProgress(Math.round(p * 100));
        }}
        onUploadComplete={(result) => {
          setStatus('complete');
          setVideoUrl(result.uploadUrl);
          setProgress(0);
        }}
        onUploadError={(err) => {
          setStatus('error');
          setError(`Upload falhou: ${err.message}`);
        }}
        onError={(err) => {
          setStatus('error');
          setError(err.message);
        }}
      />

      {/* Indicador de status */}
      <div className="status">
        {status === 'idle' && <span>Pronto para gravar</span>}
        {status === 'recording' && <span className="recording">● Gravando</span>}
        {status === 'uploading' && <span>Enviando: {progress}%</span>}
        {status === 'complete' && <span className="success">✓ Completo</span>}
        {status === 'error' && <span className="error">✗ {error}</span>}
      </div>

      {/* Resultado do vídeo */}
      {videoUrl && (
        <div className="result">
          <video src={videoUrl} controls />
          <a href={videoUrl} download>Baixar Vídeo</a>
        </div>
      )}
    </div>
  );
}

Eventos do Web Component

Para Web Components, use addEventListener:

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) => {
  console.log('Progresso:', e.detail.progress);
});

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

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

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

Callbacks do Hook

Quando usar useVidtreoRecorder, passe callbacks para a configuração:

const { state, actions } = useVidtreoRecorder({
  apiKey: '...',
  onRecordingStart: () => console.log('Iniciado'),
  onRecordingStop: () => console.log('Parado'),
  onUploadProgress: (p) => console.log(`${p * 100}%`),
  onUploadComplete: (result) => console.log(result.uploadUrl),
  onUploadError: (error) => console.error(error),
  onError: (error) => console.error(error),
});

Callbacks são opcionais. O SDK manipula toda a lógica de gravação e upload automaticamente. Use callbacks para atualizar sua UI ou integrar com sua aplicação.

Próximos Passos

Opções de Configuração — Todas as configurações
Personalização — Estilos
Exemplos — Exemplos funcionais

Callbacks

Nesta página