Cesar Mendivil f57ce90c11 feat: Enhance StudioControls with presentation and layout features

- Added props for handling presentation and screen sharing actions.
- Implemented buttons for opening presentation panel and changing layouts (grid/focus) and modes (video/audio).
- Updated UI to reflect active presentations and added functionality to clear presentations.

fix: Adjust StudioLeftSidebar and StudioRightPanel for full height

- Modified styles to ensure both sidebars occupy full height of the container.

feat: Introduce ParticipantsPanel for managing participants in the conference

- Created ParticipantsPanel component to display connected and invited participants.
- Integrated API calls to fetch invited participants and handle connection status.

feat: Implement PresentationPanel for sharing presentations

- Developed PresentationPanel component to handle file uploads and screen sharing.

refactor: Update StudioVideoArea to support layout and mode changes

- Refactored StudioVideoArea to accept layout and mode props, rendering appropriate conference views.

feat: Add AudioConference and VideoConference prefabs for audio and video handling

- Created AudioConference and VideoConference components to manage respective media streams.

feat: Introduce Chat component for real-time messaging

- Developed Chat component to facilitate messaging between participants.

feat: Implement ControlBar for user controls in the conference

- Created ControlBar component for managing participant actions like leaving the conference and toggling audio/video.

feat: Add PreJoin component for pre-conference setup

- Developed PreJoin component to allow users to preview video before joining the conference.

chore: Update Vite configuration for better module resolution

- Enhanced Vite config to include path aliases for easier imports across the project.

chore: Add TypeScript definitions for environment variables

- Created env.d.ts to define types for environment variables used in the project.

2025-11-07 14:29:14 -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

: 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