323 lines
6.9 KiB
Markdown
323 lines
6.9 KiB
Markdown
# Studio Panel - AvanzaCast
|
||
|
||
Panel de videoconferencia estilo StreamYard construido con React, LiveKit y Avanza-UI.
|
||
|
||
## 📋 Características
|
||
|
||
- ✅ **Videoconferencia en tiempo real** con LiveKit
|
||
- ✅ **Diseño tipo StreamYard** - Interfaz oscura y profesional
|
||
- ✅ **Componentes reutilizables** con Avanza-UI
|
||
- ✅ **Storybook** para documentación de componentes
|
||
- ✅ **TypeScript** - Tipado completo
|
||
- ✅ **Responsive** - Adaptable a diferentes tamaños de pantalla
|
||
|
||
## 🚀 Inicio Rápido
|
||
|
||
### Prerrequisitos
|
||
|
||
- Node.js 18+
|
||
- npm o yarn
|
||
- Cuenta de LiveKit (para desarrollo)
|
||
|
||
### Instalación
|
||
|
||
```bash
|
||
# Instalar dependencias
|
||
npm install
|
||
|
||
# Desarrollo
|
||
npm run dev
|
||
|
||
# Storybook
|
||
npm run storybook
|
||
|
||
# Build
|
||
npm run build
|
||
```
|
||
|
||
## 🏗️ Arquitectura
|
||
|
||
### Stack Tecnológico
|
||
|
||
- **React 18** - UI Framework
|
||
- **LiveKit** - WebRTC y videoconferencia
|
||
- `@livekit/components-react` - Componentes React de LiveKit
|
||
- `@livekit/components-styles` - Estilos base
|
||
- `livekit-client` - Cliente JavaScript
|
||
- **Avanza-UI** - Librería de componentes personalizada
|
||
- **Vite** - Build tool y dev server
|
||
- **Storybook** - Documentación de componentes
|
||
- **TypeScript** - Lenguaje de programación
|
||
|
||
### Estructura del Proyecto
|
||
|
||
```
|
||
studio-panel/
|
||
├── src/
|
||
│ ├── components/
|
||
│ │ ├── StudioRoom/ # Componente principal de la sala
|
||
│ │ ├── VideoParticipant/ # Tile de participante
|
||
│ │ └── ...
|
||
│ ├── stories/ # Historias de Storybook
|
||
│ │ ├── Button.stories.tsx
|
||
│ │ └── ...
|
||
│ ├── App.tsx # Aplicación principal
|
||
│ └── main.tsx # Entry point
|
||
├── .storybook/ # Configuración de Storybook
|
||
│ ├── main.ts
|
||
│ └── preview.ts
|
||
├── package.json
|
||
└── vite.config.ts
|
||
```
|
||
|
||
## 📚 Componentes
|
||
|
||
### StudioRoom
|
||
|
||
Componente principal que maneja la sala de videoconferencia.
|
||
|
||
```tsx
|
||
import { StudioRoom } from './components/StudioRoom';
|
||
|
||
function App() {
|
||
return (
|
||
<StudioRoom
|
||
serverUrl="wss://your-server.livekit.cloud"
|
||
token="your-token"
|
||
roomName="Mi Sala"
|
||
onConnected={() => console.log('Conectado')}
|
||
onDisconnected={() => console.log('Desconectado')}
|
||
/>
|
||
);
|
||
}
|
||
```
|
||
|
||
#### Props
|
||
|
||
| Prop | Tipo | Requerido | Descripción |
|
||
|------|------|-----------|-------------|
|
||
| `serverUrl` | `string` | ✅ | URL del servidor LiveKit |
|
||
| `token` | `string` | ✅ | Token de autenticación |
|
||
| `roomName` | `string` | ❌ | Nombre de la sala |
|
||
| `onConnected` | `() => void` | ❌ | Callback al conectar |
|
||
| `onDisconnected` | `() => void` | ❌ | Callback al desconectar |
|
||
|
||
### VideoParticipant
|
||
|
||
Componente para mostrar un participante individual.
|
||
|
||
```tsx
|
||
import { VideoParticipant } from './components/VideoParticipant';
|
||
|
||
<VideoParticipant
|
||
track={trackReference}
|
||
showName={true}
|
||
showAudioIndicator={true}
|
||
/>
|
||
```
|
||
|
||
## 🎨 Estilos y Tema
|
||
|
||
El proyecto utiliza el **Studio Theme** de Avanza-UI, basado en el diseño de StreamYard.
|
||
|
||
### Variables CSS
|
||
|
||
```css
|
||
/* Colores principales */
|
||
--studio-bg-primary: #0f0f0f;
|
||
--studio-bg-secondary: #1a1a1a;
|
||
--studio-accent: #3b82f6;
|
||
--studio-danger: #ef4444;
|
||
--studio-success: #10b981;
|
||
|
||
/* Espaciado */
|
||
--studio-space-sm: 8px;
|
||
--studio-space-md: 12px;
|
||
--studio-space-lg: 16px;
|
||
|
||
/* Tipografía */
|
||
--studio-text-base: 14px;
|
||
--studio-font-medium: 500;
|
||
```
|
||
|
||
### Personalización
|
||
|
||
Puedes sobrescribir las variables en tu CSS:
|
||
|
||
```css
|
||
:root {
|
||
--studio-accent: #your-color;
|
||
}
|
||
```
|
||
|
||
## 📖 Storybook
|
||
|
||
Para ver y probar los componentes:
|
||
|
||
```bash
|
||
npm run storybook
|
||
```
|
||
|
||
El Storybook estará disponible en `http://localhost:6006`
|
||
|
||
### Historias Disponibles
|
||
|
||
- **Button** - Todos los estilos y variantes
|
||
- **StreamYard Control Bar** - Barra de controles estilo StreamYard
|
||
- Más historias en desarrollo...
|
||
|
||
## 🔧 Configuración de LiveKit
|
||
|
||
### Obtener Credenciales
|
||
|
||
1. Crear cuenta en [LiveKit Cloud](https://cloud.livekit.io)
|
||
2. Crear un nuevo proyecto
|
||
3. Obtener:
|
||
- URL del servidor (WebSocket URL)
|
||
- API Key
|
||
- API Secret
|
||
|
||
### Generar Token
|
||
|
||
Para desarrollo, usa el [LiveKit CLI](https://docs.livekit.io/home/cli/):
|
||
|
||
```bash
|
||
# Instalar CLI
|
||
brew install livekit
|
||
|
||
# Generar token
|
||
livekit-cli token create \
|
||
--api-key <tu-api-key> \
|
||
--api-secret <tu-api-secret> \
|
||
--join --room <nombre-sala> \
|
||
--identity <nombre-usuario>
|
||
```
|
||
|
||
### Variables de Entorno
|
||
|
||
Crea un archivo `.env.local`:
|
||
|
||
```env
|
||
VITE_LIVEKIT_URL=wss://your-project.livekit.cloud
|
||
VITE_LIVEKIT_API_KEY=your-api-key
|
||
VITE_LIVEKIT_API_SECRET=your-api-secret
|
||
```
|
||
|
||
## 🎯 Características Clave
|
||
|
||
### Layout de Video
|
||
|
||
- **Grid Layout** - Vista de cuadrícula para múltiples participantes
|
||
- **Focus Layout** - Vista enfocada con thumbnails
|
||
- **Speaker View** - Vista del participante activo
|
||
|
||
### Controles
|
||
|
||
- 🎤 **Audio** - Activar/desactivar micrófono
|
||
- 📹 **Video** - Activar/desactivar cámara
|
||
- 🖥️ **Compartir pantalla** - Compartir pantalla
|
||
- ➕ **Invitar** - Agregar participantes
|
||
- ⚙️ **Configuración** - Ajustes de audio/video
|
||
- 🚪 **Salir** - Abandonar la sala
|
||
|
||
### Estados
|
||
|
||
- **Conectando** - Mostrando estado de conexión
|
||
- **En vivo** - Indicador de transmisión activa
|
||
- **Grabando** - Indicador de grabación
|
||
- **Hablando** - Indicador de audio activo
|
||
|
||
## 🧪 Testing
|
||
|
||
```bash
|
||
# Ejecutar tests
|
||
npm test
|
||
|
||
# Tests en modo watch
|
||
npm test -- --watch
|
||
```
|
||
|
||
## 📦 Build para Producción
|
||
|
||
```bash
|
||
# Build
|
||
npm run build
|
||
|
||
# Preview del build
|
||
npm run preview
|
||
```
|
||
|
||
## 🔗 Integración con Otros Servicios
|
||
|
||
### Multistreaming
|
||
|
||
Para transmitir a múltiples plataformas:
|
||
|
||
1. Usar **LiveKit Egress** para RTMP
|
||
2. Configurar destinos (YouTube, Facebook, Twitch, etc.)
|
||
3. Iniciar grabación/streaming desde la app
|
||
|
||
### Recording
|
||
|
||
```typescript
|
||
// Iniciar grabación
|
||
const egressClient = new EgressClient(serverUrl);
|
||
await egressClient.startRoomCompositeEgress(roomName, {
|
||
file: {
|
||
filepath: '/path/to/recording.mp4',
|
||
},
|
||
});
|
||
```
|
||
|
||
## 🐛 Troubleshooting
|
||
|
||
### Error de conexión
|
||
|
||
- Verificar URL del servidor
|
||
- Verificar token válido
|
||
- Revisar permisos de cámara/micrófono
|
||
|
||
### Video no se muestra
|
||
|
||
- Verificar permisos del navegador
|
||
- Revisar configuración de dispositivos
|
||
- Verificar conexión de red
|
||
|
||
### Audio no funciona
|
||
|
||
- Verificar permisos de micrófono
|
||
- Revisar configuración de audio
|
||
- Comprobar que no esté silenciado
|
||
|
||
## 📝 Roadmap
|
||
|
||
- [ ] Chat en tiempo real
|
||
- [ ] Reacciones y emojis
|
||
- [ ] Grabación local
|
||
- [ ] Layouts personalizados
|
||
- [ ] Overlays y branding
|
||
- [ ] Moderación de participantes
|
||
- [ ] Estadísticas en tiempo real
|
||
- [ ] Integración con broadcast-panel
|
||
|
||
## 📄 Licencia
|
||
|
||
Uso interno - AvanzaCast
|
||
|
||
## 👥 Contribuidores
|
||
|
||
- Equipo AvanzaCast
|
||
|
||
## 📚 Recursos
|
||
|
||
- [LiveKit Docs](https://docs.livekit.io)
|
||
- [LiveKit React Components](https://docs.livekit.io/reference/components/react)
|
||
- [Avanza-UI](../avanza-ui/README.md)
|
||
- [StreamYard](https://streamyard.com) - Inspiración de diseño
|
||
|
||
---
|
||
|
||
**Versión:** 0.2.0
|
||
**Última actualización:** 2025-11-11
|
||
|