Playground interactivo para explorar y configurar todas las capacidades del recorder VIDTREO

Recorder Playground

Explora todas las capacidades del recorder VIDTREO en este playground interactivo. Configura opciones, previsualiza el recorder en tiempo real y obtén el código generado para tu método de integración preferido.

Vista Previa

Loading recorder...

Configuración

Funcionalidades

Modo Demo (Sin API Key)

Cambio de Fuente (Cámara/Pantalla)

Control de Silencio

Pausar/Reanudar

Selección de Dispositivo

Overlay de Visibilidad de Pestaña

Idioma

Tiempos

Cuenta Regresiva Antes de GrabarNinguno

Duración Máxima de GrabaciónIlimitado

Textos Personalizados

Habilitar Textos Personalizados

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);
  }}
    />
  );
}

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);  }}    />  );}

Funcionalidades Configurables

Funcionalidades de Grabación

Funcionalidad	Descripción
Cambio de Fuente	Permite cambiar entre cámara y pantalla durante la grabación
Control de Silencio	Habilita/deshabilita el silenciado del micrófono
Pausar/Reanudar	Permite pausar y reanudar la grabación
Selección de Dispositivo	Permite elegir qué cámara y micrófono usar
Overlay de Visibilidad	Muestra un overlay cuando el usuario cambia de pestaña

Opciones de Tiempo

Opción	Descripción
Cuenta Regresiva	Agrega un temporizador antes de iniciar la grabación (0-10 segundos)
Duración Máxima	Establece una duración máxima (se detiene automáticamente)

Localización

El recorder soporta múltiples idiomas:

Inglés (en)
Español (es)

También puedes proporcionar traducciones personalizadas para cualquier texto usando la prop texts.

Métodos de Integración

El playground genera código para tres métodos de integración:

React - Usa el componente VidtreoRecorder con hooks
Vanilla JS - Usa la clase VidtreoRecorder directamente
Web Component - Usa el elemento <vidtreo-recorder>

¡Elige el método que mejor se adapte a tu stack tecnológico!

Playground