Compare commits
1 Commits
main
...
lukas/upda
| Author | SHA1 | Date | |
|---|---|---|---|
|
901e78f87c |
1
.gitattributes
vendored
1
.gitattributes
vendored
@ -1 +0,0 @@
|
||||
public/background-images/*.jpg filter=lfs diff=lfs merge=lfs -text
|
||||
BIN
.github/assets/template-dark.webp
vendored
BIN
.github/assets/template-dark.webp
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 758 B |
31
.github/assets/template-graphic.svg
vendored
31
.github/assets/template-graphic.svg
vendored
@ -1,31 +0,0 @@
|
||||
<svg width="270" height="151" viewBox="0 0 270 151" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="270" height="151" fill="#070707"/>
|
||||
<rect x="8.5" y="8.5" width="192" height="134" rx="1.5" fill="#131313"/>
|
||||
<rect x="8.5" y="8.5" width="192" height="134" rx="1.5" stroke="#1F1F1F"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M101.167 71.4998C101.167 69.6589 102.66 68.1665 104.501 68.1665C106.342 68.1665 107.834 69.6589 107.834 71.4998C107.834 73.3408 106.342 74.8332 104.501 74.8332C102.66 74.8332 101.167 73.3408 101.167 71.4998Z" fill="#666666"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M97.834 82.1665C97.834 78.4846 100.819 75.4998 104.501 75.4998C108.183 75.4998 111.167 78.4846 111.167 82.1665V82.8332H97.834V82.1665Z" fill="#666666"/>
|
||||
<rect x="209.5" y="8.5" width="52" height="38.6667" rx="1.5" fill="#131313"/>
|
||||
<rect x="209.5" y="8.5" width="52" height="38.6667" rx="1.5" stroke="#1F1F1F"/>
|
||||
<g clip-path="url(#clip0_834_19648)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M232.167 23.8333C232.167 21.9924 233.66 20.5 235.501 20.5C237.342 20.5 238.834 21.9924 238.834 23.8333C238.834 25.6743 237.342 27.1667 235.501 27.1667C233.66 27.1667 232.167 25.6743 232.167 23.8333Z" fill="#666666"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M228.834 34.5C228.834 30.8181 231.819 27.8333 235.501 27.8333C239.183 27.8333 242.167 30.8181 242.167 34.5V35.1667H228.834V34.5Z" fill="#666666"/>
|
||||
</g>
|
||||
<rect x="209.5" y="56.1665" width="52" height="38.6667" rx="1.5" fill="#131313"/>
|
||||
<rect x="209.5" y="56.1665" width="52" height="38.6667" rx="1.5" stroke="#CCCCCC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M232.167 71.4998C232.167 69.6589 233.66 68.1665 235.501 68.1665C237.342 68.1665 238.834 69.6589 238.834 71.4998C238.834 73.3408 237.342 74.8332 235.501 74.8332C233.66 74.8332 232.167 73.3408 232.167 71.4998Z" fill="#CCCCCC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M228.834 82.1665C228.834 78.4846 231.819 75.4998 235.501 75.4998C239.183 75.4998 242.167 78.4846 242.167 82.1665V82.8332H228.834V82.1665Z" fill="#CCCCCC"/>
|
||||
<rect x="209.5" y="103.833" width="52" height="38.6667" rx="1.5" fill="#131313"/>
|
||||
<rect x="209.5" y="103.833" width="52" height="38.6667" rx="1.5" stroke="#1F1F1F"/>
|
||||
<g clip-path="url(#clip1_834_19648)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M232.167 119.167C232.167 117.326 233.66 115.833 235.501 115.833C237.342 115.833 238.834 117.326 238.834 119.167C238.834 121.008 237.342 122.5 235.501 122.5C233.66 122.5 232.167 121.008 232.167 119.167Z" fill="#666666"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M228.834 129.833C228.834 126.152 231.819 123.167 235.501 123.167C239.183 123.167 242.167 126.152 242.167 129.833V130.5H228.834V129.833Z" fill="#666666"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_834_19648">
|
||||
<rect width="16" height="16" fill="white" transform="translate(227.5 19.8335)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_834_19648">
|
||||
<rect width="16" height="16" fill="white" transform="translate(227.5 115.167)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.0 KiB |
BIN
.github/assets/template-light.webp
vendored
BIN
.github/assets/template-light.webp
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 794 B |
31
.github/workflows/sync-to-production.yaml
vendored
31
.github/workflows/sync-to-production.yaml
vendored
@ -1,16 +1,33 @@
|
||||
# .github/workflows/sync-to-production.yaml
|
||||
name: Sync main to sandbox-production
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
pull-requests: write
|
||||
|
||||
jobs:
|
||||
sync:
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: write
|
||||
|
||||
steps:
|
||||
- uses: livekit-examples/sandbox-deploy-action@v1
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
production_branch: 'sandbox-production'
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
fetch-depth: 0 # Fetch all history so we can force push
|
||||
|
||||
- name: Set up Git
|
||||
run: |
|
||||
git config --global user.name 'github-actions[bot]'
|
||||
git config --global user.email 'github-actions[bot]@livekit.io'
|
||||
|
||||
- name: Sync to sandbox-production
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
run: |
|
||||
git checkout sandbox-production || git checkout -b sandbox-production
|
||||
git merge --strategy-option theirs main
|
||||
git push origin sandbox-production
|
||||
|
||||
32
.github/workflows/test.yaml
vendored
32
.github/workflows/test.yaml
vendored
@ -1,32 +0,0 @@
|
||||
name: Test
|
||||
on:
|
||||
push:
|
||||
branches: [ main ]
|
||||
pull_request:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
- uses: pnpm/action-setup@v4
|
||||
- name: Use Node.js 22
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 24
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: ESLint
|
||||
run: pnpm lint
|
||||
|
||||
- name: Prettier
|
||||
run: pnpm format:check
|
||||
|
||||
- name: Run Tests
|
||||
run: pnpm test
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
<br>
|
||||
|
||||
LiveKit Meet is an open source video conferencing app built on [LiveKit Components](https://github.com/livekit/components-js), [LiveKit Cloud](https://cloud.livekit.io/), and Next.js. It's been completely redesigned from the ground up using our new components library.
|
||||
LiveKit Meet is an open source video conferencing app built on [LiveKit Components](https://github.com/livekit/components-js), [LiveKit Cloud](https://livekit.io/cloud), and Next.js. It's been completely redesigned from the ground up using our new components library.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { randomString } from '@/lib/client-utils';
|
||||
import { getLiveKitURL } from '@/lib/getLiveKitURL';
|
||||
import { ConnectionDetails } from '@/lib/types';
|
||||
import { AccessToken, AccessTokenOptions, VideoGrant } from 'livekit-server-sdk';
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
@ -8,8 +7,6 @@ const API_KEY = process.env.LIVEKIT_API_KEY;
|
||||
const API_SECRET = process.env.LIVEKIT_API_SECRET;
|
||||
const LIVEKIT_URL = process.env.LIVEKIT_URL;
|
||||
|
||||
const COOKIE_KEY = 'random-participant-postfix';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
// Parse query parameters
|
||||
@ -17,11 +14,7 @@ export async function GET(request: NextRequest) {
|
||||
const participantName = request.nextUrl.searchParams.get('participantName');
|
||||
const metadata = request.nextUrl.searchParams.get('metadata') ?? '';
|
||||
const region = request.nextUrl.searchParams.get('region');
|
||||
if (!LIVEKIT_URL) {
|
||||
throw new Error('LIVEKIT_URL is not defined');
|
||||
}
|
||||
const livekitServerUrl = region ? getLiveKitURL(LIVEKIT_URL, region) : LIVEKIT_URL;
|
||||
let randomParticipantPostfix = request.cookies.get(COOKIE_KEY)?.value;
|
||||
const livekitServerUrl = region ? getLiveKitURL(region) : LIVEKIT_URL;
|
||||
if (livekitServerUrl === undefined) {
|
||||
throw new Error('Invalid region');
|
||||
}
|
||||
@ -34,12 +27,9 @@ export async function GET(request: NextRequest) {
|
||||
}
|
||||
|
||||
// Generate participant token
|
||||
if (!randomParticipantPostfix) {
|
||||
randomParticipantPostfix = randomString(4);
|
||||
}
|
||||
const participantToken = await createParticipantToken(
|
||||
{
|
||||
identity: `${participantName}__${randomParticipantPostfix}`,
|
||||
identity: `${participantName}__${randomString(4)}`,
|
||||
name: participantName,
|
||||
metadata,
|
||||
},
|
||||
@ -53,12 +43,7 @@ export async function GET(request: NextRequest) {
|
||||
participantToken: participantToken,
|
||||
participantName: participantName,
|
||||
};
|
||||
return new NextResponse(JSON.stringify(data), {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Set-Cookie': `${COOKIE_KEY}=${randomParticipantPostfix}; Path=/; HttpOnly; SameSite=Strict; Secure; Expires=${getCookieExpirationTime()}`,
|
||||
},
|
||||
});
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
return new NextResponse(error.message, { status: 500 });
|
||||
@ -80,10 +65,17 @@ function createParticipantToken(userInfo: AccessTokenOptions, roomName: string)
|
||||
return at.toJwt();
|
||||
}
|
||||
|
||||
function getCookieExpirationTime(): string {
|
||||
var now = new Date();
|
||||
var time = now.getTime();
|
||||
var expireTime = time + 60 * 120 * 1000;
|
||||
now.setTime(expireTime);
|
||||
return now.toUTCString();
|
||||
/**
|
||||
* Get the LiveKit server URL for the given region.
|
||||
*/
|
||||
function getLiveKitURL(region: string | null): string {
|
||||
let targetKey = 'LIVEKIT_URL';
|
||||
if (region) {
|
||||
targetKey = `LIVEKIT_URL_${region}`.toUpperCase();
|
||||
}
|
||||
const url = process.env[targetKey];
|
||||
if (!url) {
|
||||
throw new Error(`${targetKey} is not defined`);
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { formatChatMessageLinks, RoomContext, VideoConference } from '@livekit/components-react';
|
||||
import { formatChatMessageLinks, LiveKitRoom, VideoConference } from '@livekit/components-react';
|
||||
import {
|
||||
ExternalE2EEKeyProvider,
|
||||
LogLevel,
|
||||
@ -11,24 +11,23 @@ import {
|
||||
type VideoCodec,
|
||||
} from 'livekit-client';
|
||||
import { DebugMode } from '@/lib/Debug';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { KeyboardShortcuts } from '@/lib/KeyboardShortcuts';
|
||||
import { useMemo } from 'react';
|
||||
import { decodePassphrase } from '@/lib/client-utils';
|
||||
import { SettingsMenu } from '@/lib/SettingsMenu';
|
||||
import { useSetupE2EE } from '@/lib/useSetupE2EE';
|
||||
import { useLowCPUOptimizer } from '@/lib/usePerfomanceOptimiser';
|
||||
|
||||
export function VideoConferenceClientImpl(props: {
|
||||
liveKitUrl: string;
|
||||
token: string;
|
||||
codec: VideoCodec | undefined;
|
||||
singlePeerConnection: boolean | undefined;
|
||||
}) {
|
||||
const worker =
|
||||
typeof window !== 'undefined' &&
|
||||
new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
|
||||
const keyProvider = new ExternalE2EEKeyProvider();
|
||||
const { worker, e2eePassphrase } = useSetupE2EE();
|
||||
|
||||
const e2eePassphrase =
|
||||
typeof window !== 'undefined' ? decodePassphrase(window.location.hash.substring(1)) : undefined;
|
||||
const e2eeEnabled = !!(e2eePassphrase && worker);
|
||||
|
||||
const [e2eeSetupComplete, setE2eeSetupComplete] = useState(false);
|
||||
|
||||
const roomOptions = useMemo((): RoomOptions => {
|
||||
return {
|
||||
publishDefaults: {
|
||||
@ -44,55 +43,36 @@ export function VideoConferenceClientImpl(props: {
|
||||
worker,
|
||||
}
|
||||
: undefined,
|
||||
singlePeerConnection: props.singlePeerConnection,
|
||||
};
|
||||
}, [e2eeEnabled, props.codec, keyProvider, worker]);
|
||||
|
||||
const room = useMemo(() => new Room(roomOptions), [roomOptions]);
|
||||
}, []);
|
||||
|
||||
const room = useMemo(() => new Room(roomOptions), []);
|
||||
if (e2eeEnabled) {
|
||||
keyProvider.setKey(e2eePassphrase);
|
||||
room.setE2EEEnabled(true);
|
||||
}
|
||||
const connectOptions = useMemo((): RoomConnectOptions => {
|
||||
return {
|
||||
autoSubscribe: true,
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (e2eeEnabled) {
|
||||
keyProvider.setKey(e2eePassphrase).then(() => {
|
||||
room.setE2EEEnabled(true).then(() => {
|
||||
setE2eeSetupComplete(true);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
setE2eeSetupComplete(true);
|
||||
}
|
||||
}, [e2eeEnabled, e2eePassphrase, keyProvider, room, setE2eeSetupComplete]);
|
||||
|
||||
useEffect(() => {
|
||||
if (e2eeSetupComplete) {
|
||||
room.connect(props.liveKitUrl, props.token, connectOptions).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
room.localParticipant.enableCameraAndMicrophone().catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
}, [room, props.liveKitUrl, props.token, connectOptions, e2eeSetupComplete]);
|
||||
|
||||
useLowCPUOptimizer(room);
|
||||
|
||||
return (
|
||||
<div className="lk-room-container">
|
||||
<RoomContext.Provider value={room}>
|
||||
<KeyboardShortcuts />
|
||||
<VideoConference
|
||||
chatMessageFormatter={formatChatMessageLinks}
|
||||
SettingsComponent={
|
||||
process.env.NEXT_PUBLIC_SHOW_SETTINGS_MENU === 'true' ? SettingsMenu : undefined
|
||||
}
|
||||
/>
|
||||
<DebugMode logLevel={LogLevel.debug} />
|
||||
</RoomContext.Provider>
|
||||
</div>
|
||||
<LiveKitRoom
|
||||
room={room}
|
||||
token={props.token}
|
||||
connectOptions={connectOptions}
|
||||
serverUrl={props.liveKitUrl}
|
||||
audio={true}
|
||||
video={true}
|
||||
>
|
||||
<VideoConference
|
||||
chatMessageFormatter={formatChatMessageLinks}
|
||||
SettingsComponent={
|
||||
process.env.NEXT_PUBLIC_SHOW_SETTINGS_MENU === 'true' ? SettingsMenu : undefined
|
||||
}
|
||||
/>
|
||||
<DebugMode logLevel={LogLevel.debug} />
|
||||
</LiveKitRoom>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,15 +2,14 @@ import { videoCodecs } from 'livekit-client';
|
||||
import { VideoConferenceClientImpl } from './VideoConferenceClientImpl';
|
||||
import { isVideoCodec } from '@/lib/types';
|
||||
|
||||
export default async function CustomRoomConnection(props: {
|
||||
searchParams: Promise<{
|
||||
export default function CustomRoomConnection(props: {
|
||||
searchParams: {
|
||||
liveKitUrl?: string;
|
||||
token?: string;
|
||||
codec?: string;
|
||||
singlePC?: string;
|
||||
}>;
|
||||
};
|
||||
}) {
|
||||
const { liveKitUrl, token, codec, singlePC } = await props.searchParams;
|
||||
const { liveKitUrl, token, codec } = props.searchParams;
|
||||
if (typeof liveKitUrl !== 'string') {
|
||||
return <h2>Missing LiveKit URL</h2>;
|
||||
}
|
||||
@ -22,13 +21,8 @@ export default async function CustomRoomConnection(props: {
|
||||
}
|
||||
|
||||
return (
|
||||
<main data-lk-theme="default" style={{ height: '100%' }}>
|
||||
<VideoConferenceClientImpl
|
||||
liveKitUrl={liveKitUrl}
|
||||
token={token}
|
||||
codec={codec}
|
||||
singlePeerConnection={singlePC === 'true'}
|
||||
/>
|
||||
<main data-lk-theme="default">
|
||||
<VideoConferenceClientImpl liveKitUrl={liveKitUrl} token={token} codec={codec} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@ import '../styles/globals.css';
|
||||
import '@livekit/components-styles';
|
||||
import '@livekit/components-styles/prefabs';
|
||||
import type { Metadata, Viewport } from 'next';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
@ -51,10 +50,7 @@ export const viewport: Viewport = {
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body data-lk-theme="default">
|
||||
<Toaster />
|
||||
{children}
|
||||
</body>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,17 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { decodePassphrase } from '@/lib/client-utils';
|
||||
import { DebugMode } from '@/lib/Debug';
|
||||
import { KeyboardShortcuts } from '@/lib/KeyboardShortcuts';
|
||||
import { RecordingIndicator } from '@/lib/RecordingIndicator';
|
||||
import { SettingsMenu } from '@/lib/SettingsMenu';
|
||||
import { ConnectionDetails } from '@/lib/types';
|
||||
import {
|
||||
formatChatMessageLinks,
|
||||
LiveKitRoom,
|
||||
LocalUserChoices,
|
||||
PreJoin,
|
||||
RoomContext,
|
||||
VideoConference,
|
||||
} from '@livekit/components-react';
|
||||
import {
|
||||
@ -22,13 +20,9 @@ import {
|
||||
Room,
|
||||
DeviceUnsupportedError,
|
||||
RoomConnectOptions,
|
||||
RoomEvent,
|
||||
TrackPublishDefaults,
|
||||
VideoCaptureOptions,
|
||||
} from 'livekit-client';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useSetupE2EE } from '@/lib/useSetupE2EE';
|
||||
import { useLowCPUOptimizer } from '@/lib/usePerfomanceOptimiser';
|
||||
import React from 'react';
|
||||
|
||||
const CONN_DETAILS_ENDPOINT =
|
||||
process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? '/api/connection-details';
|
||||
@ -97,137 +91,90 @@ function VideoConferenceComponent(props: {
|
||||
codec: VideoCodec;
|
||||
};
|
||||
}) {
|
||||
const keyProvider = new ExternalE2EEKeyProvider();
|
||||
const { worker, e2eePassphrase } = useSetupE2EE();
|
||||
const e2eeEnabled = !!(e2eePassphrase && worker);
|
||||
const e2eePassphrase =
|
||||
typeof window !== 'undefined' && decodePassphrase(location.hash.substring(1));
|
||||
|
||||
const [e2eeSetupComplete, setE2eeSetupComplete] = React.useState(false);
|
||||
const worker =
|
||||
typeof window !== 'undefined' &&
|
||||
e2eePassphrase &&
|
||||
new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
|
||||
const e2eeEnabled = !!(e2eePassphrase && worker);
|
||||
const keyProvider = new ExternalE2EEKeyProvider();
|
||||
|
||||
const roomOptions = React.useMemo((): RoomOptions => {
|
||||
let videoCodec: VideoCodec | undefined = props.options.codec ? props.options.codec : 'vp9';
|
||||
if (e2eeEnabled && (videoCodec === 'av1' || videoCodec === 'vp9')) {
|
||||
videoCodec = undefined;
|
||||
}
|
||||
const videoCaptureDefaults: VideoCaptureOptions = {
|
||||
deviceId: props.userChoices.videoDeviceId ?? undefined,
|
||||
resolution: props.options.hq ? VideoPresets.h2160 : VideoPresets.h720,
|
||||
};
|
||||
const publishDefaults: TrackPublishDefaults = {
|
||||
dtx: false,
|
||||
videoSimulcastLayers: props.options.hq
|
||||
? [VideoPresets.h1080, VideoPresets.h720]
|
||||
: [VideoPresets.h540, VideoPresets.h216],
|
||||
red: !e2eeEnabled,
|
||||
videoCodec,
|
||||
};
|
||||
return {
|
||||
videoCaptureDefaults: videoCaptureDefaults,
|
||||
publishDefaults: publishDefaults,
|
||||
videoCaptureDefaults: {
|
||||
deviceId: props.userChoices.videoDeviceId ?? undefined,
|
||||
resolution: props.options.hq ? VideoPresets.h2160 : VideoPresets.h720,
|
||||
},
|
||||
publishDefaults: {
|
||||
dtx: false,
|
||||
videoSimulcastLayers: props.options.hq
|
||||
? [VideoPresets.h1080, VideoPresets.h720]
|
||||
: [VideoPresets.h540, VideoPresets.h216],
|
||||
red: !e2eeEnabled,
|
||||
videoCodec,
|
||||
},
|
||||
audioCaptureDefaults: {
|
||||
deviceId: props.userChoices.audioDeviceId ?? undefined,
|
||||
},
|
||||
adaptiveStream: true,
|
||||
adaptiveStream: { pixelDensity: 'screen' },
|
||||
dynacast: true,
|
||||
e2ee: keyProvider && worker && e2eeEnabled ? { keyProvider, worker } : undefined,
|
||||
singlePeerConnection: true,
|
||||
e2ee: e2eeEnabled
|
||||
? {
|
||||
keyProvider,
|
||||
worker,
|
||||
}
|
||||
: undefined,
|
||||
};
|
||||
// @ts-ignore
|
||||
setLogLevel('debug', 'lk-e2ee');
|
||||
}, [props.userChoices, props.options.hq, props.options.codec]);
|
||||
|
||||
const room = React.useMemo(() => new Room(roomOptions), []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (e2eeEnabled) {
|
||||
keyProvider
|
||||
.setKey(decodePassphrase(e2eePassphrase))
|
||||
.then(() => {
|
||||
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);
|
||||
} else {
|
||||
throw e;
|
||||
}
|
||||
});
|
||||
})
|
||||
.then(() => setE2eeSetupComplete(true));
|
||||
} else {
|
||||
setE2eeSetupComplete(true);
|
||||
}
|
||||
}, [e2eeEnabled, room, e2eePassphrase]);
|
||||
|
||||
if (e2eeEnabled) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
const connectOptions = React.useMemo((): RoomConnectOptions => {
|
||||
return {
|
||||
autoSubscribe: true,
|
||||
};
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
room.on(RoomEvent.Disconnected, handleOnLeave);
|
||||
room.on(RoomEvent.EncryptionError, handleEncryptionError);
|
||||
room.on(RoomEvent.MediaDevicesError, handleError);
|
||||
|
||||
if (e2eeSetupComplete) {
|
||||
room
|
||||
.connect(
|
||||
props.connectionDetails.serverUrl,
|
||||
props.connectionDetails.participantToken,
|
||||
connectOptions,
|
||||
)
|
||||
.catch((error) => {
|
||||
handleError(error);
|
||||
});
|
||||
if (props.userChoices.videoEnabled) {
|
||||
room.localParticipant.setCameraEnabled(true).catch((error) => {
|
||||
handleError(error);
|
||||
});
|
||||
}
|
||||
if (props.userChoices.audioEnabled) {
|
||||
room.localParticipant.setMicrophoneEnabled(true).catch((error) => {
|
||||
handleError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
room.off(RoomEvent.Disconnected, handleOnLeave);
|
||||
room.off(RoomEvent.EncryptionError, handleEncryptionError);
|
||||
room.off(RoomEvent.MediaDevicesError, handleError);
|
||||
};
|
||||
}, [e2eeSetupComplete, room, props.connectionDetails, props.userChoices]);
|
||||
|
||||
const lowPowerMode = useLowCPUOptimizer(room);
|
||||
|
||||
const router = useRouter();
|
||||
const handleOnLeave = React.useCallback(() => router.push('/'), [router]);
|
||||
const handleError = React.useCallback((error: Error) => {
|
||||
console.error(error);
|
||||
alert(`Encountered an unexpected error, check the console logs for details: ${error.message}`);
|
||||
}, []);
|
||||
const handleEncryptionError = React.useCallback((error: Error) => {
|
||||
console.error(error);
|
||||
alert(
|
||||
`Encountered an unexpected encryption error, check the console logs for details: ${error.message}`,
|
||||
);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (lowPowerMode) {
|
||||
console.warn('Low power mode enabled');
|
||||
}
|
||||
}, [lowPowerMode]);
|
||||
|
||||
return (
|
||||
<div className="lk-room-container">
|
||||
<RoomContext.Provider value={room}>
|
||||
<KeyboardShortcuts />
|
||||
<>
|
||||
<LiveKitRoom
|
||||
room={room}
|
||||
token={props.connectionDetails.participantToken}
|
||||
serverUrl={props.connectionDetails.serverUrl}
|
||||
connectOptions={connectOptions}
|
||||
video={props.userChoices.videoEnabled}
|
||||
audio={props.userChoices.audioEnabled}
|
||||
onDisconnected={handleOnLeave}
|
||||
>
|
||||
<VideoConference
|
||||
chatMessageFormatter={formatChatMessageLinks}
|
||||
SettingsComponent={SHOW_SETTINGS_MENU ? SettingsMenu : undefined}
|
||||
/>
|
||||
<DebugMode />
|
||||
<RecordingIndicator />
|
||||
</RoomContext.Provider>
|
||||
</div>
|
||||
</LiveKitRoom>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,32 +2,25 @@ import * as React from 'react';
|
||||
import { PageClientImpl } from './PageClientImpl';
|
||||
import { isVideoCodec } from '@/lib/types';
|
||||
|
||||
export default async function Page({
|
||||
export default function Page({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ roomName: string }>;
|
||||
searchParams: Promise<{
|
||||
params: { roomName: string };
|
||||
searchParams: {
|
||||
// FIXME: We should not allow values for regions if in playground mode.
|
||||
region?: string;
|
||||
hq?: string;
|
||||
codec?: string;
|
||||
}>;
|
||||
};
|
||||
}) {
|
||||
const _params = await params;
|
||||
const _searchParams = await searchParams;
|
||||
const codec =
|
||||
typeof _searchParams.codec === 'string' && isVideoCodec(_searchParams.codec)
|
||||
? _searchParams.codec
|
||||
typeof searchParams.codec === 'string' && isVideoCodec(searchParams.codec)
|
||||
? searchParams.codec
|
||||
: 'vp9';
|
||||
const hq = _searchParams.hq === 'true' ? true : false;
|
||||
const hq = searchParams.hq === 'true' ? true : false;
|
||||
|
||||
return (
|
||||
<PageClientImpl
|
||||
roomName={_params.roomName}
|
||||
region={_searchParams.region}
|
||||
hq={hq}
|
||||
codec={codec}
|
||||
/>
|
||||
<PageClientImpl roomName={params.roomName} region={searchParams.region} hq={hq} codec={codec} />
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,175 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
MediaDeviceMenu,
|
||||
TrackReference,
|
||||
TrackToggle,
|
||||
useLocalParticipant,
|
||||
VideoTrack,
|
||||
} from '@livekit/components-react';
|
||||
import { BackgroundBlur, VirtualBackground } from '@livekit/track-processors';
|
||||
import { isLocalTrack, LocalTrackPublication, Track } from 'livekit-client';
|
||||
import Desk from '../public/background-images/samantha-gades-BlIhVfXbi9s-unsplash.jpg';
|
||||
import Nature from '../public/background-images/ali-kazal-tbw_KQE3Cbg-unsplash.jpg';
|
||||
|
||||
// Background image paths
|
||||
const BACKGROUND_IMAGES = [
|
||||
{ name: 'Desk', path: Desk },
|
||||
{ name: 'Nature', path: Nature },
|
||||
];
|
||||
|
||||
// Background options
|
||||
type BackgroundType = 'none' | 'blur' | 'image';
|
||||
|
||||
export function CameraSettings() {
|
||||
const { cameraTrack, localParticipant } = useLocalParticipant();
|
||||
const [backgroundType, setBackgroundType] = React.useState<BackgroundType>(
|
||||
(cameraTrack as LocalTrackPublication)?.track?.getProcessor()?.name === 'background-blur'
|
||||
? 'blur'
|
||||
: (cameraTrack as LocalTrackPublication)?.track?.getProcessor()?.name === 'virtual-background'
|
||||
? 'image'
|
||||
: 'none',
|
||||
);
|
||||
|
||||
const [virtualBackgroundImagePath, setVirtualBackgroundImagePath] = React.useState<string | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const camTrackRef: TrackReference | undefined = React.useMemo(() => {
|
||||
return cameraTrack
|
||||
? { participant: localParticipant, publication: cameraTrack, source: Track.Source.Camera }
|
||||
: undefined;
|
||||
}, [localParticipant, cameraTrack]);
|
||||
|
||||
const selectBackground = (type: BackgroundType, imagePath?: string) => {
|
||||
setBackgroundType(type);
|
||||
if (type === 'image' && imagePath) {
|
||||
setVirtualBackgroundImagePath(imagePath);
|
||||
} else if (type !== 'image') {
|
||||
setVirtualBackgroundImagePath(null);
|
||||
}
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isLocalTrack(cameraTrack?.track)) {
|
||||
if (backgroundType === 'blur') {
|
||||
cameraTrack.track?.setProcessor(BackgroundBlur());
|
||||
} else if (backgroundType === 'image' && virtualBackgroundImagePath) {
|
||||
cameraTrack.track?.setProcessor(VirtualBackground(virtualBackgroundImagePath));
|
||||
} else {
|
||||
cameraTrack.track?.stopProcessor();
|
||||
}
|
||||
}
|
||||
}, [cameraTrack, backgroundType, virtualBackgroundImagePath]);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
{camTrackRef && (
|
||||
<VideoTrack
|
||||
style={{
|
||||
maxHeight: '280px',
|
||||
objectFit: 'contain',
|
||||
objectPosition: 'right',
|
||||
transform: 'scaleX(-1)',
|
||||
}}
|
||||
trackRef={camTrackRef}
|
||||
/>
|
||||
)}
|
||||
|
||||
<section className="lk-button-group">
|
||||
<TrackToggle source={Track.Source.Camera}>Camera</TrackToggle>
|
||||
<div className="lk-button-group-menu">
|
||||
<MediaDeviceMenu kind="videoinput" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<div style={{ marginBottom: '8px' }}>Background Effects</div>
|
||||
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
||||
<button
|
||||
onClick={() => selectBackground('none')}
|
||||
className="lk-button"
|
||||
aria-pressed={backgroundType === 'none'}
|
||||
style={{
|
||||
border: backgroundType === 'none' ? '2px solid #0090ff' : '1px solid #d1d1d1',
|
||||
minWidth: '80px',
|
||||
}}
|
||||
>
|
||||
None
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => selectBackground('blur')}
|
||||
className="lk-button"
|
||||
aria-pressed={backgroundType === 'blur'}
|
||||
style={{
|
||||
border: backgroundType === 'blur' ? '2px solid #0090ff' : '1px solid #d1d1d1',
|
||||
minWidth: '80px',
|
||||
backgroundColor: '#f0f0f0',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
height: '60px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: '#e0e0e0',
|
||||
filter: 'blur(8px)',
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
padding: '2px 5px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
>
|
||||
Blur
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{BACKGROUND_IMAGES.map((image) => (
|
||||
<button
|
||||
key={image.path.src}
|
||||
onClick={() => selectBackground('image', image.path.src)}
|
||||
className="lk-button"
|
||||
aria-pressed={
|
||||
backgroundType === 'image' && virtualBackgroundImagePath === image.path.src
|
||||
}
|
||||
style={{
|
||||
backgroundImage: `url(${image.path.src})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
width: '80px',
|
||||
height: '60px',
|
||||
border:
|
||||
backgroundType === 'image' && virtualBackgroundImagePath === image.path.src
|
||||
? '2px solid #0090ff'
|
||||
: '1px solid #d1d1d1',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
padding: '2px 5px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
>
|
||||
{image.name}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { useRoomContext } from '@livekit/components-react';
|
||||
import { setLogLevel, LogLevel, RemoteTrackPublication, setLogExtension } from 'livekit-client';
|
||||
// @ts-ignore
|
||||
import { tinykeys } from 'tinykeys';
|
||||
import { datadogLogs } from '@datadog/browser-logs';
|
||||
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Track } from 'livekit-client';
|
||||
import { useTrackToggle } from '@livekit/components-react';
|
||||
|
||||
export function KeyboardShortcuts() {
|
||||
const { toggle: toggleMic } = useTrackToggle({ source: Track.Source.Microphone });
|
||||
const { toggle: toggleCamera } = useTrackToggle({ source: Track.Source.Camera });
|
||||
|
||||
React.useEffect(() => {
|
||||
function handleShortcut(event: KeyboardEvent) {
|
||||
// Toggle microphone: Cmd/Ctrl-Shift-A
|
||||
if (toggleMic && event.key === 'A' && (event.ctrlKey || event.metaKey)) {
|
||||
event.preventDefault();
|
||||
toggleMic();
|
||||
}
|
||||
|
||||
// Toggle camera: Cmd/Ctrl-Shift-V
|
||||
if (event.key === 'V' && (event.ctrlKey || event.metaKey)) {
|
||||
event.preventDefault();
|
||||
toggleCamera();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', handleShortcut);
|
||||
return () => window.removeEventListener('keydown', handleShortcut);
|
||||
}, [toggleMic, toggleCamera]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useKrispNoiseFilter } from '@livekit/components-react/krisp';
|
||||
import { TrackToggle } from '@livekit/components-react';
|
||||
import { MediaDeviceMenu } from '@livekit/components-react';
|
||||
import { Track } from 'livekit-client';
|
||||
import { isLowPowerDevice } from './client-utils';
|
||||
|
||||
export function MicrophoneSettings() {
|
||||
const { isNoiseFilterEnabled, setNoiseFilterEnabled, isNoiseFilterPending } = useKrispNoiseFilter(
|
||||
{
|
||||
filterOptions: {
|
||||
bufferOverflowMs: 100,
|
||||
bufferDropMs: 200,
|
||||
quality: isLowPowerDevice() ? 'low' : 'medium',
|
||||
onBufferDrop: () => {
|
||||
console.warn(
|
||||
'krisp buffer dropped, noise filter versions >= 0.3.2 will automatically disable the filter',
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
// enable Krisp by default on non-low power devices
|
||||
setNoiseFilterEnabled(!isLowPowerDevice());
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '10px',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<section className="lk-button-group">
|
||||
<TrackToggle source={Track.Source.Microphone}>Microphone</TrackToggle>
|
||||
<div className="lk-button-group-menu">
|
||||
<MediaDeviceMenu kind="audioinput" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button
|
||||
className="lk-button"
|
||||
onClick={() => setNoiseFilterEnabled(!isNoiseFilterEnabled)}
|
||||
disabled={isNoiseFilterPending}
|
||||
aria-pressed={isNoiseFilterEnabled}
|
||||
>
|
||||
{isNoiseFilterEnabled ? 'Disable' : 'Enable'} Enhanced Noise Cancellation
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,5 @@
|
||||
import { useIsRecording } from '@livekit/components-react';
|
||||
import * as React from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export function RecordingIndicator() {
|
||||
const isRecording = useIsRecording();
|
||||
@ -10,16 +9,7 @@ export function RecordingIndicator() {
|
||||
if (isRecording !== wasRecording) {
|
||||
setWasRecording(isRecording);
|
||||
if (isRecording) {
|
||||
toast('This meeting is being recorded', {
|
||||
duration: 3000,
|
||||
icon: '🎥',
|
||||
position: 'top-center',
|
||||
className: 'lk-button',
|
||||
style: {
|
||||
backgroundColor: 'var(--lk-danger3)',
|
||||
color: 'var(--lk-fg)',
|
||||
},
|
||||
});
|
||||
window.alert('This meeting is being recorded');
|
||||
}
|
||||
}
|
||||
}, [isRecording]);
|
||||
@ -32,7 +22,7 @@ export function RecordingIndicator() {
|
||||
left: '0',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
boxShadow: isRecording ? 'var(--lk-danger3) 0px 0px 0px 3px inset' : 'none',
|
||||
boxShadow: isRecording ? 'red 0px 0px 0px 3px inset' : 'none',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
></div>
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
'use client';
|
||||
import * as React from 'react';
|
||||
import { Track } from 'livekit-client';
|
||||
import { LocalAudioTrack, Track } from 'livekit-client';
|
||||
import {
|
||||
useMaybeLayoutContext,
|
||||
useLocalParticipant,
|
||||
MediaDeviceMenu,
|
||||
TrackToggle,
|
||||
useRoomContext,
|
||||
useIsRecording,
|
||||
} from '@livekit/components-react';
|
||||
import styles from '../styles/SettingsMenu.module.css';
|
||||
import { CameraSettings } from './CameraSettings';
|
||||
import { MicrophoneSettings } from './MicrophoneSettings';
|
||||
import type { KrispNoiseFilterProcessor } from '@livekit/krisp-noise-filter';
|
||||
|
||||
/**
|
||||
* @alpha
|
||||
*/
|
||||
@ -27,6 +28,7 @@ export function SettingsMenu(props: SettingsMenuProps) {
|
||||
const settings = React.useMemo(() => {
|
||||
return {
|
||||
media: { camera: true, microphone: true, label: 'Media Devices', speaker: true },
|
||||
effects: { label: 'Effects' },
|
||||
recording: recordingEndpoint ? { label: 'Recording' } : undefined,
|
||||
};
|
||||
}, []);
|
||||
@ -35,7 +37,40 @@ export function SettingsMenu(props: SettingsMenuProps) {
|
||||
() => Object.keys(settings).filter((t) => t !== undefined) as Array<keyof typeof settings>,
|
||||
[settings],
|
||||
);
|
||||
const { microphoneTrack } = useLocalParticipant();
|
||||
|
||||
const [activeTab, setActiveTab] = React.useState(tabs[0]);
|
||||
const [isNoiseFilterEnabled, setIsNoiseFilterEnabled] = React.useState(true);
|
||||
const [isNoiseFilterPending, setIsNoiseFilterPending] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const micPublication = microphoneTrack;
|
||||
if (micPublication && micPublication.track instanceof LocalAudioTrack) {
|
||||
const currentProcessor = micPublication.track.getProcessor();
|
||||
if (currentProcessor && currentProcessor.name === 'livekit-noise-filter') {
|
||||
setIsNoiseFilterPending(true);
|
||||
(currentProcessor as KrispNoiseFilterProcessor)
|
||||
.setEnabled(isNoiseFilterEnabled)
|
||||
.finally(() => setIsNoiseFilterPending(false));
|
||||
} else if (!currentProcessor && isNoiseFilterEnabled) {
|
||||
setIsNoiseFilterPending(true);
|
||||
import('@livekit/krisp-noise-filter')
|
||||
.then(({ KrispNoiseFilter, isKrispNoiseFilterSupported }) => {
|
||||
if (!isKrispNoiseFilterSupported()) {
|
||||
console.error('Enhanced noise filter is not supported for this browser');
|
||||
setIsNoiseFilterEnabled(false);
|
||||
return;
|
||||
}
|
||||
micPublication?.track
|
||||
// @ts-ignore
|
||||
?.setProcessor(KrispNoiseFilter())
|
||||
.then(() => console.log('successfully set noise filter'));
|
||||
})
|
||||
.catch((e) => console.error('Failed to load noise filter', e))
|
||||
.finally(() => setIsNoiseFilterPending(false));
|
||||
}
|
||||
}
|
||||
}, [isNoiseFilterEnabled, microphoneTrack]);
|
||||
|
||||
const isRecording = useIsRecording();
|
||||
const [initialRecStatus, setInitialRecStatus] = React.useState(isRecording);
|
||||
@ -74,7 +109,7 @@ export function SettingsMenu(props: SettingsMenuProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="settings-menu" style={{ width: '100%', position: 'relative' }} {...props}>
|
||||
<div className="settings-menu" style={{ width: '100%' }} {...props}>
|
||||
<div className={styles.tabs}>
|
||||
{tabs.map(
|
||||
(tab) =>
|
||||
@ -99,16 +134,22 @@ export function SettingsMenu(props: SettingsMenuProps) {
|
||||
{settings.media && settings.media.camera && (
|
||||
<>
|
||||
<h3>Camera</h3>
|
||||
<section>
|
||||
<CameraSettings />
|
||||
<section className="lk-button-group">
|
||||
<TrackToggle source={Track.Source.Camera}>Camera</TrackToggle>
|
||||
<div className="lk-button-group-menu">
|
||||
<MediaDeviceMenu kind="videoinput" />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
{settings.media && settings.media.microphone && (
|
||||
<>
|
||||
<h3>Microphone</h3>
|
||||
<section>
|
||||
<MicrophoneSettings />
|
||||
<section className="lk-button-group">
|
||||
<TrackToggle source={Track.Source.Microphone}>Microphone</TrackToggle>
|
||||
<div className="lk-button-group-menu">
|
||||
<MediaDeviceMenu kind="audioinput" />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
@ -125,6 +166,21 @@ export function SettingsMenu(props: SettingsMenuProps) {
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{activeTab === 'effects' && (
|
||||
<>
|
||||
<h3>Audio</h3>
|
||||
<section>
|
||||
<label htmlFor="noise-filter"> Enhanced Noise Cancellation</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="noise-filter"
|
||||
onChange={(ev) => setIsNoiseFilterEnabled(ev.target.checked)}
|
||||
checked={isNoiseFilterEnabled}
|
||||
disabled={isNoiseFilterPending}
|
||||
></input>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
{activeTab === 'recording' && (
|
||||
<>
|
||||
<h3>Record Meeting</h3>
|
||||
@ -141,14 +197,12 @@ export function SettingsMenu(props: SettingsMenuProps) {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
|
||||
<button
|
||||
className={`lk-button`}
|
||||
onClick={() => layoutContext?.widget.dispatch?.({ msg: 'toggle_settings' })}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className={`lk-button ${styles.settingsCloseButton}`}
|
||||
onClick={() => layoutContext?.widget.dispatch?.({ msg: 'toggle_settings' })}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -19,11 +19,3 @@ export function randomString(length: number): string {
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export function isLowPowerDevice() {
|
||||
return navigator.hardwareConcurrency < 6;
|
||||
}
|
||||
|
||||
export function isMeetStaging() {
|
||||
return new URL(location.origin).host === 'meet.staging.livekit.io';
|
||||
}
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { getLiveKitURL } from './getLiveKitURL';
|
||||
|
||||
describe('getLiveKitURL', () => {
|
||||
it('returns the original URL if no region is provided', () => {
|
||||
const url = 'https://myproject.livekit.cloud';
|
||||
expect(getLiveKitURL(url, null)).toBe(url + '/');
|
||||
});
|
||||
|
||||
it('inserts the region into livekit.cloud URLs', () => {
|
||||
const url = 'https://myproject.livekit.cloud';
|
||||
const region = 'eu';
|
||||
expect(getLiveKitURL(url, region)).toBe('https://myproject.eu.production.livekit.cloud/');
|
||||
});
|
||||
|
||||
it('inserts the region into livekit.cloud URLs and preserves the staging environment', () => {
|
||||
const url = 'https://myproject.staging.livekit.cloud';
|
||||
const region = 'eu';
|
||||
expect(getLiveKitURL(url, region)).toBe('https://myproject.eu.staging.livekit.cloud/');
|
||||
});
|
||||
|
||||
it('returns the original URL for non-livekit.cloud hosts, even with region', () => {
|
||||
const url = 'https://example.com';
|
||||
const region = 'us';
|
||||
expect(getLiveKitURL(url, region)).toBe(url + '/');
|
||||
});
|
||||
|
||||
it('handles URLs with paths and query params', () => {
|
||||
const url = 'https://myproject.livekit.cloud/room?foo=bar';
|
||||
const region = 'ap';
|
||||
expect(getLiveKitURL(url, region)).toBe(
|
||||
'https://myproject.ap.production.livekit.cloud/room?foo=bar',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
export function getLiveKitURL(projectUrl: string, region: string | null): string {
|
||||
const url = new URL(projectUrl);
|
||||
if (region && url.hostname.includes('livekit.cloud')) {
|
||||
let [projectId, ...hostParts] = url.hostname.split('.');
|
||||
if (hostParts[0] !== 'staging') {
|
||||
hostParts = ['production', ...hostParts];
|
||||
}
|
||||
const regionURL = [projectId, region, ...hostParts].join('.');
|
||||
url.hostname = regionURL;
|
||||
}
|
||||
return url.toString();
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
import {
|
||||
Room,
|
||||
ParticipantEvent,
|
||||
RoomEvent,
|
||||
RemoteTrack,
|
||||
RemoteTrackPublication,
|
||||
VideoQuality,
|
||||
LocalVideoTrack,
|
||||
isVideoTrack,
|
||||
} from 'livekit-client';
|
||||
import * as React from 'react';
|
||||
|
||||
export type LowCPUOptimizerOptions = {
|
||||
reducePublisherVideoQuality: boolean;
|
||||
reduceSubscriberVideoQuality: boolean;
|
||||
disableVideoProcessing: boolean;
|
||||
};
|
||||
|
||||
const defaultOptions: LowCPUOptimizerOptions = {
|
||||
reducePublisherVideoQuality: true,
|
||||
reduceSubscriberVideoQuality: true,
|
||||
disableVideoProcessing: false,
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* This hook ensures that on devices with low CPU, the performance is optimised when needed.
|
||||
* This is done by primarily reducing the video quality to low when the CPU is constrained.
|
||||
*/
|
||||
export function useLowCPUOptimizer(room: Room, options: Partial<LowCPUOptimizerOptions> = {}) {
|
||||
const [lowPowerMode, setLowPowerMode] = React.useState(false);
|
||||
const opts = React.useMemo(() => ({ ...defaultOptions, ...options }), [options]);
|
||||
React.useEffect(() => {
|
||||
const handleCpuConstrained = async (track: LocalVideoTrack) => {
|
||||
setLowPowerMode(true);
|
||||
console.warn('Local track CPU constrained', track);
|
||||
if (opts.reducePublisherVideoQuality) {
|
||||
track.prioritizePerformance();
|
||||
}
|
||||
if (opts.disableVideoProcessing && isVideoTrack(track)) {
|
||||
track.stopProcessor();
|
||||
}
|
||||
if (opts.reduceSubscriberVideoQuality) {
|
||||
room.remoteParticipants.forEach((participant) => {
|
||||
participant.videoTrackPublications.forEach((publication) => {
|
||||
publication.setVideoQuality(VideoQuality.LOW);
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
room.localParticipant.on(ParticipantEvent.LocalTrackCpuConstrained, handleCpuConstrained);
|
||||
return () => {
|
||||
room.localParticipant.off(ParticipantEvent.LocalTrackCpuConstrained, handleCpuConstrained);
|
||||
};
|
||||
}, [room, opts.reducePublisherVideoQuality, opts.reduceSubscriberVideoQuality]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const lowerQuality = (_: RemoteTrack, publication: RemoteTrackPublication) => {
|
||||
publication.setVideoQuality(VideoQuality.LOW);
|
||||
};
|
||||
if (lowPowerMode && opts.reduceSubscriberVideoQuality) {
|
||||
room.on(RoomEvent.TrackSubscribed, lowerQuality);
|
||||
}
|
||||
|
||||
return () => {
|
||||
room.off(RoomEvent.TrackSubscribed, lowerQuality);
|
||||
};
|
||||
}, [lowPowerMode, room, opts.reduceSubscriberVideoQuality]);
|
||||
|
||||
return lowPowerMode;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
import { ExternalE2EEKeyProvider } from 'livekit-client';
|
||||
import { decodePassphrase } from './client-utils';
|
||||
|
||||
export function useSetupE2EE() {
|
||||
const e2eePassphrase =
|
||||
typeof window !== 'undefined' ? decodePassphrase(location.hash.substring(1)) : undefined;
|
||||
|
||||
const worker: Worker | undefined =
|
||||
typeof window !== 'undefined' && e2eePassphrase
|
||||
? new Worker(new URL('livekit-client/e2ee-worker', import.meta.url))
|
||||
: undefined;
|
||||
|
||||
return { worker, e2eePassphrase };
|
||||
}
|
||||
2
next-env.d.ts
vendored
2
next-env.d.ts
vendored
@ -2,4 +2,4 @@
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||
|
||||
@ -2,9 +2,6 @@
|
||||
const nextConfig = {
|
||||
reactStrictMode: false,
|
||||
productionBrowserSourceMaps: true,
|
||||
images: {
|
||||
formats: ['image/webp'],
|
||||
},
|
||||
webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
|
||||
// Important: return the modified config
|
||||
config.module.rules.push({
|
||||
@ -12,26 +9,8 @@ const nextConfig = {
|
||||
enforce: 'pre',
|
||||
use: ['source-map-loader'],
|
||||
});
|
||||
|
||||
return config;
|
||||
},
|
||||
headers: async () => {
|
||||
return [
|
||||
{
|
||||
source: '/(.*)',
|
||||
headers: [
|
||||
{
|
||||
key: 'Cross-Origin-Opener-Policy',
|
||||
value: 'same-origin',
|
||||
},
|
||||
{
|
||||
key: 'Cross-Origin-Embedder-Policy',
|
||||
value: 'credentialless',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
|
||||
40
package.json
40
package.json
@ -6,39 +6,33 @@
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"lint:fix": "next lint --fix",
|
||||
"test": "vitest run",
|
||||
"format:check": "prettier --check \"**/*.{ts,tsx,md,json}\"",
|
||||
"format:write": "prettier --write \"**/*.{ts,tsx,md,json}\""
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@datadog/browser-logs": "^5.23.3",
|
||||
"@livekit/components-react": "2.9.19",
|
||||
"@livekit/components-styles": "1.2.0",
|
||||
"@livekit/krisp-noise-filter": "0.4.1",
|
||||
"@livekit/track-processors": "^0.7.0",
|
||||
"livekit-client": "2.17.2",
|
||||
"livekit-server-sdk": "2.15.0",
|
||||
"next": "15.2.8",
|
||||
"@livekit/components-react": "2.5.4",
|
||||
"@livekit/components-styles": "1.1.2",
|
||||
"@livekit/krisp-noise-filter": "^0.2.8",
|
||||
"livekit-client": "2.5.1",
|
||||
"livekit-server-sdk": "2.6.2",
|
||||
"next": "14.2.11",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
"react-hot-toast": "^2.5.2",
|
||||
"tinykeys": "^3.0.0"
|
||||
"tinykeys": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "24.10.13",
|
||||
"@types/react": "18.3.27",
|
||||
"@types/react-dom": "18.3.7",
|
||||
"eslint": "9.39.1",
|
||||
"eslint-config-next": "15.5.6",
|
||||
"prettier": "3.7.3",
|
||||
"@types/node": "20.16.3",
|
||||
"@types/react": "18.3.5",
|
||||
"@types/react-dom": "18.3.0",
|
||||
"eslint": "9.9.1",
|
||||
"eslint-config-next": "14.2.7",
|
||||
"source-map-loader": "^5.0.0",
|
||||
"typescript": "5.9.3",
|
||||
"vitest": "^3.2.4"
|
||||
"typescript": "5.5.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"packageManager": "pnpm@10.18.2"
|
||||
"pnpm": {
|
||||
"overrides": {}
|
||||
}
|
||||
}
|
||||
|
||||
2758
pnpm-lock.yaml
generated
2758
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,3 +0,0 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:4a3c9eb8da1ef3ddf2439428b49c11abd9a765e056600bd4f1d89a5dfc82778a
|
||||
size 52339
|
||||
@ -1,3 +0,0 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:8bc017736e04acb0188f69cec0aafb88bd6891bfc4a6ff1530665e8dc210dbdf
|
||||
size 1273171
|
||||
@ -1,3 +1,9 @@
|
||||
.settingsCloseButton {
|
||||
position: absolute;
|
||||
right: var(--lk-grid-gap);
|
||||
bottom: var(--lk-grid-gap);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
"target": "ES2020",
|
||||
"lib": ["dom", "dom.iterable", "ES2020"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"skipLibCheck": false,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "ES2020",
|
||||
"moduleResolution": "Bundler",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user