import { formatChatMessageLinks, LiveKitRoom, VideoConference } from '@livekit/components-react'; import { ExternalE2EEKeyProvider, LogLevel, RoomConnectOptions, Room, RoomOptions, VideoPresets, } from 'livekit-client'; import { useRouter } from 'next/router'; import { DebugMode } from '../../lib/Debug'; import { decodePassphrase } from '../../lib/client-utils'; import { useMemo } from 'react'; export default function CustomRoomConnection() { const router = useRouter(); const { liveKitUrl, token } = router.query; const e2eePassphrase = typeof window !== 'undefined' && decodePassphrase(window.location.hash.substring(1)); const worker = typeof window !== 'undefined' && new Worker(new URL('livekit-client/e2ee-worker', import.meta.url)); const keyProvider = new ExternalE2EEKeyProvider(); const e2eeEnabled = !!(e2eePassphrase && worker); const roomOptions = useMemo((): RoomOptions => { return { publishDefaults: { videoSimulcastLayers: [VideoPresets.h540, VideoPresets.h216], red: !e2eeEnabled, }, adaptiveStream: { pixelDensity: 'screen' }, dynacast: true, e2ee: e2eeEnabled ? { keyProvider, worker, } : undefined, }; }, []); const room = useMemo(() => new Room(roomOptions), []); if (e2eeEnabled) { keyProvider.setKey(e2eePassphrase); room.setE2EEEnabled(true); } const connectOptions = useMemo((): RoomConnectOptions => { return { autoSubscribe: true, }; }, []); if (typeof liveKitUrl !== 'string') { return