Inicio Rápido

Comienza a usar VIDTREO en menos de 5 minutos. Esta guía te llevará a través del proceso de grabar y subir tu primer video.

Instala el SDK

Elige tu método de integración e instala el paquete:

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

npm install @vidtreo/recorder-wc

npm install @vidtreo/recorder

Obtén tu API Key

Inicia sesión en el Dashboard de VIDTREO
Navega a Configuración → API Keys
Haz clic en Crear Nueva Key
Copia tu API key

Mantén tu API key segura. Nunca la expongas en código del cliente para aplicaciones en producción. Usa variables de entorno en su lugar.

Añade el Grabador

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

function VideoRecorder() {
  return (
    <VidtreoRecorder
      apiKey="tu-api-key"
      onUploadComplete={(result) => {
        console.log('URL del Video:', result.uploadUrl);
        console.log('ID de Grabación:', result.recordingId);
      }}
      onError={(error) => {
        console.error('Error de grabación:', 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="tu-api-key"
    id="recorder"
  ></vidtreo-recorder>

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

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

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

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

const recorder = new VidtreoRecorder({
  apiKey: 'tu-api-key',
  onUploadComplete: (result) => {
    console.log('URL del Video:', result.uploadUrl);
  },
  onError: (error) => {
    console.error('Error:', error);
  }
});

// Inicializar y comenzar preview
await recorder.initialize();
const stream = await recorder.startPreview();

// Conectar stream al elemento video
const videoElement = document.querySelector('video');
videoElement.srcObject = stream;

// Iniciar grabación
await recorder.startRecording();

// Detener grabación (llamar cuando termine)
const result = await recorder.stopRecording();
console.log('Grabación completa:', result);

Graba un Video

Concede Permisos: Permite el acceso a cámara y micrófono cuando se solicite
Preview: Mírate en la vista previa del video
Grabar: Haz clic en el botón de grabar para comenzar
Detener: Haz clic en detener cuando termines
Subir: El video se sube automáticamente a VIDTREO

El callback onUploadComplete se dispara cuando tu video está listo con:

uploadUrl: URL directa a tu video
recordingId: Identificador único de la grabación

Ejemplo Completo en React

Aquí hay un ejemplo completo con todas las características comunes:

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>Grabador de Video</h1>

      <VidtreoRecorder
        apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
        enableSourceSwitching={true}
        enableMute={true}
        enablePause={true}
        enableDeviceChange={true}
        maxRecordingTime={300000} // 5 minutos
        countdownDuration={3000}   // cuenta regresiva de 3 segundos
        lang="es"
        onRecordingStart={() => {
          console.log('Grabación iniciada');
          setVideoUrl(null);
        }}
        onRecordingStop={() => {
          console.log('Grabación detenida');
          setIsUploading(true);
        }}
        onUploadProgress={(progress) => {
          console.log(`Progreso de subida: ${Math.round(progress * 100)}%`);
        }}
        onUploadComplete={(result) => {
          setVideoUrl(result.uploadUrl);
          setIsUploading(false);
          console.log('¡Subida completa!', result);
        }}
        onError={(error) => {
          console.error('Error:', error);
          setIsUploading(false);
        }}
      />

      {isUploading && <p>Subiendo video...</p>}

      {videoUrl && (
        <div className="result">
          <h2>Tu Video</h2>
          <video src={videoUrl} controls />
          <a href={videoUrl} target="_blank">Abrir en nueva pestaña</a>
        </div>
      )}
    </div>
  );
}

export default App;

¿Qué Sigue?

Integración React — Guía completa de React con hooks
Web Component — Guía agnóstica de framework
Core SDK — Construye UIs personalizadas

Opciones de Configuración — Todas las configuraciones disponibles
Callbacks — Maneja eventos y cambios de estado
Personalización — Estilos y temas

Grabación de Pantalla — Captura pantalla y pestañas
UI Personalizada — Construye tu propia interfaz
Uso Avanzado — Soporte offline, lógica de reintentos

Inicio Rápido

Inicio Rápido

Instala el SDK

Obtén tu API Key

Añade el Grabador

Graba un Video

Ejemplo Completo en React

¿Qué Sigue?

En esta página