AvanzaCast/packages/studio-panel

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

# 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.

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.

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

/* 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:

:root {
  --studio-accent: #your-color;
}

📖 Storybook

Para ver y probar los componentes:

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
2. Crear un nuevo proyecto
3. Obtener:
   • URL del servidor (WebSocket URL)
   • API Key
   • API Secret

Generar Token

Para desarrollo, usa el LiveKit CLI:

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

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

# Ejecutar tests
npm test

# Tests en modo watch
npm test -- --watch

📦 Build para Producción

# 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

// 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
• LiveKit React Components
• Avanza-UI
• StreamYard - Inspiración de diseño

---

Versión: 0.2.0
Última actualización: 2025-11-11