wip

livekit-examples · Sep 11, 2024 · 8a53ea1 · 8a53ea1
1 parent 1391240
commit 8a53ea1
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 46 deletions.
diff --git a/frontend/app/connection-details/route.ts b/frontend/app/connection-details/route.ts
@@ -1,7 +1,9 @@
-import { randomString } from '@/lib/client-utils';
-import { ConnectionDetails } from '@/lib/types';
-import { AccessToken, AccessTokenOptions, VideoGrant } from 'livekit-server-sdk';
-import { NextRequest, NextResponse } from 'next/server';
+import {
+  AccessToken,
+  AccessTokenOptions,
+  VideoGrant,
+} from "livekit-server-sdk";
+import { NextRequest, NextResponse } from "next/server";
 
 const API_KEY = process.env.LIVEKIT_API_KEY;
 const API_SECRET = process.env.LIVEKIT_API_SECRET;
@@ -10,34 +12,39 @@ const LIVEKIT_URL = process.env.LIVEKIT_URL;
 export async function GET(request: NextRequest) {
   try {
     // Parse query parameters
-    const roomName = request.nextUrl.searchParams.get('roomName');
-    const participantName = request.nextUrl.searchParams.get('participantName');
-    const metadata = request.nextUrl.searchParams.get('metadata') ?? '';
-    const region = request.nextUrl.searchParams.get('region');
+    const roomName = request.nextUrl.searchParams.get("roomName");
+    const participantName = request.nextUrl.searchParams.get("participantName");
+    const metadata = request.nextUrl.searchParams.get("metadata") ?? "";
+    const region = request.nextUrl.searchParams.get("region");
     const livekitServerUrl = region ? getLiveKitURL(region) : LIVEKIT_URL;
     if (livekitServerUrl === undefined) {
-      throw new Error('Invalid region');
+      throw new Error("Invalid region");
     }
 
-    if (typeof roomName !== 'string') {
-      return new NextResponse('Missing required query parameter: roomName', { status: 400 });
-    }
-    if (participantName === null) {
-      return new NextResponse('Missing required query parameter: participantName', { status: 400 });
-    }
+    // if (typeof roomName !== "string") {
+    //   return new NextResponse("Missing required query parameter: roomName", {
+    //     status: 400,
+    //   });
+    // }
+    // if (participantName === null) {
+    //   return new NextResponse(
+    //     "Missing required query parameter: participantName",
+    //     { status: 400 }
+    //   );
+    // }
 
     // Generate participant token
     const participantToken = await createParticipantToken(
       {
-        identity: `${participantName}__${randomString(4)}`,
-        name: participantName,
+        identity: `${participantName}__${Math.round(Math.random() * 10000)}`,
+        name: "participantName",
         metadata,
       },
-      roomName,
+      "roomName"
     );
 
     // Return connection details
-    const data: ConnectionDetails = {
+    const data = {
       serverUrl: livekitServerUrl,
       roomName: roomName,
       participantToken: participantToken,
@@ -51,9 +58,12 @@ export async function GET(request: NextRequest) {
   }
 }
 
-function createParticipantToken(userInfo: AccessTokenOptions, roomName: string) {
+function createParticipantToken(
+  userInfo: AccessTokenOptions,
+  roomName: string
+) {
   const at = new AccessToken(API_KEY, API_SECRET, userInfo);
-  at.ttl = '5m';
+  at.ttl = "5m";
   const grant: VideoGrant = {
     room: roomName,
     roomJoin: true,
@@ -69,7 +79,7 @@ function createParticipantToken(userInfo: AccessTokenOptions, roomName: string)
  * Get the LiveKit server URL for the given region.
  */
 function getLiveKitURL(region: string | null): string {
-  let targetKey = 'LIVEKIT_URL';
+  let targetKey = "LIVEKIT_URL";
   if (region) {
     targetKey = `LIVEKIT_URL_${region}`.toUpperCase();
   }

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -25,14 +25,18 @@ function SimpleVoiceAssistant() {
 
 export default function Page() {
   const [shouldConnect, setShouldConnect] = useState(false);
+  const [details, setDetails] = useState<any>(undefined);
 
   const handlePreJoinSubmit = useCallback(async () => {
     const url = new URL(
-      process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT,
+      process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT!,
       window.location.origin
     );
     const connectionDetailsResp = await fetch(url.toString());
     const connectionDetailsData = await connectionDetailsResp.json();
+    console.log({ connectionDetailsData });
+
+    setDetails(connectionDetailsData);
   }, []);
 
   const onDeviceFailure = (e?: MediaDeviceFailure) => {
@@ -44,30 +48,27 @@ export default function Page() {
 
   return (
     <main data-lk-theme="default" className="">
-      <LiveKitRoom
-        audio={true}
-        token={token}
-        connect={shouldConnect}
-        serverUrl={}
-        onMediaDeviceFailure={onDeviceFailure}
-        onDisconnected={() => setShouldConnect(false)}
-        className=""
-      >
-        <div className="">
-          {shouldConnect ? (
+      {details ? (
+        <LiveKitRoom
+          audio={true}
+          token={details.participantToken}
+          connect={shouldConnect}
+          serverUrl={details.serverUrl}
+          onMediaDeviceFailure={onDeviceFailure}
+          onDisconnected={() => setShouldConnect(false)}
+          className=""
+        >
+          <div className="">
             <SimpleVoiceAssistant />
-          ) : (
-            <button
-              className="lk-button"
-              onClick={() => setShouldConnect(true)}
-            >
-              Connect
-            </button>
-          )}
-        </div>
-        <VoiceAssistantControlBar />
-        <RoomAudioRenderer />
-      </LiveKitRoom>
+          </div>
+          <VoiceAssistantControlBar />
+          <RoomAudioRenderer />
+        </LiveKitRoom>
+      ) : (
+        <button className="lk-button" onClick={() => handlePreJoinSubmit()}>
+          Connect
+        </button>
+      )}
     </main>
   );
 }
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     "@livekit/components-react": "^2.5.1",
     "@livekit/components-styles": "^1.1.1",
     "livekit-client": "^2.5.1",
+    "livekit-server-sdk": "^2.6.1",
     "next": "14.2.9",
     "react": "^18",
     "react-dom": "^18"

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml