Quick Start
Record your first video with VIDTREO in just 5 minutes.
Quick Start
Get up and running with VIDTREO in under 5 minutes. This guide will walk you through recording and uploading your first video.
Install the SDK
Choose your integration method and install the package:
npm install @vidtreo/recorder-react @vidtreo/recordernpm install @vidtreo/recorder-wcnpm install @vidtreo/recorderGet your API Key
- Sign in to the VIDTREO Dashboard
- Navigate to Settings → API Keys
- Click Create New Key
- Copy your API key
Keep your API key secure. Never expose it in client-side code for production applications. Use environment variables instead.
Add the Recorder
import { VidtreoRecorder } from '@vidtreo/recorder-react';
function VideoRecorder() {
return (
<VidtreoRecorder
apiKey="your-api-key"
onUploadComplete={(result) => {
console.log('Video URL:', result.uploadUrl);
console.log('Recording ID:', result.recordingId);
}}
onError={(error) => {
console.error('Recording error:', 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="your-api-key"
id="recorder"
></vidtreo-recorder>
<script>
const recorder = document.getElementById('recorder');
recorder.addEventListener('upload-complete', (e) => {
console.log('Video URL:', 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: 'your-api-key',
onUploadComplete: (result) => {
console.log('Video URL:', result.uploadUrl);
},
onError: (error) => {
console.error('Error:', error);
}
});
// Initialize and start preview
await recorder.initialize();
const stream = await recorder.startPreview();
// Attach stream to video element
const videoElement = document.querySelector('video');
videoElement.srcObject = stream;
// Start recording
await recorder.startRecording();
// Stop recording (call when done)
const result = await recorder.stopRecording();
console.log('Recording complete:', result);Record a Video
- Grant Permissions: Allow camera and microphone access when prompted
- Preview: See yourself in the video preview
- Record: Click the record button to start
- Stop: Click stop when finished
- Upload: The video automatically uploads to VIDTREO
The onUploadComplete callback fires when your video is ready with:
uploadUrl: Direct URL to your videorecordingId: Unique identifier for the recording
Complete React Example
Here's a full working example with all common features:
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>Video Recorder</h1>
<VidtreoRecorder
apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
enableSourceSwitching={true}
enableMute={true}
enablePause={true}
enableDeviceChange={true}
maxRecordingTime={300000} // 5 minutes
countdownDuration={3000} // 3 second countdown
lang="en"
onRecordingStart={() => {
console.log('Recording started');
setVideoUrl(null);
}}
onRecordingStop={() => {
console.log('Recording stopped');
setIsUploading(true);
}}
onUploadProgress={(progress) => {
console.log(`Upload progress: ${Math.round(progress * 100)}%`);
}}
onUploadComplete={(result) => {
setVideoUrl(result.uploadUrl);
setIsUploading(false);
console.log('Upload complete!', result);
}}
onError={(error) => {
console.error('Error:', error);
setIsUploading(false);
}}
/>
{isUploading && <p>Uploading video...</p>}
{videoUrl && (
<div className="result">
<h2>Your Video</h2>
<video src={videoUrl} controls />
<a href={videoUrl} target="_blank">Open in new tab</a>
</div>
)}
</div>
);
}
export default App;What's Next?
- React Integration — Full React guide with hooks
- Web Component — Framework-agnostic guide
- Core SDK — Build custom UIs
- Configuration Options — All available settings
- Callbacks — Handle events and state changes
- Customization — Styling and theming
- Screen Recording — Capture screen and tabs
- Custom UI — Build your own interface
- Advanced Usage — Offline support, retry logic