Instalación

Elige el paquete que mejor se adapte a las necesidades de tu proyecto. Todos los paquetes están publicados en npm y pueden instalarse con tu gestor de paquetes preferido.

Elige tu Paquete

Paquete	Mejor Para
`@vidtreo/recorder-react`	Aplicaciones React (Next.js, Vite, CRA)
`@vidtreo/recorder-wc`	Cualquier framework (Vue, Angular, Svelte) o HTML vanilla
`@vidtreo/recorder`	Implementaciones personalizadas que requieren control total de la API

Instalación para React

Para aplicaciones React, instala el paquete React que incluye componentes y hooks pre-construidos:

npm install @vidtreo/recorder-react @vidtreo/recorder

yarn add @vidtreo/recorder-react @vidtreo/recorder

pnpm add @vidtreo/recorder-react @vidtreo/recorder

bun add @vidtreo/recorder-react @vidtreo/recorder

@vidtreo/recorder es una dependencia peer y debe instalarse junto con el paquete React.

Instalación del Web Component

Para uso agnóstico de framework, instala el paquete Web Component:

npm install @vidtreo/recorder-wc

yarn add @vidtreo/recorder-wc

pnpm add @vidtreo/recorder-wc

bun add @vidtreo/recorder-wc

Uso por CDN

También puedes cargar el Web Component directamente desde un CDN sin ningún paso de compilación:

<script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/recorder-wc@latest/dist/vidtreo-recorder.js"></script>

O con una versión específica:

<script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/recorder-wc@1.0.5/dist/vidtreo-recorder.js"></script>

Instalación del Core SDK

Para control completo sobre la experiencia de grabación, instala el Core SDK:

npm install @vidtreo/recorder

yarn add @vidtreo/recorder

pnpm add @vidtreo/recorder

bun add @vidtreo/recorder

Soporte de TypeScript

Todos los paquetes de VIDTREO incluyen definiciones de TypeScript por defecto. No se requieren paquetes @types adicionales.

import type {
  VidtreoRecorderConfig,
  RecordingState,
  SourceType
} from '@vidtreo/recorder';

Configuración del Entorno

Proyectos Vite

Añade tu API key a .env:

VITE_VIDTREO_API_KEY=tu-api-key

Proyectos Next.js

Para renderizado del lado del servidor, usa la variable sin prefijo:

VIDTREO_API_KEY=tu-api-key

Nunca subas tu API key al control de versiones. Añade .env a tu archivo .gitignore.

Verificar la Instalación

Después de la instalación, verifica que todo funciona importando el paquete:

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

// Web Component
import '@vidtreo/recorder-wc';

// Core SDK
import { VidtreoRecorder } from '@vidtreo/recorder';

Próximos Pasos

Inicio Rápido — Graba tu primer video
Autenticación — Configura tu API key
Integración React — Guía detallada de React

Instalación

En esta página