Añade grabación de video a React en 5 minutos

En resumen

• Instala @vidtreo/recorder-react
• Añade el componente <VidtreoRecorder />
• Listo. Tus usuarios pueden grabar video.

Paso 1: Instalar el SDK

npm install @vidtreo/recorder-react

Paso 2: Obtener tu API Key

1. Regístrate en app.vidtreo.com
2. Crea un entorno
3. Copia tu API key

Paso 3: Añadir el componente de grabación

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

function App() {
  return (
    <VidtreoRecorder
      apiKey="tu-api-key"
      onRecordingComplete={(video) => {
        console.log('Video grabado:', video.url)
      }}
    />
  )
}

Esa es la integración mínima. El componente se encarga de:

• Solicitar permisos de cámara/microfono
• Controles de grabación (inicio, parar, pausa)
• Codificación MP4 nativa en el navegador
• Subida al almacenamiento edge de VIDTREO
• Manejo de errores y reintentos

Paso 4: Personalizar (opcional)

<VidtreoRecorder
  apiKey="tu-api-key"
  resolution="hd"
  maxDuration={120}
  locale="es"
  onRecordingComplete={(video) => {
    // Manejar grabación completada
  }}
  onError={(error) => {
    // Manejar errores
  }}
/>

Usar el hook para una UI personalizada

¿Quieres control total sobre la interfaz? Usa el hook useMobileWebRecorder:

import { useMobileWebRecorder } from '@vidtreo/recorder-react'

function CustomRecorder() {
  const {
    startRecording,
    stopRecording,
    isRecording,
    videoUrl,
  } = useMobileWebRecorder({ apiKey: 'tu-api-key' })

  return (
    <div>
      {!isRecording ? (
        <button onClick={startRecording}>Grabar</button>
      ) : (
        <button onClick={stopRecording}>Parar</button>
      )}
      {videoUrl && <video src={videoUrl} controls />}
    </div>
  )
}

Qué ocurre por debajo

1. El navegador captura el video vía la API MediaStream
2. Nuestro motor produce MP4 optimizado en tiempo real
3. Se sube un archivo compacto al almacenamiento edge global de VIDTREO
4. La transcripción IA se ejecuta automáticamente
5. Se dispara un webhook para notificar a tu backend

Todo esto sin procesamiento en servidor por tu parte.

Precios

• Tier gratuito: $1 de crédito (~100 minutos HD)
• Grabación HD: $0.01/minuto
• Sin cuota mensual, no hace falta tarjeta para empezar

Siguientes pasos

• Playground interactivo →
• Referencia completa de la API →
• Ejemplos avanzados →

Empezar gratis →