Instalação

Escolha o pacote que corresponde às necessidades do seu projeto. Todos os pacotes são publicados no npm e podem ser instalados com seu gerenciador de pacotes preferido.

Escolha seu Pacote

Pacote	Melhor Para
`@vidtreo/recorder-react`	Aplicações React (Next.js, Vite, CRA)
`@vidtreo/recorder-wc`	Qualquer framework (Vue, Angular, Svelte) ou HTML vanilla
`@vidtreo/recorder`	Implementações personalizadas que requerem controle total da API

Instalação React

Para aplicações React, instale o pacote React que inclui componentes e hooks pré-construídos:

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 é uma dependência peer e deve ser instalada junto com o pacote React.

Instalação Web Component

Para uso agnóstico de framework, instale o pacote 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

Você também pode carregar o Web Component diretamente de um CDN sem nenhuma etapa de build:

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

Ou com uma versão específica:

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

Instalação do Core SDK

Para controle completo sobre a experiência de gravação, instale o Core SDK:

npm install @vidtreo/recorder

yarn add @vidtreo/recorder

pnpm add @vidtreo/recorder

bun add @vidtreo/recorder

Suporte TypeScript

Todos os pacotes VIDTREO incluem definições TypeScript por padrão. Nenhum pacote @types adicional é necessário.

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

Configuração do Ambiente

Projetos Vite

Adicione sua API key ao .env:

VITE_VIDTREO_API_KEY=sua-api-key

Projetos Next.js

Para renderização do lado do servidor, use a variável sem prefixo:

VIDTREO_API_KEY=sua-api-key

Nunca faça commit da sua API key no controle de versão. Adicione .env ao seu arquivo .gitignore.

Verificar Instalação

Após a instalação, verifique se tudo funciona importando o pacote:

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

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

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

Próximos Passos

Início Rápido — Grave seu primeiro vídeo
Autenticação — Configure sua API key
Integração React — Guia detalhado de React

Instalação

Nesta página