AvanzaCast/packages/broadcast-panel/LIVEKIT_SETUP.md

# 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

- `                         `: 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