Cesar Mendivil
78e83b46dd
feat: Create BroadcastStudio component as the main UI container for broadcasting feat: Develop ControlPanel component for managing broadcast controls and layouts feat: Add LiveKitBroadcastWrapper to encapsulate LiveKitRoom and manage broadcasting feat: Implement StreamView component for rendering video output with overlays and layouts feat: Create SceneContext for managing scene configurations and layouts chore: Update index exports for broadcast components
37 lines
925 B
TypeScript
37 lines
925 B
TypeScript
// Ejemplo de cómo integrar BroadcastStudio en Studio.tsx existente
|
|
|
|
import { LiveKitBroadcastWrapper } from './broadcast'
|
|
|
|
// Reemplazar la sección de render actual con:
|
|
|
|
// Opción 1: Reemplazar completamente StudioVideoArea con BroadcastStudio
|
|
{!isDemoMode && token && serverUrl && (
|
|
<LiveKitBroadcastWrapper
|
|
token={token}
|
|
serverUrl={serverUrl}
|
|
userName={userName}
|
|
roomName={roomName}
|
|
onDisconnect={() => {
|
|
console.log('Desconectado del estudio')
|
|
setIsDemoMode(true)
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
// Opción 2: Usar solo dentro del LiveKitRoom existente
|
|
<LiveKitRoom token={token} serverUrl={serverUrl} ...>
|
|
<BroadcastStudio />
|
|
</LiveKitRoom>
|
|
|
|
// Opción 3: Modo híbrido - Toggle entre vista clásica y BroadcastStudio
|
|
const [useBroadcastUI, setUseBroadcastUI] = useState(false)
|
|
|
|
{useBroadcastUI ? (
|
|
<BroadcastStudio />
|
|
) : (
|
|
<>
|
|
<StudioVideoArea ... />
|
|
<StudioControls ... />
|
|
</>
|
|
)}
|