Callbacks

VIDTREO proporciona callbacks para manejar eventos de grabación, progreso de subida y errores. Esto te permite construir UIs responsivas e integrar con la lógica de tu aplicación.

Ciclo de Vida de Grabación

onRecordingStart

Se dispara cuando la grabación comienza (después de que termina la cuenta regresiva).

<VidtreoRecorder
  onRecordingStart={() => {
    console.log('Grabación iniciada');
    setIsRecording(true);
    // Ocultar otros elementos de UI
    // Iniciar un temporizador
    // Registrar evento de analytics
  }}
/>

onRecordingStop

Se dispara cuando la grabación termina (antes de que comience la subida).

<VidtreoRecorder
  onRecordingStop={() => {
    console.log('Grabación detenida');
    setIsRecording(false);
    setIsProcessing(true);
    // Mostrar indicador de procesamiento
  }}
/>

Eventos de Subida

onUploadProgress

Se dispara periódicamente durante la subida con el valor de progreso (0-1).

<VidtreoRecorder
  onUploadProgress={(progress) => {
    // progress está entre 0 y 1
    const percent = Math.round(progress * 100);
    console.log(`Progreso de subida: ${percent}%`);
    setUploadProgress(percent);
  }}
/>

Ejemplo de Barra de Progreso:

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

Se dispara cuando la subida se completa exitosamente.

<VidtreoRecorder
  onUploadComplete={(result) => {
    console.log('URL del Video:', result.uploadUrl);
    console.log('ID de Grabación:', result.recordingId);

    // Guardar en tu base de datos
    saveVideoToDatabase({
      url: result.uploadUrl,
      id: result.recordingId
    });

    // Mostrar mensaje de éxito
    showNotification('¡Video subido exitosamente!');

    // Navegar a la página del video
    router.push(`/videos/${result.recordingId}`);
  }}
/>

Objeto Result:

interface UploadCompleteResult {
  uploadUrl: string;    // URL directa al archivo de video
  recordingId: string;  // Identificador único de la grabación
}

onUploadError

Se dispara cuando la subida falla.

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

    // Mostrar error al usuario
    showNotification('La subida falló. Por favor intenta de nuevo.', 'error');

    // Registrar en servicio de tracking de errores
    errorTracker.capture(error);

    // Ofrecer opción de reintentar
    setShowRetryButton(true);
  }}
/>

Manejo de Errores

onError

Se dispara para cualquier error durante el proceso de grabación.

<VidtreoRecorder
  onError={(error) => {
    console.error('Error del grabador:', error);

    // Manejar tipos específicos de errores
    if (error.message.includes('permission')) {
      showNotification('Por favor permite el acceso a la cámara');
    } else if (error.message.includes('NotSupported')) {
      showNotification('Tu navegador no soporta grabación');
    } else {
      showNotification('Ocurrió un error');
    }
  }}
/>

Errores Comunes:

Error	Causa	Solución
`NotAllowedError`	Usuario denegó permiso de cámara/mic	Solicitar al usuario que permita acceso
`NotFoundError`	No se encontró cámara o micrófono	Verificar conexiones de dispositivos
`NotSupportedError`	Navegador no soporta WebCodecs	Usar un navegador soportado
`OverconstrainedError`	Restricciones solicitadas no satisfacibles	Usar restricciones por defecto
`Upload failed`	Error de red durante subida	Reintentar con backoff exponencial

Ejemplo 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="es"
        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(`Subida fallida: ${err.message}`);
        }}
        onError={(err) => {
          setStatus('error');
          setError(err.message);
        }}
      />

      {/* Indicador de estado */}
      <div className="status">
        {status === 'idle' && <span>Listo para grabar</span>}
        {status === 'recording' && <span className="recording">● Grabando</span>}
        {status === 'uploading' && <span>Subiendo: {progress}%</span>}
        {status === 'complete' && <span className="success">✓ Completo</span>}
        {status === 'error' && <span className="error">✗ {error}</span>}
      </div>

      {/* Resultado del video */}
      {videoUrl && (
        <div className="result">
          <video src={videoUrl} controls />
          <a href={videoUrl} download>Descargar Video</a>
        </div>
      )}
    </div>
  );
}

Eventos del Web Component

Para Web Components, usa addEventListener:

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

recorder.addEventListener('recording-start', () => {
  console.log('Grabación iniciada');
});

recorder.addEventListener('recording-stop', () => {
  console.log('Grabación detenida');
});

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

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

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

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

Callbacks del Hook

Cuando uses useVidtreoRecorder, pasa callbacks a la configuración:

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

Los callbacks son opcionales. El SDK maneja toda la lógica de grabación y subida automáticamente. Usa callbacks para actualizar tu UI o integrar con tu aplicación.

Próximos Pasos

Opciones de Configuración — Todas las configuraciones
Personalización — Estilos
Ejemplos — Ejemplos funcionales

Devoluciones de Llamada