Improve e2ee setup (#111)

lib/DummyKeyProvider.ts

@@ -1,16 +0,0 @@
-// just for demonstration purposes, extremely insecure
-
-import { BaseKeyProvider, createKeyMaterialFromString } from 'livekit-client';
-
-export class DummyKeyProvider extends BaseKeyProvider {
-  readonly participantKeys = new Map([
-    ['dev1', 'dev1key'],
-    ['dev2', 'dev2key'],
-  ]);
-
-  async setKey(participantId: string) {
-    // @ts-ignore
-    const cryptoKey = await createKeyMaterialFromString(this.participantKeys.get(participantId));
-    this.onSetEncryptionKey(cryptoKey, participantId);
-  }
-}

pages/custom/index.tsx

@@ -1,5 +1,12 @@
 import { formatChatMessageLinks, LiveKitRoom, VideoConference } from '@livekit/components-react';
-import { ExternalE2EEKeyProvider, LogLevel, Room, RoomOptions, VideoPresets } from 'livekit-client';
+import {
+  ExternalE2EEKeyProvider,
+  LogLevel,
+  RoomConnectOptions,
+  Room,
+  RoomOptions,
+  VideoPresets,
+} from 'livekit-client';
 import { useRouter } from 'next/router';
 import { DebugMode } from '../../lib/Debug';
 import { decodePassphrase } from '../../lib/client-utils';
@@ -10,14 +17,12 @@ export default function CustomRoomConnection() {
   const { liveKitUrl, token } = router.query;
 
   const hash = typeof window !== 'undefined' && window.location.hash;
-  const keyProvider = new ExternalE2EEKeyProvider();
-  if (hash) {
-    keyProvider.setKey(decodePassphrase(hash.substring(1)));
-  }
-
   const worker =
     typeof window !== 'undefined' &&
     new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
+  const keyProvider = new ExternalE2EEKeyProvider();
+
+  const e2eeEnabled = !!(hash && worker);
 
   const roomOptions = useMemo((): RoomOptions => {
     return {
@@ -26,17 +31,26 @@ export default function CustomRoomConnection() {
       },
       adaptiveStream: { pixelDensity: 'screen' },
       dynacast: true,
-      e2ee:
+      e2ee: e2eeEnabled
-        hash && worker
+        ? {
-          ? {
+            keyProvider,
-              keyProvider,
+            worker,
-              worker,
+          }
-            }
+        : undefined,
-          : undefined,
     };
   }, []);
 
   const room = useMemo(() => new Room(roomOptions), []);
+  if (e2eeEnabled) {
+    keyProvider.setKey(decodePassphrase(hash.substring(1)));
+    room.setE2EEEnabled(true);
+  }
+
+  const connectOptions = useMemo((): RoomConnectOptions => {
+    return {
+      autoSubscribe: false,
+    };
+  }, []);
 
   if (typeof liveKitUrl !== 'string') {
     return <h2>Missing LiveKit URL</h2>;
@@ -48,7 +62,14 @@ export default function CustomRoomConnection() {
   return (
     <main data-lk-theme="default">
       {liveKitUrl && (
-        <LiveKitRoom room={room} token={token} serverUrl={liveKitUrl} audio={true} video={true}>
+        <LiveKitRoom
+          room={room}
+          token={token}
+          connectOptions={connectOptions}
+          serverUrl={liveKitUrl}
+          audio={true}
+          video={true}
+        >
           <VideoConference chatMessageFormatter={formatChatMessageLinks} />
           <DebugMode logLevel={LogLevel.info} />
         </LiveKitRoom>

pages/rooms/[name].tsx

@@ -21,7 +21,6 @@ import { useRouter } from 'next/router';
 import { useMemo, useState } from 'react';
 import { DebugMode } from '../../lib/Debug';
 import { decodePassphrase, useServerUrl } from '../../lib/client-utils';
-import { DummyKeyProvider } from '../../lib/DummyKeyProvider';
 
 const Home: NextPage = () => {
   const router = useRouter();
@@ -87,15 +86,13 @@ const ActiveRoom = ({ roomName, userChoices, onLeave }: ActiveRoomProps) => {
   const liveKitUrl = useServerUrl(region as string | undefined);
 
   const hash = typeof window !== 'undefined' && window.location.hash;
-  const keyProvider = new ExternalE2EEKeyProvider();
-  if (hash) {
-    keyProvider.setKey(decodePassphrase(hash.substring(1)));
-  }
-
   const worker =
     typeof window !== 'undefined' &&
     new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
 
+  const e2eeEnabled = !!(hash && worker);
+  const keyProvider = new ExternalE2EEKeyProvider();
+
   const roomOptions = useMemo((): RoomOptions => {
     return {
       videoCaptureDefaults: {
@@ -113,20 +110,21 @@ const ActiveRoom = ({ roomName, userChoices, onLeave }: ActiveRoomProps) => {
       },
       adaptiveStream: { pixelDensity: 'screen' },
       dynacast: true,
-      e2ee:
+      e2ee: e2eeEnabled
-        hash && worker
+        ? {
-          ? {
+            keyProvider,
-              keyProvider,
+            worker,
-              worker,
+          }
-            }
+        : undefined,
-          : undefined,
     };
   }, [userChoices, hq]);
 
   const room = useMemo(() => new Room(roomOptions), []);
 
-  room.setE2EEEnabled(true);
+  if (e2eeEnabled) {
-
+    keyProvider.setKey(decodePassphrase(hash.substring(1)));
+    room.setE2EEEnabled(true);
+  }
   const connectOptions = useMemo((): RoomConnectOptions => {
     return {
       autoSubscribe: false,