Add Video Recording to React in 5 Minutes

TL;DR

• Install @vidtreo/recorder-react
• Add <VidtreoRecorder /> component
• That’s it. Your users can record video.

Step 1: Install the SDK

npm install @vidtreo/recorder-react

Step 2: Get Your API Key

1. Sign up at app.vidtreo.com
2. Create an environment
3. Copy your API key

Step 3: Add the Recorder Component

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

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

That’s the minimal integration. The component handles:

• Camera/microphone permission requests
• Recording controls (start, stop, pause)
• Browser-native MP4 encoding
• Upload to VIDTREO’s edge storage
• Error handling and retry logic

Step 4: Customize (Optional)

<VidtreoRecorder
  apiKey="your-api-key"
  resolution="hd"
  maxDuration={120}
  locale="en"
  onRecordingComplete={(video) => {
    // Handle completed recording
  }}
  onError={(error) => {
    // Handle errors
  }}
/>

Using the Hook for Custom UI

Want full control over the UI? Use the useMobileWebRecorder hook:

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

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

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

What Happens Under the Hood

1. Browser captures video via MediaStream API
2. Our engine produces optimized MP4 in real-time
3. Compact file uploads to VIDTREO’s global edge storage
4. AI transcription runs automatically
5. Webhook fires to notify your backend

All of this happens with zero server-side processing on your end.

Pricing

• Free tier: $1 credit (~100 HD minutes)
• HD recording: $0.01/minute
• No monthly fee, no credit card required to start

Next Steps

• Interactive Playground →
• Full API Reference →
• Advanced Examples →

Get Started Free →