2023-09-07 18:59:34 +02:00
|
|
|
'use client';
|
2023-01-19 19:56:00 +01:00
|
|
|
import {
|
|
|
|
|
LiveKitRoom,
|
|
|
|
|
VideoConference,
|
2023-01-20 19:09:26 +01:00
|
|
|
formatChatMessageLinks,
|
2023-10-19 08:44:21 +02:00
|
|
|
useToken,
|
2023-11-10 10:30:32 +01:00
|
|
|
LocalUserChoices,
|
2023-01-19 19:56:00 +01:00
|
|
|
} from '@livekit/components-react';
|
2023-08-30 11:25:22 +02:00
|
|
|
import {
|
2023-11-10 10:30:32 +01:00
|
|
|
DeviceUnsupportedError,
|
2023-08-30 11:25:22 +02:00
|
|
|
ExternalE2EEKeyProvider,
|
|
|
|
|
LogLevel,
|
|
|
|
|
Room,
|
|
|
|
|
RoomConnectOptions,
|
|
|
|
|
RoomOptions,
|
2023-10-23 19:34:55 +02:00
|
|
|
VideoCodec,
|
2023-08-30 11:25:22 +02:00
|
|
|
VideoPresets,
|
|
|
|
|
} from 'livekit-client';
|
2022-10-24 17:03:12 +02:00
|
|
|
|
2023-01-19 19:56:00 +01:00
|
|
|
import type { NextPage } from 'next';
|
2023-10-19 08:44:21 +02:00
|
|
|
import dynamic from 'next/dynamic';
|
2023-01-19 19:56:00 +01:00
|
|
|
import Head from 'next/head';
|
|
|
|
|
import { useRouter } from 'next/router';
|
2023-11-10 10:30:32 +01:00
|
|
|
import * as React from 'react';
|
2023-01-19 19:56:00 +01:00
|
|
|
import { DebugMode } from '../../lib/Debug';
|
2023-11-10 10:30:32 +01:00
|
|
|
import { decodePassphrase, useServerUrl } from '../../lib/client-utils';
|
2023-09-07 18:59:34 +02:00
|
|
|
|
|
|
|
|
const PreJoinNoSSR = dynamic(
|
|
|
|
|
async () => {
|
|
|
|
|
return (await import('@livekit/components-react')).PreJoin;
|
|
|
|
|
},
|
|
|
|
|
{ ssr: false },
|
|
|
|
|
);
|
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-11-10 10:30:32 +01:00
|
|
|
const [preJoinChoices, setPreJoinChoices] = React.useState<LocalUserChoices | undefined>(
|
|
|
|
|
undefined,
|
|
|
|
|
);
|
2023-09-07 18:59:34 +02:00
|
|
|
|
|
|
|
|
function handlePreJoinSubmit(values: LocalUserChoices) {
|
|
|
|
|
setPreJoinChoices(values);
|
|
|
|
|
}
|
2023-01-19 19:56:00 +01:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>LiveKit Meet</title>
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
|
|
|
|
|
2023-03-13 16:46:37 +01:00
|
|
|
<main data-lk-theme="default">
|
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}
|
2023-03-30 13:43:35 +02:00
|
|
|
onLeave={() => {
|
|
|
|
|
router.push('/');
|
|
|
|
|
}}
|
2023-01-19 19:56:00 +01:00
|
|
|
></ActiveRoom>
|
|
|
|
|
) : (
|
|
|
|
|
<div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
|
2023-09-07 18:59:34 +02:00
|
|
|
<PreJoinNoSSR
|
2023-01-19 19:56:00 +01:00
|
|
|
onError={(err) => console.log('error while setting up prejoin', err)}
|
|
|
|
|
defaults={{
|
|
|
|
|
username: '',
|
|
|
|
|
videoEnabled: true,
|
|
|
|
|
audioEnabled: true,
|
|
|
|
|
}}
|
2023-09-07 18:59:34 +02:00
|
|
|
onSubmit={handlePreJoinSubmit}
|
|
|
|
|
></PreJoinNoSSR>
|
2023-01-19 19:56:00 +01:00
|
|
|
</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;
|
2023-01-20 15:41:00 +01:00
|
|
|
region?: string;
|
2023-01-19 19:56:00 +01:00
|
|
|
onLeave?: () => void;
|
|
|
|
|
};
|
|
|
|
|
const ActiveRoom = ({ roomName, userChoices, onLeave }: ActiveRoomProps) => {
|
2023-02-14 09:40:08 +01:00
|
|
|
const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, {
|
2023-01-19 19:56:00 +01:00
|
|
|
userInfo: {
|
|
|
|
|
identity: userChoices.username,
|
|
|
|
|
name: userChoices.username,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
2023-01-20 15:41:00 +01:00
|
|
|
const router = useRouter();
|
2023-10-23 19:34:55 +02:00
|
|
|
const { region, hq, codec } = router.query;
|
2023-01-20 15:41:00 +01:00
|
|
|
|
2023-11-10 10:30:32 +01:00
|
|
|
const e2eePassphrase =
|
|
|
|
|
typeof window !== 'undefined' && decodePassphrase(location.hash.substring(1));
|
|
|
|
|
|
2023-01-20 15:41:00 +01:00
|
|
|
const liveKitUrl = useServerUrl(region as string | undefined);
|
|
|
|
|
|
2023-08-30 11:25:22 +02:00
|
|
|
const worker =
|
|
|
|
|
typeof window !== 'undefined' &&
|
2023-11-10 10:30:32 +01:00
|
|
|
e2eePassphrase &&
|
2023-08-30 11:25:22 +02:00
|
|
|
new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
|
|
|
|
|
|
2023-11-10 10:30:32 +01:00
|
|
|
const e2eeEnabled = !!(e2eePassphrase && worker);
|
2023-08-30 19:48:27 +02:00
|
|
|
const keyProvider = new ExternalE2EEKeyProvider();
|
|
|
|
|
|
2023-11-10 10:30:32 +01:00
|
|
|
const roomOptions = React.useMemo((): RoomOptions => {
|
2022-10-24 17:03:12 +02:00
|
|
|
return {
|
2023-01-19 19:56:00 +01:00
|
|
|
videoCaptureDefaults: {
|
|
|
|
|
deviceId: userChoices.videoDeviceId ?? undefined,
|
2023-03-07 15:51:08 +01:00
|
|
|
resolution: hq === 'true' ? VideoPresets.h2160 : VideoPresets.h720,
|
|
|
|
|
},
|
|
|
|
|
publishDefaults: {
|
2023-09-07 18:59:34 +02:00
|
|
|
dtx: false,
|
2023-03-07 15:51:08 +01:00
|
|
|
videoSimulcastLayers:
|
|
|
|
|
hq === 'true'
|
|
|
|
|
? [VideoPresets.h1080, VideoPresets.h720]
|
|
|
|
|
: [VideoPresets.h540, VideoPresets.h216],
|
2023-09-01 08:44:54 +02:00
|
|
|
red: !e2eeEnabled,
|
2023-10-23 19:34:55 +02:00
|
|
|
videoCodec: codec as VideoCodec | undefined,
|
2023-01-19 19:56:00 +01:00
|
|
|
},
|
|
|
|
|
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,
|
2023-08-30 19:48:27 +02:00
|
|
|
e2ee: e2eeEnabled
|
|
|
|
|
? {
|
|
|
|
|
keyProvider,
|
|
|
|
|
worker,
|
|
|
|
|
}
|
|
|
|
|
: undefined,
|
2022-10-24 17:03:12 +02:00
|
|
|
};
|
2023-10-23 19:34:55 +02:00
|
|
|
}, [userChoices, hq, codec]);
|
2022-10-24 17:03:12 +02:00
|
|
|
|
2023-11-10 10:30:32 +01:00
|
|
|
const room = React.useMemo(() => new Room(roomOptions), []);
|
2023-08-30 11:25:22 +02:00
|
|
|
|
2023-08-30 19:48:27 +02:00
|
|
|
if (e2eeEnabled) {
|
2023-11-10 10:30:32 +01:00
|
|
|
keyProvider.setKey(decodePassphrase(e2eePassphrase));
|
|
|
|
|
room.setE2EEEnabled(true).catch((e) => {
|
|
|
|
|
if (e instanceof DeviceUnsupportedError) {
|
|
|
|
|
alert(
|
|
|
|
|
`You're trying to join an encrypted meeting, but your browser does not support it. Please update it to the latest version and try again.`,
|
|
|
|
|
);
|
|
|
|
|
console.error(e);
|
|
|
|
|
}
|
|
|
|
|
});
|
2023-08-30 19:48:27 +02:00
|
|
|
}
|
2023-11-10 10:30:32 +01:00
|
|
|
const connectOptions = React.useMemo((): RoomConnectOptions => {
|
2023-08-17 19:01:59 +02:00
|
|
|
return {
|
2023-09-14 18:53:44 +02:00
|
|
|
autoSubscribe: true,
|
2023-08-17 19:01:59 +02:00
|
|
|
};
|
|
|
|
|
}, []);
|
|
|
|
|
|
2023-01-19 19:56:00 +01:00
|
|
|
return (
|
2023-01-20 15:41:00 +01:00
|
|
|
<>
|
|
|
|
|
{liveKitUrl && (
|
|
|
|
|
<LiveKitRoom
|
2023-08-30 11:25:22 +02:00
|
|
|
room={room}
|
2023-01-20 15:41:00 +01:00
|
|
|
token={token}
|
|
|
|
|
serverUrl={liveKitUrl}
|
2023-08-17 19:01:59 +02:00
|
|
|
connectOptions={connectOptions}
|
2023-01-20 15:41:00 +01:00
|
|
|
video={userChoices.videoEnabled}
|
|
|
|
|
audio={userChoices.audioEnabled}
|
|
|
|
|
onDisconnected={onLeave}
|
|
|
|
|
>
|
2023-01-20 19:09:26 +01:00
|
|
|
<VideoConference chatMessageFormatter={formatChatMessageLinks} />
|
2023-01-20 15:41:00 +01:00
|
|
|
<DebugMode logLevel={LogLevel.info} />
|
|
|
|
|
</LiveKitRoom>
|
|
|
|
|
)}
|
|
|
|
|
</>
|
2023-01-19 19:56:00 +01:00
|
|
|
);
|
2022-10-24 17:03:12 +02:00
|
|
|
};
|
