Adicione gravação de vídeo ao React em 5 minutos

Em resumo

• Instale @vidtreo/recorder-react
• Adicione o componente <VidtreoRecorder />
• Pronto. Seus usuários podem gravar vídeo.

Passo 1: Instalar o SDK

npm install @vidtreo/recorder-react

Passo 2: Obter sua API Key

1. Cadastre-se em app.vidtreo.com
2. Crie um ambiente
3. Copie sua API key

Passo 3: Adicionar o componente de gravação

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

function App() {
  return (
    <VidtreoRecorder
      apiKey="sua-api-key"
      onRecordingComplete={(video) => {
        console.log('Vídeo gravado:', video.url)
      }}
    />
  )
}

Essa é a integração mínima. O componente cuida de:

• Solicitar permissões de câmera/microfone
• Controles de gravação (iniciar, parar, pausar)
• Codificação MP4 nativa no navegador
• Upload para o armazenamento edge do VIDTREO
• Tratamento de erros e retentativas

Passo 4: Personalizar (opcional)

<VidtreoRecorder
  apiKey="sua-api-key"
  resolution="hd"
  maxDuration={120}
  locale="pt"
  onRecordingComplete={(video) => {
    // Tratar gravação concluída
  }}
  onError={(error) => {
    // Tratar erros
  }}
/>

Usar o hook para UI personalizada

Quer controle total sobre a interface? Use o hook useMobileWebRecorder:

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

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

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

O que acontece nos bastidores

1. O navegador captura o vídeo via API MediaStream
2. Nosso motor produz MP4 otimizado em tempo real
3. Arquivo compacto é enviado para o armazenamento edge global do VIDTREO
4. A transcrição IA roda automaticamente
5. Um webhook é disparado para notificar seu backend

Tudo isso sem processamento no servidor do seu lado.

Preços

• Tier gratuito: $1 de crédito (~100 minutos HD)
• Gravação HD: $0,01/minuto
• Sem taxa mensal, não precisa de cartão para começar

Próximos passos

• Playground interativo →
• Referência completa da API →
• Exemplos avançados →

Começar grátis →