How do I enable e2ee using the `LiveKitRoom` from ...
# ask-ai
i
How do I enable e2ee using the
LiveKitRoom
from
components-react
?
t
Thanks for reaching out, Andres. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
To enable end-to-end encryption (E2EE) using
LiveKitRoom
from
@livekit/components-react
, follow these steps: 1. Initialize an External Key Provider:
const keyProvider = new ExternalE2EEKeyProvider();
2. Set the Encryption Key: Distribute a shared key securely to all participants.
keyProvider.setKey('your_shared_key');
3. Configure Room Options: Include the key provider and a Web Worker for browser-based encryption.
Copy code
const worker = new Worker(new URL('livekit-client/e2ee-worker', import.meta.url));
const roomOptions = {
  e2ee: {
    keyProvider,
    worker,
  },
};
4. Create the Room Instance:
const room = new Room(roomOptions);
5. Enable E2EE:
room.setE2EEEnabled(true);
6. Integrate with LiveKitRoom Component: For a complete example, refer to the Meet example app. Note that E2EE applies only to media tracks and not other data types. Sources: frontend/pages/index.tsx | End-to-end encryption | LiveKit Docs
i
but thats the point I don't have a
room
when I use that component.
t
To enable E2EE, you'll need to set up the encryption settings at the room level, which usually means creating a
Room
instance. If you're working with
LiveKitRoom
without directly handling a
Room
, the current SDK doesn’t support turning on E2EE without having a
Room
instance. The way forward is to initialize a
Room
with the E2EE settings and then pass it to the
LiveKitRoom
component. If this doesn’t quite fit your setup, just let me know—I’m here to help and can also escalate your request if needed!