Cesar Mendivil
0ca2b36b5c
- Added StudioLeftSidebar component for scene management with add, delete, and duplicate functionalities. - Introduced StudioRightPanel component with tabs for brand settings, multimedia, sounds, video, QR code generation, countdown, and general settings. - Created StudioSidebar component for participant management, chat, and notes. - Developed StudioVideoArea component to handle video display for demo and live modes. - Configured demo data for scenes, participants, overlays, backgrounds, and sounds in demo.ts. - Set up a token server for LiveKit integration to manage participant access. - Updated Vite environment definitions for LiveKit configuration.
162 lines
4.4 KiB
Markdown
162 lines
4.4 KiB
Markdown
# Configuración de LiveKit para AvanzaCast Studio
|
|
|
|
## ¿Qué es LiveKit?
|
|
|
|
LiveKit es una plataforma de código abierto para aplicaciones de video en tiempo real. Proporciona una infraestructura escalable y componentes de React listos para usar que facilitan la construcción de aplicaciones de videoconferencia, streaming en vivo y comunicación en tiempo real.
|
|
|
|
## Configuración Rápida para Desarrollo
|
|
|
|
### 1. Crear cuenta en LiveKit Cloud
|
|
|
|
1. Ve a [https://cloud.livekit.io](https://cloud.livekit.io)
|
|
2. Regístrate para obtener una cuenta gratuita
|
|
3. Crea un nuevo proyecto
|
|
|
|
### 2. Obtener Credenciales
|
|
|
|
En tu proyecto de LiveKit Cloud encontrarás:
|
|
- **URL del servidor WebSocket**: `wss://your-project.livekit.cloud`
|
|
- **API Key**: Tu clave de API
|
|
- **API Secret**: Tu secreto de API
|
|
|
|
### 3. Generar Token de Acceso
|
|
|
|
Para desarrollo rápido, puedes generar tokens temporales en:
|
|
[https://cloud.livekit.io/projects/YOUR_PROJECT/settings/keys](https://cloud.livekit.io/projects)
|
|
|
|
O usar el siguiente script en Node.js:
|
|
|
|
```javascript
|
|
import { AccessToken } from 'livekit-server-sdk'
|
|
|
|
const createToken = () => {
|
|
const at = new AccessToken('your-api-key', 'your-api-secret', {
|
|
identity: 'user-identity',
|
|
name: 'User Name',
|
|
})
|
|
|
|
at.addGrant({
|
|
room: 'studio-room',
|
|
roomJoin: true,
|
|
canPublish: true,
|
|
canSubscribe: true,
|
|
})
|
|
|
|
return at.toJwt()
|
|
}
|
|
|
|
console.log(createToken())
|
|
```
|
|
|
|
### 4. Usar en el Studio
|
|
|
|
1. Navega a la sección "Studio" en el sidebar
|
|
2. Ingresa la URL del servidor: `wss://your-project.livekit.cloud`
|
|
3. Ingresa el token generado
|
|
4. Haz clic en "Conectar"
|
|
|
|
## Configuración de Producción
|
|
|
|
Para producción, debes implementar un servidor backend que genere tokens de forma segura:
|
|
|
|
### Backend Node.js/Express
|
|
|
|
```javascript
|
|
import express from 'express'
|
|
import { AccessToken } from 'livekit-server-sdk'
|
|
|
|
const app = express()
|
|
|
|
app.post('/api/token', async (req, res) => {
|
|
const { room, username } = req.body
|
|
|
|
const at = new AccessToken(
|
|
process.env.LIVEKIT_API_KEY,
|
|
process.env.LIVEKIT_API_SECRET,
|
|
{
|
|
identity: username,
|
|
name: username,
|
|
}
|
|
)
|
|
|
|
at.addGrant({
|
|
room,
|
|
roomJoin: true,
|
|
canPublish: true,
|
|
canSubscribe: true,
|
|
})
|
|
|
|
res.json({ token: at.toJwt() })
|
|
})
|
|
|
|
app.listen(3001)
|
|
```
|
|
|
|
### Variables de Entorno
|
|
|
|
Crea un archivo `.env.local`:
|
|
|
|
```env
|
|
LIVEKIT_API_KEY=your-api-key
|
|
LIVEKIT_API_SECRET=your-api-secret
|
|
LIVEKIT_URL=wss://your-project.livekit.cloud
|
|
```
|
|
|
|
## Características del Studio de AvanzaCast
|
|
|
|
### Funcionalidades Implementadas
|
|
|
|
✅ Interfaz de Studio con layout profesional
|
|
✅ Controles de audio y video (mic, cámara)
|
|
✅ Compartir pantalla
|
|
✅ Botón de grabación
|
|
✅ Sidebar con participantes
|
|
✅ Integración con componentes LiveKit
|
|
|
|
### Próximas Funcionalidades
|
|
|
|
🔄 Chat en tiempo real
|
|
🔄 Invitar participantes
|
|
🔄 Múltiples layouts de video
|
|
🔄 Overlays y branding personalizado
|
|
🔄 Multistream a plataformas (YouTube, Facebook, Twitch)
|
|
🔄 Grabación en la nube
|
|
|
|
## Componentes de LiveKit Utilizados
|
|
|
|
- `LiveKitRoom`: Contenedor principal para la sala de video
|
|
- `VideoConference`: Componente de conferencia de video todo-en-uno
|
|
- `ParticipantTile`: Miniatura de video de participante individual
|
|
- `ControlBar`: Barra de controles personalizable
|
|
- `useTracks`: Hook para acceder a tracks de audio/video
|
|
|
|
## Recursos Adicionales
|
|
|
|
- [Documentación de LiveKit](https://docs.livekit.io)
|
|
- [LiveKit React Components](https://docs.livekit.io/guides/room/client/react/)
|
|
- [Ejemplos de código](https://github.com/livekit/livekit-react)
|
|
- [LiveKit Cloud](https://cloud.livekit.io)
|
|
|
|
## Solución de Problemas
|
|
|
|
### Error: "Failed to connect to room"
|
|
- Verifica que la URL del servidor sea correcta
|
|
- Asegúrate de que el token sea válido y no haya expirado
|
|
- Comprueba tu conexión a internet
|
|
|
|
### Video/Audio no funciona
|
|
- Permite permisos de cámara y micrófono en tu navegador
|
|
- Verifica que no haya otra aplicación usando la cámara/micrófono
|
|
- Prueba en modo incógnito para descartar extensiones del navegador
|
|
|
|
### Token expirado
|
|
- Los tokens tienen un tiempo de expiración (por defecto 6 horas)
|
|
- Genera un nuevo token desde tu panel de LiveKit Cloud
|
|
- En producción, implementa renovación automática de tokens
|
|
|
|
## Contacto y Soporte
|
|
|
|
Para más información sobre AvanzaCast o problemas con la implementación:
|
|
- Revisa la documentación en `/docs`
|
|
- Consulta el archivo `ARCHITECTURE.md` para entender la estructura del proyecto
|