├── .env.example ├── .eslintrc.json ├── .gitattributes ├── .github ├── assets │ ├── livekit-mark.png │ ├── livekit-meet.jpg │ └── template-graphic.svg └── workflows │ └── sync-to-production.yaml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── app ├── api │ ├── connection-details │ │ └── route.ts │ └── record │ │ ├── start │ │ └── route.ts │ │ └── stop │ │ └── route.ts ├── custom │ ├── VideoConferenceClientImpl.tsx │ └── page.tsx ├── layout.tsx ├── page.tsx └── rooms │ └── [roomName] │ ├── PageClientImpl.tsx │ └── page.tsx ├── lib ├── CameraSettings.tsx ├── Debug.tsx ├── KeyboardShortcuts.tsx ├── MicrophoneSettings.tsx ├── RecordingIndicator.tsx ├── SettingsMenu.tsx ├── client-utils.ts ├── types.ts └── useSetupE2EE.ts ├── next-env.d.ts ├── next.config.js ├── package.json ├── pnpm-lock.yaml ├── public ├── background-images │ ├── ali-kazal-tbw_KQE3Cbg-unsplash.jpg │ └── samantha-gades-BlIhVfXbi9s-unsplash.jpg ├── favicon.ico └── images │ ├── livekit-apple-touch.png │ ├── livekit-meet-home.svg │ ├── livekit-meet-open-graph.png │ └── livekit-safari-pinned-tab.svg ├── renovate.json ├── styles ├── Debug.module.css ├── Home.module.css ├── SettingsMenu.module.css └── globals.css └── tsconfig.json /.env.example: -------------------------------------------------------------------------------- 1 | # 1. Copy this file and rename it to .env.local 2 | # 2. Update the enviroment variables below. 3 | 4 | # REQUIRED SETTINGS 5 | # ################# 6 | # If you are using LiveKit Cloud, the API key and secret can be generated from the Cloud Dashboard. 7 | LIVEKIT_API_KEY= 8 | LIVEKIT_API_SECRET= 9 | # URL pointing to the LiveKit server. (example: `wss://my-livekit-project.livekit.cloud`) 10 | LIVEKIT_URL= 11 | 12 | 13 | # OPTIONAL SETTINGS 14 | # ################# 15 | # Recording 16 | # S3_KEY_ID= 17 | # S3_KEY_SECRET= 18 | # S3_ENDPOINT= 19 | # S3_BUCKET= 20 | # S3_REGION= 21 | 22 | # PUBLIC 23 | # Uncomment settings menu when using a LiveKit Cloud, it'll enable Krisp noise filters. 24 | # NEXT_PUBLIC_SHOW_SETTINGS_MENU=true 25 | # NEXT_PUBLIC_LK_RECORD_ENDPOINT=/api/record 26 | 27 | # Optional, to pipe logs to datadog 28 | # NEXT_PUBLIC_DATADOG_CLIENT_TOKEN=client-token 29 | # NEXT_PUBLIC_DATADOG_SITE=datadog-site 30 | 31 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | public/background-images/*.jpg filter=lfs diff=lfs merge=lfs -text 2 | -------------------------------------------------------------------------------- /.github/assets/livekit-mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/livekit-examples/meet/c4ea8a31ecd924db49299b75a6a289a085ddb0e8/.github/assets/livekit-mark.png -------------------------------------------------------------------------------- /.github/assets/livekit-meet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/livekit-examples/meet/c4ea8a31ecd924db49299b75a6a289a085ddb0e8/.github/assets/livekit-meet.jpg -------------------------------------------------------------------------------- /.github/assets/template-graphic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /.github/workflows/sync-to-production.yaml: -------------------------------------------------------------------------------- 1 | name: Sync main to sandbox-production 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | permissions: 9 | contents: write 10 | pull-requests: write 11 | 12 | jobs: 13 | sync: 14 | runs-on: ubuntu-latest 15 | 16 | steps: 17 | - name: Checkout code 18 | uses: actions/checkout@v4 19 | with: 20 | fetch-depth: 0 # Fetch all history so we can force push 21 | 22 | - name: Set up Git 23 | run: | 24 | git config --global user.name 'github-actions[bot]' 25 | git config --global user.email 'github-actions[bot]@livekit.io' 26 | 27 | - name: Sync to sandbox-production 28 | env: 29 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 30 | run: | 31 | git checkout sandbox-production || git checkout -b sandbox-production 32 | git merge --strategy-option theirs main 33 | git push origin sandbox-production 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | 37 | # typescript 38 | *.tsbuildinfo 39 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .github/ 2 | .next/ 3 | node_modules/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all", 4 | "semi": true, 5 | "tabWidth": 2, 6 | "printWidth": 100 7 | } 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | LiveKit logo 3 | 4 | 5 | # LiveKit Meet 6 | 7 |

8 | Try the demo 9 | • 10 | LiveKit Components 11 | • 12 | LiveKit Docs 13 | • 14 | LiveKit Cloud 15 | • 16 | Blog 17 |

18 | 19 |
20 | 21 | 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. 22 | 23 | ![LiveKit Meet screenshot](./.github/assets/livekit-meet.jpg) 24 | 25 | ## Tech Stack 26 | 27 | - This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 28 | - App is built with [@livekit/components-react](https://github.com/livekit/components-js/) library. 29 | 30 | ## Demo 31 | 32 | Give it a try at https://meet.livekit.io. 33 | 34 | ## Dev Setup 35 | 36 | Steps to get a local dev setup up and running: 37 | 38 | 1. Run `pnpm install` to install all dependencies. 39 | 2. Copy `.env.example` in the project root and rename it to `.env.local`. 40 | 3. Update the missing environment variables in the newly created `.env.local` file. 41 | 4. Run `pnpm dev` to start the development server and visit [http://localhost:3000](http://localhost:3000) to see the result. 42 | 5. Start development 🎉 43 | -------------------------------------------------------------------------------- /app/api/connection-details/route.ts: -------------------------------------------------------------------------------- 1 | import { randomString } from '@/lib/client-utils'; 2 | import { ConnectionDetails } from '@/lib/types'; 3 | import { AccessToken, AccessTokenOptions, VideoGrant } from 'livekit-server-sdk'; 4 | import { NextRequest, NextResponse } from 'next/server'; 5 | 6 | const API_KEY = process.env.LIVEKIT_API_KEY; 7 | const API_SECRET = process.env.LIVEKIT_API_SECRET; 8 | const LIVEKIT_URL = process.env.LIVEKIT_URL; 9 | const COOKIE_KEY = 'random-participant-postfix'; 10 | 11 | export async function GET(request: NextRequest) { 12 | try { 13 | // Parse query parameters 14 | const roomName = request.nextUrl.searchParams.get('roomName'); 15 | const participantName = request.nextUrl.searchParams.get('participantName'); 16 | const metadata = request.nextUrl.searchParams.get('metadata') ?? ''; 17 | const region = request.nextUrl.searchParams.get('region'); 18 | const livekitServerUrl = region ? getLiveKitURL(region) : LIVEKIT_URL; 19 | let randomParticipantPostfix = request.cookies.get(COOKIE_KEY)?.value; 20 | if (livekitServerUrl === undefined) { 21 | throw new Error('Invalid region'); 22 | } 23 | 24 | if (typeof roomName !== 'string') { 25 | return new NextResponse('Missing required query parameter: roomName', { status: 400 }); 26 | } 27 | if (participantName === null) { 28 | return new NextResponse('Missing required query parameter: participantName', { status: 400 }); 29 | } 30 | 31 | // Generate participant token 32 | if (!randomParticipantPostfix) { 33 | randomParticipantPostfix = randomString(4); 34 | } 35 | const participantToken = await createParticipantToken( 36 | { 37 | identity: `${participantName}__${randomParticipantPostfix}`, 38 | name: participantName, 39 | metadata, 40 | }, 41 | roomName, 42 | ); 43 | 44 | // Return connection details 45 | const data: ConnectionDetails = { 46 | serverUrl: livekitServerUrl, 47 | roomName: roomName, 48 | participantToken: participantToken, 49 | participantName: participantName, 50 | }; 51 | return new NextResponse(JSON.stringify(data), { 52 | headers: { 53 | 'Content-Type': 'application/json', 54 | 'Set-Cookie': `${COOKIE_KEY}=${randomParticipantPostfix}; Path=/; HttpOnly; SameSite=Strict; Secure; Expires=${getCookieExpirationTime()}`, 55 | }, 56 | }); 57 | } catch (error) { 58 | if (error instanceof Error) { 59 | return new NextResponse(error.message, { status: 500 }); 60 | } 61 | } 62 | } 63 | 64 | function createParticipantToken(userInfo: AccessTokenOptions, roomName: string) { 65 | const at = new AccessToken(API_KEY, API_SECRET, userInfo); 66 | at.ttl = '5m'; 67 | const grant: VideoGrant = { 68 | room: roomName, 69 | roomJoin: true, 70 | canPublish: true, 71 | canPublishData: true, 72 | canSubscribe: true, 73 | }; 74 | at.addGrant(grant); 75 | return at.toJwt(); 76 | } 77 | 78 | /** 79 | * Get the LiveKit server URL for the given region. 80 | */ 81 | function getLiveKitURL(region: string | null): string { 82 | let targetKey = 'LIVEKIT_URL'; 83 | if (region) { 84 | targetKey = `LIVEKIT_URL_${region}`.toUpperCase(); 85 | } 86 | const url = process.env[targetKey]; 87 | if (!url) { 88 | throw new Error(`${targetKey} is not defined`); 89 | } 90 | return url; 91 | } 92 | 93 | function getCookieExpirationTime(): string { 94 | var now = new Date(); 95 | var time = now.getTime(); 96 | var expireTime = time + 60 * 120 * 1000; 97 | now.setTime(expireTime); 98 | return now.toUTCString(); 99 | } 100 | -------------------------------------------------------------------------------- /app/api/record/start/route.ts: -------------------------------------------------------------------------------- 1 | import { EgressClient, EncodedFileOutput, S3Upload } from 'livekit-server-sdk'; 2 | import { NextRequest, NextResponse } from 'next/server'; 3 | 4 | export async function GET(req: NextRequest) { 5 | try { 6 | const roomName = req.nextUrl.searchParams.get('roomName'); 7 | 8 | /** 9 | * CAUTION: 10 | * for simplicity this implementation does not authenticate users and therefore allows anyone with knowledge of a roomName 11 | * to start/stop recordings for that room. 12 | * DO NOT USE THIS FOR PRODUCTION PURPOSES AS IS 13 | */ 14 | 15 | if (roomName === null) { 16 | return new NextResponse('Missing roomName parameter', { status: 403 }); 17 | } 18 | 19 | const { 20 | LIVEKIT_API_KEY, 21 | LIVEKIT_API_SECRET, 22 | LIVEKIT_URL, 23 | S3_KEY_ID, 24 | S3_KEY_SECRET, 25 | S3_BUCKET, 26 | S3_ENDPOINT, 27 | S3_REGION, 28 | } = process.env; 29 | 30 | const hostURL = new URL(LIVEKIT_URL!); 31 | hostURL.protocol = 'https:'; 32 | 33 | const egressClient = new EgressClient(hostURL.origin, LIVEKIT_API_KEY, LIVEKIT_API_SECRET); 34 | 35 | const existingEgresses = await egressClient.listEgress({ roomName }); 36 | if (existingEgresses.length > 0 && existingEgresses.some((e) => e.status < 2)) { 37 | return new NextResponse('Meeting is already being recorded', { status: 409 }); 38 | } 39 | 40 | const fileOutput = new EncodedFileOutput({ 41 | filepath: `${new Date(Date.now()).toISOString()}-${roomName}.mp4`, 42 | output: { 43 | case: 's3', 44 | value: new S3Upload({ 45 | endpoint: S3_ENDPOINT, 46 | accessKey: S3_KEY_ID, 47 | secret: S3_KEY_SECRET, 48 | region: S3_REGION, 49 | bucket: S3_BUCKET, 50 | }), 51 | }, 52 | }); 53 | 54 | await egressClient.startRoomCompositeEgress( 55 | roomName, 56 | { 57 | file: fileOutput, 58 | }, 59 | { 60 | layout: 'speaker', 61 | }, 62 | ); 63 | 64 | return new NextResponse(null, { status: 200 }); 65 | } catch (error) { 66 | if (error instanceof Error) { 67 | return new NextResponse(error.message, { status: 500 }); 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /app/api/record/stop/route.ts: -------------------------------------------------------------------------------- 1 | import { EgressClient } from 'livekit-server-sdk'; 2 | import { NextRequest, NextResponse } from 'next/server'; 3 | 4 | export async function GET(req: NextRequest) { 5 | try { 6 | const roomName = req.nextUrl.searchParams.get('roomName'); 7 | 8 | /** 9 | * CAUTION: 10 | * for simplicity this implementation does not authenticate users and therefore allows anyone with knowledge of a roomName 11 | * to start/stop recordings for that room. 12 | * DO NOT USE THIS FOR PRODUCTION PURPOSES AS IS 13 | */ 14 | 15 | if (roomName === null) { 16 | return new NextResponse('Missing roomName parameter', { status: 403 }); 17 | } 18 | 19 | const { LIVEKIT_API_KEY, LIVEKIT_API_SECRET, LIVEKIT_URL } = process.env; 20 | 21 | const hostURL = new URL(LIVEKIT_URL!); 22 | hostURL.protocol = 'https:'; 23 | 24 | const egressClient = new EgressClient(hostURL.origin, LIVEKIT_API_KEY, LIVEKIT_API_SECRET); 25 | const activeEgresses = (await egressClient.listEgress({ roomName })).filter( 26 | (info) => info.status < 2, 27 | ); 28 | if (activeEgresses.length === 0) { 29 | return new NextResponse('No active recording found', { status: 404 }); 30 | } 31 | await Promise.all(activeEgresses.map((info) => egressClient.stopEgress(info.egressId))); 32 | 33 | return new NextResponse(null, { status: 200 }); 34 | } catch (error) { 35 | if (error instanceof Error) { 36 | return new NextResponse(error.message, { status: 500 }); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /app/custom/VideoConferenceClientImpl.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { formatChatMessageLinks, RoomContext, VideoConference } from '@livekit/components-react'; 4 | import { 5 | ExternalE2EEKeyProvider, 6 | LogLevel, 7 | Room, 8 | RoomConnectOptions, 9 | RoomOptions, 10 | VideoPresets, 11 | type VideoCodec, 12 | } from 'livekit-client'; 13 | import { DebugMode } from '@/lib/Debug'; 14 | import { useEffect, useMemo, useState } from 'react'; 15 | import { KeyboardShortcuts } from '@/lib/KeyboardShortcuts'; 16 | import { SettingsMenu } from '@/lib/SettingsMenu'; 17 | import { useSetupE2EE } from '@/lib/useSetupE2EE'; 18 | 19 | export function VideoConferenceClientImpl(props: { 20 | liveKitUrl: string; 21 | token: string; 22 | codec: VideoCodec | undefined; 23 | }) { 24 | const keyProvider = new ExternalE2EEKeyProvider(); 25 | const { worker, e2eePassphrase } = useSetupE2EE(); 26 | const e2eeEnabled = !!(e2eePassphrase && worker); 27 | 28 | const [e2eeSetupComplete, setE2eeSetupComplete] = useState(false); 29 | 30 | const roomOptions = useMemo((): RoomOptions => { 31 | return { 32 | publishDefaults: { 33 | videoSimulcastLayers: [VideoPresets.h540, VideoPresets.h216], 34 | red: !e2eeEnabled, 35 | videoCodec: props.codec, 36 | }, 37 | adaptiveStream: { pixelDensity: 'screen' }, 38 | dynacast: true, 39 | e2ee: e2eeEnabled 40 | ? { 41 | keyProvider, 42 | worker, 43 | } 44 | : undefined, 45 | }; 46 | }, [e2eeEnabled, props.codec, keyProvider, worker]); 47 | 48 | const room = useMemo(() => new Room(roomOptions), [roomOptions]); 49 | 50 | const connectOptions = useMemo((): RoomConnectOptions => { 51 | return { 52 | autoSubscribe: true, 53 | }; 54 | }, []); 55 | 56 | useEffect(() => { 57 | if (e2eeEnabled) { 58 | keyProvider.setKey(e2eePassphrase).then(() => { 59 | room.setE2EEEnabled(true).then(() => { 60 | setE2eeSetupComplete(true); 61 | }); 62 | }); 63 | } else { 64 | setE2eeSetupComplete(true); 65 | } 66 | }, [e2eeEnabled, e2eePassphrase, keyProvider, room, setE2eeSetupComplete]); 67 | 68 | useEffect(() => { 69 | if (e2eeSetupComplete) { 70 | room.connect(props.liveKitUrl, props.token, connectOptions).catch((error) => { 71 | console.error(error); 72 | }); 73 | room.localParticipant.enableCameraAndMicrophone().catch((error) => { 74 | console.error(error); 75 | }); 76 | } 77 | }, [room, props.liveKitUrl, props.token, connectOptions, e2eeSetupComplete]); 78 | 79 | return ( 80 |
81 | 82 | 83 | 89 | 90 | 91 |
92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /app/custom/page.tsx: -------------------------------------------------------------------------------- 1 | import { videoCodecs } from 'livekit-client'; 2 | import { VideoConferenceClientImpl } from './VideoConferenceClientImpl'; 3 | import { isVideoCodec } from '@/lib/types'; 4 | 5 | export default async function CustomRoomConnection(props: { 6 | searchParams: Promise<{ 7 | liveKitUrl?: string; 8 | token?: string; 9 | codec?: string; 10 | }>; 11 | }) { 12 | const { liveKitUrl, token, codec } = await props.searchParams; 13 | if (typeof liveKitUrl !== 'string') { 14 | return

Missing LiveKit URL

; 15 | } 16 | if (typeof token !== 'string') { 17 | return

Missing LiveKit token

; 18 | } 19 | if (codec !== undefined && !isVideoCodec(codec)) { 20 | return

Invalid codec, if defined it has to be [{videoCodecs.join(', ')}].

; 21 | } 22 | 23 | return ( 24 |
25 | 26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css'; 2 | import '@livekit/components-styles'; 3 | import '@livekit/components-styles/prefabs'; 4 | import type { Metadata, Viewport } from 'next'; 5 | import { Toaster } from 'react-hot-toast'; 6 | 7 | export const metadata: Metadata = { 8 | title: { 9 | default: 'LiveKit Meet | Conference app build with LiveKit open source', 10 | template: '%s', 11 | }, 12 | description: 13 | 'LiveKit is an open source WebRTC project that gives you everything needed to build scalable and real-time audio and/or video experiences in your applications.', 14 | twitter: { 15 | creator: '@livekitted', 16 | site: '@livekitted', 17 | card: 'summary_large_image', 18 | }, 19 | openGraph: { 20 | url: 'https://meet.livekit.io', 21 | images: [ 22 | { 23 | url: 'https://meet.livekit.io/images/livekit-meet-open-graph.png', 24 | width: 2000, 25 | height: 1000, 26 | type: 'image/png', 27 | }, 28 | ], 29 | siteName: 'LiveKit Meet', 30 | }, 31 | icons: { 32 | icon: { 33 | rel: 'icon', 34 | url: '/favicon.ico', 35 | }, 36 | apple: [ 37 | { 38 | rel: 'apple-touch-icon', 39 | url: '/images/livekit-apple-touch.png', 40 | sizes: '180x180', 41 | }, 42 | { rel: 'mask-icon', url: '/images/livekit-safari-pinned-tab.svg', color: '#070707' }, 43 | ], 44 | }, 45 | }; 46 | 47 | export const viewport: Viewport = { 48 | themeColor: '#070707', 49 | }; 50 | 51 | export default function RootLayout({ children }: { children: React.ReactNode }) { 52 | return ( 53 | 54 | 55 | 56 | {children} 57 | 58 | 59 | ); 60 | } 61 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { useRouter, useSearchParams } from 'next/navigation'; 4 | import React, { Suspense, useState } from 'react'; 5 | import { encodePassphrase, generateRoomId, randomString } from '@/lib/client-utils'; 6 | import styles from '../styles/Home.module.css'; 7 | 8 | function Tabs(props: React.PropsWithChildren<{}>) { 9 | const searchParams = useSearchParams(); 10 | const tabIndex = searchParams?.get('tab') === 'custom' ? 1 : 0; 11 | 12 | const router = useRouter(); 13 | function onTabSelected(index: number) { 14 | const tab = index === 1 ? 'custom' : 'demo'; 15 | router.push(`/?tab=${tab}`); 16 | } 17 | 18 | let tabs = React.Children.map(props.children, (child, index) => { 19 | return ( 20 | 32 | ); 33 | }); 34 | 35 | return ( 36 |
37 |
{tabs}
38 | {/* @ts-ignore */} 39 | {props.children[tabIndex]} 40 |
41 | ); 42 | } 43 | 44 | function DemoMeetingTab(props: { label: string }) { 45 | const router = useRouter(); 46 | const [e2ee, setE2ee] = useState(false); 47 | const [sharedPassphrase, setSharedPassphrase] = useState(randomString(64)); 48 | const startMeeting = () => { 49 | if (e2ee) { 50 | router.push(`/rooms/${generateRoomId()}#${encodePassphrase(sharedPassphrase)}`); 51 | } else { 52 | router.push(`/rooms/${generateRoomId()}`); 53 | } 54 | }; 55 | return ( 56 |
57 |

Try LiveKit Meet for free with our live demo project.

58 | 61 |
62 |
63 | setE2ee(ev.target.checked)} 68 | > 69 | 70 |
71 | {e2ee && ( 72 |
73 | 74 | setSharedPassphrase(ev.target.value)} 79 | /> 80 |
81 | )} 82 |
83 |
84 | ); 85 | } 86 | 87 | function CustomConnectionTab(props: { label: string }) { 88 | const router = useRouter(); 89 | 90 | const [e2ee, setE2ee] = useState(false); 91 | const [sharedPassphrase, setSharedPassphrase] = useState(randomString(64)); 92 | 93 | const onSubmit: React.FormEventHandler = (event) => { 94 | event.preventDefault(); 95 | const formData = new FormData(event.target as HTMLFormElement); 96 | const serverUrl = formData.get('serverUrl'); 97 | const token = formData.get('token'); 98 | if (e2ee) { 99 | router.push( 100 | `/custom/?liveKitUrl=${serverUrl}&token=${token}#${encodePassphrase(sharedPassphrase)}`, 101 | ); 102 | } else { 103 | router.push(`/custom/?liveKitUrl=${serverUrl}&token=${token}`); 104 | } 105 | }; 106 | return ( 107 |
108 |

109 | Connect LiveKit Meet with a custom server using LiveKit Cloud or LiveKit Server. 110 |

111 | 118 |