import { LiveKitRoom, PreJoin, LocalUserChoices, useToken, VideoConference, } from '@livekit/components-react'; import { RoomOptions } from 'livekit-client'; import type { NextPage } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { useMemo, useState } from 'react'; import { DebugMode } from '../../lib/Debug'; const Home: NextPage = () => { const router = useRouter(); const { name: roomName } = router.query; const [preJoinChoices, setPreJoinChoices] = useState(undefined); return ( <> LiveKit Meet
{roomName && !Array.isArray(roomName) && preJoinChoices ? ( setPreJoinChoices(undefined)} > ) : (
console.log('error while setting up prejoin', err)} defaults={{ username: '', videoEnabled: true, audioEnabled: true, }} onSubmit={(values) => { console.log('Joining with: ', values); setPreJoinChoices(values); }} >
)}
); }; export default Home; type ActiveRoomProps = { userChoices: LocalUserChoices; roomName: string; onLeave?: () => void; }; const ActiveRoom = ({ roomName, userChoices, onLeave }: ActiveRoomProps) => { const token = useToken({ tokenEndpoint: process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, userInfo: { identity: userChoices.username, name: userChoices.username, }, }); const roomOptions = useMemo((): RoomOptions => { return { videoCaptureDefaults: { deviceId: userChoices.videoDeviceId ?? undefined, }, audioCaptureDefaults: { deviceId: userChoices.audioDeviceId ?? undefined, }, adaptiveStream: { pixelDensity: 'screen' }, dynacast: true, }; }, [userChoices]); return ( ); };