Playground interativo para explorar e configurar todas as capacidades do recorder VIDTREO

Recorder Playground

Explore todas as capacidades do recorder VIDTREO neste playground interativo. Configure opções, visualize o recorder em tempo real e obtenha o código gerado para seu método de integração preferido.

Visualização

Loading recorder...

Configuração

Funcionalidades

Modo Demo (Sem API Key)

Troca de Fonte (Câmera/Tela)

Controle de Mudo

Pausar/Retomar

Seleção de Dispositivo

Overlay de Visibilidade de Aba

Idioma

Tempos

Contagem Regressiva Antes de GravarNenhum

Duração Máxima de GravaçãoIlimitado

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 Configuráveis

Funcionalidades de Gravação

Funcionalidade	Descrição
Troca de Fonte	Permite alternar entre câmera e tela durante a gravação
Controle de Mudo	Habilita/desabilita o mudo do microfone
Pausar/Retomar	Permite pausar e retomar a gravação
Seleção de Dispositivo	Permite escolher qual câmera e microfone usar
Overlay de Visibilidade	Mostra um overlay quando o usuário muda de aba

Opções de Tempo

Opção	Descrição
Contagem Regressiva	Adiciona um temporizador antes de iniciar a gravação (0-10 segundos)
Duração Máxima	Define uma duração máxima (para automaticamente)

Localização

O recorder suporta múltiplos idiomas:

Inglês (en)
Espanhol (es)

Você também pode fornecer traduções personalizadas para qualquer texto usando a prop texts.

Métodos de Integração

O playground gera código para três métodos de integração:

React - Use o componente VidtreoRecorder com hooks
Vanilla JS - Use a classe VidtreoRecorder diretamente
Web Component - Use o elemento <vidtreo-recorder>

Escolha o método que melhor se adapta ao seu stack tecnológico!

Playground