Playground
Interactive playground to explore and configure all VIDTREO recorder capabilities
Recorder Playground
Explore all the capabilities of the VIDTREO recorder in this interactive playground. Configure options, preview the recorder in real-time, and get the generated code for your preferred integration method.
Live Preview
Loading recorder...
Configuration
Features
Demo Mode (No API Key Required)
Source Switching (Camera/Screen)
Mute Control
Pause/Resume
Device Selection
Tab Visibility Overlay
Localization
Timing
Countdown Before RecordingNone
Maximum Recording DurationUnlimited
Custom Texts
Enable Custom Button Texts
User Metadata
import { VidtreoRecorder } from '@vidtreo/recorder-react';import '@vidtreo/recorder-react/styles.css';export function MyRecorder() { return ( <VidtreoRecorder demo={true} nativeCamera={false} onUploadComplete={(result) => { console.log("Recording complete:", result); }} /> );}Features You Can Configure
Recording Features
| Feature | Description |
|---|---|
| Source Switching | Allow users to switch between camera and screen during recording |
| Mute Control | Enable/disable microphone muting during recording |
| Pause/Resume | Allow pausing and resuming the recording |
| Device Selection | Let users choose which camera and microphone to use |
| Tab Visibility Overlay | Show an overlay when the user switches to another tab |
Timing Options
| Option | Description |
|---|---|
| Countdown | Add a countdown timer before recording starts (0-10 seconds) |
| Max Duration | Set a maximum recording duration (auto-stops when reached) |
Localization
The recorder supports multiple languages out of the box:
- English (
en) - Spanish (
es)
You can also provide custom translations for any UI text using the texts prop.
Integration Methods
The playground generates code for three integration methods:
- React - Use the
VidtreoRecordercomponent with React hooks - Vanilla JS - Use the core
VidtreoRecorderclass directly - Web Component - Use the
<vidtreo-recorder>custom element
Choose the method that best fits your tech stack!