2023-01-19 19:56:00 +01:00
|
|
|
import {
|
|
|
|
|
LiveKitRoom,
|
|
|
|
|
PreJoin,
|
|
|
|
|
LocalUserChoices,
|
|
|
|
|
useToken,
|
|
|
|
|
VideoConference,
|
|
|
|
|
} from '@livekit/components-react';
|
2023-01-20 11:18:39 +01:00
|
|
|
import { RoomOptions } from 'livekit-client';
|
2022-10-24 17:03:12 +02:00
|
|
|
|
2023-01-19 19:56:00 +01:00
|
|
|
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';
|
2022-10-24 17:03:12 +02:00
|
|
|
|
2023-01-19 19:56:00 +01:00
|
|
|
const Home: NextPage = () => {
|
2022-10-24 17:03:12 +02:00
|
|
|
const router = useRouter();
|
2023-01-19 19:56:00 +01:00
|
|
|
const { name: roomName } = router.query;
|
2022-10-24 17:03:12 +02:00
|
|
|
|
2023-01-19 19:56:00 +01:00
|
|
|
const [preJoinChoices, setPreJoinChoices] = useState<LocalUserChoices | undefined>(undefined);
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>LiveKit Meet</title>
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
|
|
|
|
|
|
|
|
|
<main>
|
2023-01-20 11:18:39 +01:00
|
|
|
{roomName && !Array.isArray(roomName) && preJoinChoices ? (
|
2023-01-19 19:56:00 +01:00
|
|
|
<ActiveRoom
|
|
|
|
|
roomName={roomName}
|
|
|
|
|
userChoices={preJoinChoices}
|
|
|
|
|
onLeave={() => setPreJoinChoices(undefined)}
|
|
|
|
|
></ActiveRoom>
|
|
|
|
|
) : (
|
|
|
|
|
<div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
|
|
|
|
|
<PreJoin
|
|
|
|
|
onError={(err) => console.log('error while setting up prejoin', err)}
|
|
|
|
|
defaults={{
|
|
|
|
|
username: '',
|
|
|
|
|
videoEnabled: true,
|
|
|
|
|
audioEnabled: true,
|
|
|
|
|
}}
|
|
|
|
|
onSubmit={(values) => {
|
|
|
|
|
console.log('Joining with: ', values);
|
|
|
|
|
setPreJoinChoices(values);
|
|
|
|
|
}}
|
|
|
|
|
></PreJoin>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</main>
|
|
|
|
|
</>
|
|
|
|
|
);
|
2022-10-24 17:03:12 +02:00
|
|
|
};
|
|
|
|
|
|
2023-01-19 19:56:00 +01:00
|
|
|
export default Home;
|
2022-10-24 17:03:12 +02:00
|
|
|
|
2023-01-19 19:56:00 +01:00
|
|
|
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 => {
|
2022-10-24 17:03:12 +02:00
|
|
|
return {
|
2023-01-19 19:56:00 +01:00
|
|
|
videoCaptureDefaults: {
|
|
|
|
|
deviceId: userChoices.videoDeviceId ?? undefined,
|
|
|
|
|
},
|
|
|
|
|
audioCaptureDefaults: {
|
|
|
|
|
deviceId: userChoices.audioDeviceId ?? undefined,
|
2022-10-24 17:03:12 +02:00
|
|
|
},
|
2023-01-19 19:56:00 +01:00
|
|
|
adaptiveStream: { pixelDensity: 'screen' },
|
|
|
|
|
dynacast: true,
|
2022-10-24 17:03:12 +02:00
|
|
|
};
|
2023-01-19 19:56:00 +01:00
|
|
|
}, [userChoices]);
|
2022-10-24 17:03:12 +02:00
|
|
|
|
2023-01-19 19:56:00 +01:00
|
|
|
return (
|
|
|
|
|
<LiveKitRoom
|
|
|
|
|
token={token}
|
|
|
|
|
serverUrl={process.env.NEXT_PUBLIC_LK_SERVER_URL}
|
|
|
|
|
options={roomOptions}
|
|
|
|
|
video={userChoices.videoEnabled}
|
|
|
|
|
audio={userChoices.audioEnabled}
|
|
|
|
|
onDisconnected={onLeave}
|
|
|
|
|
>
|
|
|
|
|
<VideoConference />
|
|
|
|
|
<DebugMode />
|
|
|
|
|
</LiveKitRoom>
|
|
|
|
|
);
|
2022-10-24 17:03:12 +02:00
|
|
|
};
|
