Cesar Mendivil 0ca2b36b5c feat: Implement Studio Panel with Left Sidebar, Right Panel, and Video Area

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

2025-11-06 19:09:00 -07:00

4.4 KiB

Raw Blame History

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

Ve a https://cloud.livekit.io
Regístrate para obtener una cuenta gratuita
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

O usar el siguiente script en Node.js:

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

Navega a la sección "Studio" en el sidebar
Ingresa la URL del servidor: wss://your-project.livekit.cloud
Ingresa el token generado
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

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:

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

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

4.4 KiB Raw Blame History