From e244d9cd8f0ab1af367b112549c5b29a536e6504 Mon Sep 17 00:00:00 2001
From: lukasIO <mail@lukasseiler.de>
Date: Thu, 29 Jun 2023 13:11:48 +0200
Subject: [PATCH] Experimental end-to-end encryption support (#557)

---
 .DS_Store                                | Bin 6148 -> 0 bytes
 .changeset/stupid-pans-sin.md            |   5 +
 example/index.html                       |  24 +
 example/sample.ts                        |  73 ++-
 example/tsconfig.json                    |   2 +
 package.json                             |  22 +-
 protocol                                 |   2 +-
 rollup.config.js                         |  33 +-
 rollup.config.worker.js                  |  25 +
 src/api/SignalClient.ts                  |   3 +-
 src/connectionHelper/checks/turn.ts      |   1 +
 src/connectionHelper/checks/websocket.ts |   1 +
 src/e2ee/E2eeManager.ts                  | 357 +++++++++++++
 src/e2ee/KeyProvider.ts                  |  73 +++
 src/e2ee/constants.ts                    |  40 ++
 src/e2ee/errors.ts                       |  16 +
 src/e2ee/index.ts                        |   3 +
 src/e2ee/types.ts                        | 160 ++++++
 src/e2ee/utils.ts                        | 127 +++++
 src/e2ee/worker/FrameCryptor.test.ts     |  21 +
 src/e2ee/worker/FrameCryptor.ts          | 614 +++++++++++++++++++++++
 src/e2ee/worker/ParticipantKeyHandler.ts | 129 +++++
 src/e2ee/worker/e2ee.worker.ts           | 217 ++++++++
 src/e2ee/worker/tsconfig.json            |   6 +
 src/index.ts                             |   1 +
 src/logger.ts                            |  12 +-
 src/options.ts                           |   6 +
 src/proto/livekit_models.ts              |  24 +-
 src/room/PCTransport.ts                  |   9 +
 src/room/RTCEngine.ts                    |  46 +-
 src/room/Room.ts                         |  51 +-
 src/room/defaults.ts                     |   2 +-
 src/room/events.ts                       |   7 +
 src/room/participant/LocalParticipant.ts |  50 +-
 src/room/participant/Participant.ts      |   4 +
 src/room/track/TrackPublication.ts       |  10 +-
 src/room/track/options.ts                |   5 +-
 src/room/utils.ts                        |   5 +
 src/room/worker.d.ts                     |   4 +
 src/test/MockMediaStreamTrack.ts         |   1 +
 tsconfig.eslint.json                     |   5 +-
 vite.config.js                           |  51 ++
 42 files changed, 2190 insertions(+), 57 deletions(-)
 delete mode 100644 .DS_Store
 create mode 100644 .changeset/stupid-pans-sin.md
 create mode 100644 rollup.config.worker.js
 create mode 100644 src/e2ee/E2eeManager.ts
 create mode 100644 src/e2ee/KeyProvider.ts
 create mode 100644 src/e2ee/constants.ts
 create mode 100644 src/e2ee/errors.ts
 create mode 100644 src/e2ee/index.ts
 create mode 100644 src/e2ee/types.ts
 create mode 100644 src/e2ee/utils.ts
 create mode 100644 src/e2ee/worker/FrameCryptor.test.ts
 create mode 100644 src/e2ee/worker/FrameCryptor.ts
 create mode 100644 src/e2ee/worker/ParticipantKeyHandler.ts
 create mode 100644 src/e2ee/worker/e2ee.worker.ts
 create mode 100644 src/e2ee/worker/tsconfig.json
 create mode 100644 src/room/worker.d.ts
 create mode 100644 vite.config.js

diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index 8abfa7b70348dc11acd11bb71cdf0976d1e4f325..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHK&5qMB5FWRMrtA+rEYe<(B5_@nvMehhE^W8fvJyYi2EhSPX_`>FO_M5VDX6N{
zGrR+@z?CQAT{yuvj#uQTa9ae(BiWzh%y>MXCw5FkqBV1F5mkxEKw&IhLA6HsJ(rvm
zRL@nQkYgNEhaS*lI;L7qTX$#%Gy{Jd1N`l7(h=RKCOyJ;`}6x9lXKz)ecKCc=<o*7
zM5%q3f)+Lma%e~qO*49*GkRrm=^gcGOcV0RO>2wm8SQO4gFZ&Z9@3|Pe0mKp13aBk
zl(GGou`OfwIYBfX#9~n=qx~(Ty@{~{#NbjFbK};G=a=<T8073Gh^9{?)C1_tnej~1
z{v=<Y5_}nmKZM>Cg(LGa`pnyJ_3e2yQS0%=o_ND(TCaZ<g<|Q_<+4#WHjJ0nn_zBD
zd(&Ce>V?nw=}8cH_IbN!KOMUBZguA<@Ta|@?}pM~=(tdM@oeZj!MqjBd?%8&R{X-K
z7?o~ycd<A)+}|?~4(=@X%*EaPI@-4nm&=NA?Z(Y}r`?e^_Ja?I0U~f7NZC?&4!mMH
z9^P7^?*%^d%ytzz#R@j5O%H)JtW72pWzHm-Dk5J(>Zkb>>?^6Y1LmVlPI0Dr$S+^!
z8!{}vj)L<hInLIaan@SO%t=~S=sj{Kgtr>Jau$rzbLN~8+lick>kAXLM#jd4dC&uE
z1~dczDg(Sfm?(@5g{v6l)`3c10e~fROF^4|71+j9*ig8N5pN(OHU-9}LR~RLY>s|Y
z=`|FtVvNm6sLO{?o`t%h2<aW;n^K)bBSu|o1~da{28!`xmCygqukZh9BmJZq&<y-n
z42V+OYPS%QI$LwW@mXu4yh34Ny;Y3T1eH3DWrL66T@)#JXL1ABP`HW_JrMmPAZgH*
JX5f!9@B^B^04M+e

diff --git a/.changeset/stupid-pans-sin.md b/.changeset/stupid-pans-sin.md
new file mode 100644
index 0000000000..41d7832ec4
--- /dev/null
+++ b/.changeset/stupid-pans-sin.md
@@ -0,0 +1,5 @@
+---
+"livekit-client": minor
+---
+
+Experimental end-to-end encryption support
diff --git a/example/index.html b/example/index.html
index dfe46b557e..193a2aed09 100644
--- a/example/index.html
+++ b/example/index.html
@@ -32,6 +32,12 @@ <h2>Livekit Sample App</h2>
             <div>
               <input type="text" class="form-control" id="token" />
             </div>
+            <div>
+              <b>E2EE key</b>
+            </div>
+            <div>
+              <input type="text" class="form-control" id="crypto-key" />
+            </div>
           </div>
 
           <!-- connect options -->
@@ -114,6 +120,24 @@ <h2>Livekit Sample App</h2>
               >
                 Share Screen
               </button>
+              <button
+                id="toggle-e2ee-button"
+                class="btn btn-secondary mt-1"
+                disabled
+                type="button"
+                onclick="appActions.toggleE2EE()"
+              >
+                Enable E2EE
+              </button>
+              <button
+                id="e2ee-ratchet-button"
+                class="btn btn-secondary mt-1"
+                disabled
+                type="button"
+                onclick="appActions.ratchetE2EEKey()"
+              >
+                Ratchet Key
+              </button>
               <select
                 id="simulate-scenario"
                 class="custom-select"
diff --git a/example/sample.ts b/example/sample.ts
index 18d82a5f42..72e6911638 100644
--- a/example/sample.ts
+++ b/example/sample.ts
@@ -1,8 +1,11 @@
+//@ts-ignore
+import E2EEWorker from '../src/e2ee/worker/e2ee.worker?worker';
 import {
   ConnectionQuality,
   ConnectionState,
   DataPacket_Kind,
   DisconnectReason,
+  ExternalE2EEKeyProvider,
   LocalAudioTrack,
   LocalParticipant,
   LogLevel,
@@ -27,7 +30,7 @@ import {
   supportsAV1,
   supportsVP9,
 } from '../src/index';
-import { SimulationScenario } from '../src/room/types';
+import type { SimulationScenario } from '../src/room/types';
 
 const $ = <T extends HTMLElement>(id: string) => document.getElementById(id) as T;
 
@@ -37,6 +40,7 @@ const state = {
   decoder: new TextDecoder(),
   defaultDevices: new Map<MediaDeviceKind, string>(),
   bitrateInterval: undefined as any,
+  e2eeKeyProvider: new ExternalE2EEKeyProvider(),
 };
 let currentRoom: Room | undefined;
 
@@ -45,11 +49,17 @@ let startTime: number;
 const searchParams = new URLSearchParams(window.location.search);
 const storedUrl = searchParams.get('url') ?? 'ws://localhost:7880';
 const storedToken = searchParams.get('token') ?? '';
-$<HTMLInputElement>('url').value = storedUrl;
-$<HTMLInputElement>('token').value = storedToken;
+(<HTMLInputElement>$('url')).value = storedUrl;
+(<HTMLInputElement>$('token')).value = storedToken;
+let storedKey = searchParams.get('key');
+if (!storedKey) {
+  (<HTMLSelectElement>$('crypto-key')).value = 'password';
+} else {
+  (<HTMLSelectElement>$('crypto-key')).value = storedKey;
+}
 
-function updateSearchParams(url: string, token: string) {
-  const params = new URLSearchParams({ url, token });
+function updateSearchParams(url: string, token: string, key: string) {
+  const params = new URLSearchParams({ url, token, key });
   window.history.replaceState(null, '', `${window.location.pathname}?${params.toString()}`);
 }
 
@@ -64,10 +74,11 @@ const appActions = {
     const adaptiveStream = (<HTMLInputElement>$('adaptive-stream')).checked;
     const shouldPublish = (<HTMLInputElement>$('publish-option')).checked;
     const preferredCodec = (<HTMLSelectElement>$('preferred-codec')).value as VideoCodec;
+    const cryptoKey = (<HTMLSelectElement>$('crypto-key')).value;
     const autoSubscribe = (<HTMLInputElement>$('auto-subscribe')).checked;
 
-    setLogLevel(LogLevel.debug);
-    updateSearchParams(url, token);
+    setLogLevel(LogLevel.info);
+    updateSearchParams(url, token, cryptoKey);
 
     const roomOpts: RoomOptions = {
       adaptiveStream,
@@ -76,10 +87,13 @@ const appActions = {
         simulcast,
         videoSimulcastLayers: [VideoPresets.h90, VideoPresets.h216],
         videoCodec: preferredCodec || 'vp8',
+        dtx: true,
+        red: true,
       },
       videoCaptureDefaults: {
         resolution: VideoPresets.h720.resolution,
       },
+      e2ee: { keyProvider: state.e2eeKeyProvider, worker: new E2EEWorker() },
     };
 
     const connectOpts: RoomConnectOptions = {
@@ -181,9 +195,17 @@ const appActions = {
           appendLog(`tracks published in ${Date.now() - startTime}ms`);
           updateButtonsForPublishState();
         }
+      })
+      .on(RoomEvent.ParticipantEncryptionStatusChanged, () => {
+        updateButtonsForPublishState();
       });
 
     try {
+      // read and set current key from input
+      const cryptoKey = (<HTMLSelectElement>$('crypto-key')).value;
+      state.e2eeKeyProvider.setKey(cryptoKey);
+      await room.setE2EEEnabled(true);
+
       await room.connect(url, token, connectOptions);
       const elapsed = Date.now() - startTime;
       appendLog(
@@ -210,6 +232,23 @@ const appActions = {
     return room;
   },
 
+  toggleE2EE: async () => {
+    if (!currentRoom) return;
+
+    // read and set current key from input
+    const cryptoKey = (<HTMLSelectElement>$('crypto-key')).value;
+    state.e2eeKeyProvider.setKey(cryptoKey);
+
+    await currentRoom.setE2EEEnabled(!currentRoom.isE2EEEnabled);
+  },
+
+  ratchetE2EEKey: async () => {
+    if (!currentRoom) {
+      return;
+    }
+    await state.e2eeKeyProvider.ratchetKey();
+  },
+
   toggleAudio: async () => {
     if (!currentRoom) return;
     const enabled = currentRoom.localParticipant.isMicrophoneEnabled;
@@ -387,6 +426,7 @@ function handleData(msg: Uint8Array, participant?: RemoteParticipant) {
 
 function participantConnected(participant: Participant) {
   appendLog('participant', participant.identity, 'connected', participant.metadata);
+  console.log('tracks', participant.tracks);
   participant
     .on(ParticipantEvent.TrackMuted, (pub: TrackPublication) => {
       appendLog('track was muted', pub.trackSid, participant.identity);
@@ -479,6 +519,7 @@ function renderParticipant(participant: Participant, remove: boolean = false) {
         <div class="right">
           <span id="signal-${identity}"></span>
           <span id="mic-${identity}" class="mic-on"></span>
+          <span id="e2ee-${identity}" class="e2ee-on"></span>
         </div>
       </div>
       ${
@@ -587,6 +628,15 @@ function renderParticipant(participant: Participant, remove: boolean = false) {
     micElm.innerHTML = '<i class="fas fa-microphone-slash"></i>';
   }
 
+  const e2eeElm = $(`e2ee-${identity}`)!;
+  if (participant.isEncrypted) {
+    e2eeElm.className = 'e2ee-on';
+    e2eeElm.innerHTML = '<i class="fas fa-lock"></i>';
+  } else {
+    e2eeElm.className = 'e2ee-off';
+    e2eeElm.innerHTML = '<i class="fas fa-unlock"></i>';
+  }
+
   switch (participant.connectionQuality) {
     case ConnectionQuality.Excellent:
     case ConnectionQuality.Good:
@@ -718,6 +768,8 @@ function setButtonsForState(connected: boolean) {
     'disconnect-room-button',
     'flip-video-button',
     'send-button',
+    'toggle-e2ee-button',
+    'e2ee-ratchet-button',
   ];
   const disconnectedSet = ['connect-button'];
 
@@ -792,6 +844,13 @@ function updateButtonsForPublishState() {
     lp.isScreenShareEnabled ? 'Stop Screen Share' : 'Share Screen',
     lp.isScreenShareEnabled,
   );
+
+  // e2ee
+  setButtonState(
+    'toggle-e2ee-button',
+    `${currentRoom.isE2EEEnabled ? 'Disable' : 'Enable'} E2EE`,
+    currentRoom.isE2EEEnabled,
+  );
 }
 
 async function acquireDeviceList() {
diff --git a/example/tsconfig.json b/example/tsconfig.json
index c6b5aa0ad9..36a57629cd 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "../tsconfig",
   "compilerOptions": {
     "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
     "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
@@ -14,5 +15,6 @@
     "moduleResolution": "node",
     "resolveJsonModule": true
   },
+  "include": ["../src/**/*", "sample.ts"],
   "exclude": ["**/*.test.ts", "build/**/*"]
 }
diff --git a/package.json b/package.json
index bd613826ab..c16d6db015 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,16 @@
   "unpkg": "./dist/livekit-client.umd.js",
   "module": "./dist/livekit-client.esm.mjs",
   "exports": {
-    "types": "./dist/src/index.d.ts",
-    "import": "./dist/livekit-client.esm.mjs",
-    "require": "./dist/livekit-client.umd.js"
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/livekit-client.esm.mjs",
+      "require": "./dist/livekit-client.umd.js"
+    },
+    "./e2ee-worker": {
+      "types": "./dist/src/e2ee/worker/e2ee.worker.d.ts",
+      "import": "./dist/livekit-client.e2ee.worker.mjs",
+      "require": "./dist/livekit-client.e2ee.worker.js"
+    }
   },
   "files": [
     "dist",
@@ -18,7 +25,10 @@
   "typesVersions": {
     "<4.8": {
       "./dist/src/index.d.ts": [
-        "./dist/src/ts4.2/index.d.ts"
+        "./dist/ts4.2/src/index.d.ts"
+      ],
+      "./dist/src/e2ee/worker/e2ee.worker.d.ts": [
+        "./dist/ts4.2//dist/src/e2ee/worker/e2ee.worker.d.ts"
       ]
     }
   },
@@ -26,11 +36,11 @@
   "author": "David Zhao <david@davidzhao.com>",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "rollup --config --bundleConfigAsCjs && yarn downlevel-dts",
+    "build": "rollup --config --bundleConfigAsCjs && rollup --config rollup.config.worker.js --bundleConfigAsCjs  && yarn downlevel-dts",
     "build:watch": "rollup --watch --config rollup.config.js",
     "build-docs": "typedoc",
     "proto": "protoc --plugin=node_modules/ts-proto/protoc-gen-ts_proto --ts_proto_opt=esModuleInterop=true --ts_proto_out=./src/proto --ts_proto_opt=outputClientImpl=false,useOptionals=messages,oneof=unions -I./protocol ./protocol/livekit_rtc.proto ./protocol/livekit_models.proto",
-    "sample": "vite serve example --port 8080 --open",
+    "sample": "vite example -c vite.config.js",
     "lint": "eslint src",
     "test": "jest",
     "deploy": "gh-pages -d example/dist",
diff --git a/protocol b/protocol
index 2a4d1a607b..5cff0336ab 160000
--- a/protocol
+++ b/protocol
@@ -1 +1 @@
-Subproject commit 2a4d1a607ba33ea9441eefacb2f0a0882e9be7dd
+Subproject commit 5cff0336ab5ea056405a55183b7ed26fb57602b6
diff --git a/rollup.config.js b/rollup.config.js
index 1330e2c20e..a87f441d07 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -9,18 +9,37 @@ import replace from 'rollup-plugin-re';
 import typescript from 'rollup-plugin-typescript2';
 import packageJson from './package.json';
 
-function kebabCaseToPascalCase(string = '') {
+export function kebabCaseToPascalCase(string = '') {
   return string.replace(/(^\w|-\w)/g, (replaceString) =>
     replaceString.replace(/-/, '').toUpperCase(),
   );
 }
 
+/**
+ * @type {import('rollup').InputPluginOption}
+ */
+export const commonPlugins = [
+  nodeResolve({ browser: true, preferBuiltins: false }),
+  commonjs(),
+  json(),
+  babel({
+    babelHelpers: 'bundled',
+    plugins: ['@babel/plugin-transform-object-rest-spread'],
+    presets: ['@babel/preset-env'],
+    extensions: ['.js', '.ts', '.mjs'],
+    babelrc: false,
+  }),
+];
+
+/**
+ * @type {import('rollup').RollupOptions}
+ */
 export default {
   input: 'src/index.ts',
   output: [
     {
       file: `dist/${packageJson.name}.esm.mjs`,
-      format: 'esm',
+      format: 'es',
       strict: true,
       sourcemap: true,
     },
@@ -35,16 +54,8 @@ export default {
   ],
   plugins: [
     del({ targets: 'dist/*' }),
-    nodeResolve({ browser: true, preferBuiltins: false }),
-    json(),
-    commonjs(),
     typescript({ tsconfig: './tsconfig.json' }),
-    babel({
-      babelHelpers: 'bundled',
-      plugins: ['@babel/plugin-transform-object-rest-spread'],
-      presets: ['@babel/preset-env'],
-      extensions: ['.js', '.ts', '.mjs'],
-    }),
+    ...commonPlugins,
     replace({
       patterns: [
         {
diff --git a/rollup.config.worker.js b/rollup.config.worker.js
new file mode 100644
index 0000000000..14115d7108
--- /dev/null
+++ b/rollup.config.worker.js
@@ -0,0 +1,25 @@
+import terser from '@rollup/plugin-terser';
+import typescript from 'rollup-plugin-typescript2';
+import packageJson from './package.json';
+import { commonPlugins, kebabCaseToPascalCase } from './rollup.config';
+
+export default {
+  input: 'src/e2ee/worker/e2ee.worker.ts',
+  output: [
+    {
+      file: `dist/${packageJson.name}.e2ee.worker.mjs`,
+      format: 'es',
+      strict: true,
+      sourcemap: true,
+    },
+    {
+      file: `dist/${packageJson.name}.e2ee.worker.js`,
+      format: 'umd',
+      strict: true,
+      sourcemap: true,
+      name: kebabCaseToPascalCase(packageJson.name) + '.e2ee.worker',
+      plugins: [terser()],
+    },
+  ],
+  plugins: [typescript({ tsconfig: './src/e2ee/worker/tsconfig.json' }), ...commonPlugins],
+};
diff --git a/src/api/SignalClient.ts b/src/api/SignalClient.ts
index c66ff84473..288527f57e 100644
--- a/src/api/SignalClient.ts
+++ b/src/api/SignalClient.ts
@@ -60,6 +60,7 @@ export interface SignalOptions {
   publishOnly?: string;
   adaptiveStream?: boolean;
   maxRetries: number;
+  e2eeEnabled: boolean;
 }
 
 type SignalMessage = SignalRequest['message'];
@@ -402,7 +403,7 @@ export class SignalClient {
   sendAddTrack(req: AddTrackRequest) {
     return this.sendRequest({
       $case: 'addTrack',
-      addTrack: AddTrackRequest.fromPartial(req),
+      addTrack: req,
     });
   }
 
diff --git a/src/connectionHelper/checks/turn.ts b/src/connectionHelper/checks/turn.ts
index 3681bab5da..3d1e32a50a 100644
--- a/src/connectionHelper/checks/turn.ts
+++ b/src/connectionHelper/checks/turn.ts
@@ -11,6 +11,7 @@ export class TURNCheck extends Checker {
     const joinRes = await signalClient.join(this.url, this.token, {
       autoSubscribe: true,
       maxRetries: 0,
+      e2eeEnabled: false,
     });
 
     let hasTLS = false;
diff --git a/src/connectionHelper/checks/websocket.ts b/src/connectionHelper/checks/websocket.ts
index 78483fd698..a6bb14303a 100644
--- a/src/connectionHelper/checks/websocket.ts
+++ b/src/connectionHelper/checks/websocket.ts
@@ -15,6 +15,7 @@ export class WebSocketCheck extends Checker {
     const joinRes = await signalClient.join(this.url, this.token, {
       autoSubscribe: true,
       maxRetries: 0,
+      e2eeEnabled: false,
     });
     this.appendMessage(`Connected to server, version ${joinRes.serverVersion}.`);
     await signalClient.close();
diff --git a/src/e2ee/E2eeManager.ts b/src/e2ee/E2eeManager.ts
new file mode 100644
index 0000000000..ae66573a05
--- /dev/null
+++ b/src/e2ee/E2eeManager.ts
@@ -0,0 +1,357 @@
+import EventEmitter from 'eventemitter3';
+import log from '../logger';
+import { Encryption_Type, TrackInfo } from '../proto/livekit_models';
+import type RTCEngine from '../room/RTCEngine';
+import type Room from '../room/Room';
+import { DeviceUnsupportedError } from '../room/errors';
+import { EngineEvent, ParticipantEvent, RoomEvent } from '../room/events';
+import LocalTrack from '../room/track/LocalTrack';
+import type RemoteTrack from '../room/track/RemoteTrack';
+import type { Track } from '../room/track/Track';
+import type { VideoCodec } from '../room/track/options';
+import type { BaseKeyProvider } from './KeyProvider';
+import { E2EE_FLAG } from './constants';
+import type {
+  E2EEManagerCallbacks,
+  E2EEOptions,
+  E2EEWorkerMessage,
+  EnableMessage,
+  EncodeMessage,
+  InitMessage,
+  KeyInfo,
+  RTPVideoMapMessage,
+  RatchetRequestMessage,
+  RemoveTransformMessage,
+  SetKeyMessage,
+  UpdateCodecMessage,
+} from './types';
+import { EncryptionEvent } from './types';
+import { isE2EESupported, isScriptTransformSupported, mimeTypeToVideoCodecString } from './utils';
+
+export class E2EEManager extends EventEmitter<E2EEManagerCallbacks> {
+  protected worker: Worker;
+
+  protected room?: Room;
+
+  private encryptionEnabled: boolean;
+
+  private keyProvider: BaseKeyProvider;
+
+  get isEnabled() {
+    return this.encryptionEnabled;
+  }
+
+  constructor(options: E2EEOptions) {
+    super();
+    this.keyProvider = options.keyProvider;
+    this.worker = options.worker;
+    this.encryptionEnabled = false;
+  }
+
+  /**
+   * @internal
+   */
+  setup(room: Room) {
+    if (!isE2EESupported()) {
+      throw new DeviceUnsupportedError(
+        'tried to setup end-to-end encryption on an unsupported browser',
+      );
+    }
+    log.info('setting up e2ee');
+    if (room !== this.room) {
+      this.room = room;
+      this.setupEventListeners(room, this.keyProvider);
+      // this.worker = new Worker('');
+      const msg: InitMessage = {
+        kind: 'init',
+        data: {
+          keyProviderOptions: this.keyProvider.getOptions(),
+        },
+      };
+      if (this.worker) {
+        log.info(`initializing worker`, { worker: this.worker });
+        this.worker.onmessage = this.onWorkerMessage;
+        this.worker.onerror = this.onWorkerError;
+        this.worker.postMessage(msg);
+      }
+    }
+  }
+
+  /**
+   * @internal
+   */
+  async setParticipantCryptorEnabled(enabled: boolean, participantId?: string) {
+    log.info(`set e2ee to ${enabled}`);
+
+    if (this.worker) {
+      const enableMsg: EnableMessage = {
+        kind: 'enable',
+        data: { enabled, participantId },
+      };
+      this.worker.postMessage(enableMsg);
+    } else {
+      throw new ReferenceError('failed to enable e2ee, worker is not ready');
+    }
+  }
+
+  private onWorkerMessage = (ev: MessageEvent<E2EEWorkerMessage>) => {
+    const { kind, data } = ev.data;
+    switch (kind) {
+      case 'error':
+        console.error('error in worker', { data });
+        this.emit(EncryptionEvent.Error, data.error);
+        break;
+      case 'enable':
+        if (this.encryptionEnabled !== data.enabled && !data.participantId) {
+          this.emit(
+            EncryptionEvent.ParticipantEncryptionStatusChanged,
+            data.enabled,
+            this.room?.localParticipant,
+          );
+          this.encryptionEnabled = data.enabled;
+        } else if (data.participantId) {
+          const participant = this.room?.getParticipantByIdentity(data.participantId);
+          this.emit(EncryptionEvent.ParticipantEncryptionStatusChanged, data.enabled, participant);
+        }
+        if (this.encryptionEnabled) {
+          this.keyProvider.getKeys().forEach((keyInfo) => {
+            this.postKey(keyInfo);
+          });
+        }
+        break;
+      case 'ratchetKey':
+        this.keyProvider.emit('keyRatcheted', data.material, data.keyIndex);
+        break;
+      default:
+        break;
+    }
+  };
+
+  private onWorkerError = (ev: ErrorEvent) => {
+    log.error('e2ee worker encountered an error:', { error: ev.error });
+    this.emit(EncryptionEvent.Error, ev.error);
+  };
+
+  public setupEngine(engine: RTCEngine) {
+    engine.on(EngineEvent.RTPVideoMapUpdate, (rtpMap) => {
+      this.postRTPMap(rtpMap);
+    });
+  }
+
+  private setupEventListeners(room: Room, keyProvider: BaseKeyProvider) {
+    room.on(RoomEvent.TrackPublished, (pub, participant) =>
+      this.setParticipantCryptorEnabled(
+        pub.trackInfo!.encryption !== Encryption_Type.NONE,
+        participant.identity,
+      ),
+    );
+    room.on(RoomEvent.TrackUnsubscribed, (track, _, participant) => {
+      const msg: RemoveTransformMessage = {
+        kind: 'removeTransform',
+        data: {
+          participantId: participant.identity,
+          trackId: track.mediaStreamID,
+        },
+      };
+      this.worker?.postMessage(msg);
+    });
+    room.on(RoomEvent.TrackSubscribed, (track, pub, participant) => {
+      this.setupE2EEReceiver(track, participant.identity, pub.trackInfo);
+    });
+    room.localParticipant.on(ParticipantEvent.LocalTrackPublished, async (publication) => {
+      this.setupE2EESender(
+        publication.track!,
+        publication.track!.sender!,
+        room.localParticipant.identity,
+      );
+    });
+
+    keyProvider
+      .on('setKey', (keyInfo) => this.postKey(keyInfo))
+      .on('ratchetRequest', (participantId, keyIndex) =>
+        this.postRatchetRequest(participantId, keyIndex),
+      );
+  }
+
+  private postRatchetRequest(participantId?: string, keyIndex?: number) {
+    if (!this.worker) {
+      throw Error('could not ratchet key, worker is missing');
+    }
+    const msg: RatchetRequestMessage = {
+      kind: 'ratchetRequest',
+      data: {
+        participantId,
+        keyIndex,
+      },
+    };
+    this.worker.postMessage(msg);
+  }
+
+  private postKey({ key, participantId, keyIndex }: KeyInfo) {
+    if (!this.worker) {
+      throw Error('could not set key, worker is missing');
+    }
+    const msg: SetKeyMessage = {
+      kind: 'setKey',
+      data: {
+        participantId,
+        key,
+        keyIndex,
+      },
+    };
+    this.worker.postMessage(msg);
+  }
+
+  private postRTPMap(map: Map<number, VideoCodec>) {
+    if (!this.worker) {
+      throw Error('could not post rtp map, worker is missing');
+    }
+    const msg: RTPVideoMapMessage = {
+      kind: 'setRTPMap',
+      data: {
+        map,
+      },
+    };
+    this.worker.postMessage(msg);
+  }
+
+  private setupE2EEReceiver(track: RemoteTrack, remoteId: string, trackInfo?: TrackInfo) {
+    if (!track.receiver) {
+      return;
+    }
+    if (!trackInfo?.mimeType || trackInfo.mimeType === '') {
+      throw new TypeError('MimeType missing from trackInfo, cannot set up E2EE cryptor');
+    }
+    this.handleReceiver(
+      track.receiver,
+      track.mediaStreamID,
+      remoteId,
+      track.kind === 'video' ? mimeTypeToVideoCodecString(trackInfo.mimeType) : undefined,
+    );
+  }
+
+  private setupE2EESender(track: Track, sender: RTCRtpSender, localId: string) {
+    if (!(track instanceof LocalTrack) || !sender) {
+      if (!sender) log.warn('early return because sender is not ready');
+      return;
+    }
+    this.handleSender(sender, track.mediaStreamID, localId, undefined);
+  }
+
+  /**
+   * Handles the given {@code RTCRtpReceiver} by creating a {@code TransformStream} which will inject
+   * a frame decoder.
+   *
+   */
+  private async handleReceiver(
+    receiver: RTCRtpReceiver,
+    trackId: string,
+    participantId: string,
+    codec?: VideoCodec,
+  ) {
+    if (!this.worker) {
+      return;
+    }
+
+    if (isScriptTransformSupported()) {
+      const options = {
+        kind: 'decode',
+        participantId,
+        trackId,
+        codec,
+      };
+      // @ts-ignore
+      receiver.transform = new RTCRtpScriptTransform(this.worker, options);
+    } else {
+      if (E2EE_FLAG in receiver && codec) {
+        // only update codec
+        const msg: UpdateCodecMessage = {
+          kind: 'updateCodec',
+          data: {
+            trackId,
+            codec,
+            participantId,
+          },
+        };
+        this.worker.postMessage(msg);
+        return;
+      }
+      // @ts-ignore
+      let writable: WritableStream = receiver.writableStream;
+      // @ts-ignore
+      let readable: ReadableStream = receiver.readableStream;
+      if (!writable || !readable) {
+        // @ts-ignore
+        const receiverStreams = receiver.createEncodedStreams();
+        // @ts-ignore
+        receiver.writableStream = receiverStreams.writable;
+        writable = receiverStreams.writable;
+        // @ts-ignore
+        receiver.readableStream = receiverStreams.readable;
+        readable = receiverStreams.readable;
+      }
+
+      const msg: EncodeMessage = {
+        kind: 'decode',
+        data: {
+          readableStream: readable,
+          writableStream: writable,
+          trackId: trackId,
+          codec,
+          participantId,
+        },
+      };
+      this.worker.postMessage(msg, [readable, writable]);
+    }
+
+    // @ts-ignore
+    receiver[E2EE_FLAG] = true;
+  }
+
+  /**
+   * Handles the given {@code RTCRtpSender} by creating a {@code TransformStream} which will inject
+   * a frame encoder.
+   *
+   */
+  private handleSender(
+    sender: RTCRtpSender,
+    trackId: string,
+    participantId: string,
+    codec?: VideoCodec,
+  ) {
+    if (E2EE_FLAG in sender || !this.worker) {
+      return;
+    }
+
+    if (isScriptTransformSupported()) {
+      log.warn('initialize script transform');
+
+      const options = {
+        kind: 'encode',
+        participantId,
+        trackId,
+        codec,
+      };
+      // @ts-ignore
+      sender.transform = new RTCRtpScriptTransform(this.worker, options);
+    } else {
+      log.warn('initialize encoded streams');
+      // @ts-ignore
+      const senderStreams = sender.createEncodedStreams();
+      const msg: EncodeMessage = {
+        kind: 'encode',
+        data: {
+          readableStream: senderStreams.readable,
+          writableStream: senderStreams.writable,
+          codec,
+          trackId,
+          participantId,
+        },
+      };
+      this.worker.postMessage(msg, [senderStreams.readable, senderStreams.writable]);
+    }
+
+    // @ts-ignore
+    sender[E2EE_FLAG] = true;
+  }
+}
diff --git a/src/e2ee/KeyProvider.ts b/src/e2ee/KeyProvider.ts
new file mode 100644
index 0000000000..c07da06d9f
--- /dev/null
+++ b/src/e2ee/KeyProvider.ts
@@ -0,0 +1,73 @@
+import EventEmitter from 'eventemitter3';
+import { KEY_PROVIDER_DEFAULTS } from './constants';
+import type { KeyInfo, KeyProviderCallbacks, KeyProviderOptions } from './types';
+import { createKeyMaterialFromString } from './utils';
+
+export class BaseKeyProvider extends EventEmitter<KeyProviderCallbacks> {
+  private keyInfoMap: Map<string, KeyInfo>;
+
+  private options: KeyProviderOptions;
+
+  constructor(options: Partial<KeyProviderOptions> = {}) {
+    super();
+    this.keyInfoMap = new Map();
+    this.options = { ...KEY_PROVIDER_DEFAULTS, ...options };
+    this.on('keyRatcheted', this.onKeyRatcheted);
+  }
+
+  /**
+   * callback to invoke once a key has been set for a participant
+   * @param key
+   * @param participantId
+   * @param keyIndex
+   */
+  protected onSetEncryptionKey(key: CryptoKey, participantId?: string, keyIndex?: number) {
+    const keyInfo: KeyInfo = { key, participantId, keyIndex };
+    this.keyInfoMap.set(`${participantId ?? 'shared'}-${keyIndex ?? 0}`, keyInfo);
+    this.emit('setKey', keyInfo);
+  }
+
+  /**
+   * callback being invoked after a ratchet request has been performed on the local participant
+   * that surfaces the new key material.
+   * @param material
+   * @param keyIndex
+   */
+  protected onKeyRatcheted = (material: CryptoKey, keyIndex?: number) => {
+    console.debug('key ratcheted event received', material, keyIndex);
+  };
+
+  getKeys() {
+    return Array.from(this.keyInfoMap.values());
+  }
+
+  getOptions() {
+    return this.options;
+  }
+
+  ratchetKey(participantId?: string, keyIndex?: number) {
+    this.emit('ratchetRequest', participantId, keyIndex);
+  }
+}
+
+/**
+ * A basic KeyProvider implementation intended for a single shared
+ * passphrase between all participants
+ */
+export class ExternalE2EEKeyProvider extends BaseKeyProvider {
+  ratchetInterval: number | undefined;
+
+  constructor(options: Partial<Omit<KeyProviderOptions, 'sharedKey'>> = {}) {
+    const opts: Partial<KeyProviderOptions> = { ...options, sharedKey: true };
+    super(opts);
+  }
+
+  /**
+   * Accepts a passphrase that's used to create the crypto keys
+   * @param key
+   */
+  async setKey(key: string) {
+    const derivedKey = await createKeyMaterialFromString(key);
+    this.onSetEncryptionKey(derivedKey);
+  }
+}
diff --git a/src/e2ee/constants.ts b/src/e2ee/constants.ts
new file mode 100644
index 0000000000..c6b14467b6
--- /dev/null
+++ b/src/e2ee/constants.ts
@@ -0,0 +1,40 @@
+import type { KeyProviderOptions } from './types';
+
+export const ENCRYPTION_ALGORITHM = 'AES-GCM';
+
+// We use a ringbuffer of keys so we can change them and still decode packets that were
+// encrypted with an old key. We use a size of 16 which corresponds to the four bits
+// in the frame trailer.
+export const KEYRING_SIZE = 16;
+
+// We copy the first bytes of the VP8 payload unencrypted.
+// For keyframes this is 10 bytes, for non-keyframes (delta) 3. See
+//   https://tools.ietf.org/html/rfc6386#section-9.1
+// This allows the bridge to continue detecting keyframes (only one byte needed in the JVB)
+// and is also a bit easier for the VP8 decoder (i.e. it generates funny garbage pictures
+// instead of being unable to decode).
+// This is a bit for show and we might want to reduce to 1 unconditionally in the final version.
+//
+// For audio (where frame.type is not set) we do not encrypt the opus TOC byte:
+//   https://tools.ietf.org/html/rfc6716#section-3.1
+export const UNENCRYPTED_BYTES = {
+  key: 10,
+  delta: 3,
+  audio: 1, // frame.type is not set on audio, so this is set manually
+  empty: 0,
+} as const;
+
+/* We use a 12 byte bit IV. This is signalled in plain together with the
+ packet. See https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt#parameters */
+export const IV_LENGTH = 12;
+
+// flag set to indicate that e2ee has been setup for sender/receiver;
+export const E2EE_FLAG = 'lk_e2ee';
+
+export const SALT = 'LKFrameEncryptionKey';
+
+export const KEY_PROVIDER_DEFAULTS: KeyProviderOptions = {
+  sharedKey: false,
+  ratchetSalt: SALT,
+  ratchetWindowSize: 8,
+} as const;
diff --git a/src/e2ee/errors.ts b/src/e2ee/errors.ts
new file mode 100644
index 0000000000..d20c78be67
--- /dev/null
+++ b/src/e2ee/errors.ts
@@ -0,0 +1,16 @@
+import { LivekitError } from '../room/errors';
+
+export enum CryptorErrorReason {
+  InvalidKey = 0,
+  MissingKey = 1,
+  InternalError = 2,
+}
+
+export class CryptorError extends LivekitError {
+  reason: CryptorErrorReason;
+
+  constructor(message?: string, reason: CryptorErrorReason = CryptorErrorReason.InternalError) {
+    super(40, message);
+    this.reason = reason;
+  }
+}
diff --git a/src/e2ee/index.ts b/src/e2ee/index.ts
new file mode 100644
index 0000000000..1ec2021c09
--- /dev/null
+++ b/src/e2ee/index.ts
@@ -0,0 +1,3 @@
+export * from './KeyProvider';
+export * from './utils';
+export * from './types';
diff --git a/src/e2ee/types.ts b/src/e2ee/types.ts
new file mode 100644
index 0000000000..4d3cd812e5
--- /dev/null
+++ b/src/e2ee/types.ts
@@ -0,0 +1,160 @@
+import type Participant from '../room/participant/Participant';
+import type { VideoCodec } from '../room/track/options';
+import type { BaseKeyProvider } from './KeyProvider';
+import type { CryptorError } from './errors';
+
+export interface BaseMessage {
+  kind: string;
+  data?: unknown;
+}
+
+export interface InitMessage extends BaseMessage {
+  kind: 'init';
+  data: {
+    keyProviderOptions: KeyProviderOptions;
+  };
+}
+
+export interface SetKeyMessage extends BaseMessage {
+  kind: 'setKey';
+  data: {
+    participantId?: string;
+    key: CryptoKey;
+    keyIndex?: number;
+  };
+}
+
+export interface RTPVideoMapMessage extends BaseMessage {
+  kind: 'setRTPMap';
+  data: {
+    map: Map<number, VideoCodec>;
+  };
+}
+
+export interface EncodeMessage extends BaseMessage {
+  kind: 'decode' | 'encode';
+  data: {
+    participantId: string;
+    readableStream: ReadableStream;
+    writableStream: WritableStream;
+    trackId: string;
+    codec?: VideoCodec;
+  };
+}
+
+export interface RemoveTransformMessage extends BaseMessage {
+  kind: 'removeTransform';
+  data: {
+    participantId: string;
+    trackId: string;
+  };
+}
+
+export interface UpdateCodecMessage extends BaseMessage {
+  kind: 'updateCodec';
+  data: {
+    participantId: string;
+    trackId: string;
+    codec: VideoCodec;
+  };
+}
+
+export interface RatchetRequestMessage extends BaseMessage {
+  kind: 'ratchetRequest';
+  data: {
+    participantId: string | undefined;
+    keyIndex?: number;
+  };
+}
+
+export interface RatchetMessage extends BaseMessage {
+  kind: 'ratchetKey';
+  data: {
+    // participantId: string | undefined;
+    keyIndex?: number;
+    material: CryptoKey;
+  };
+}
+
+export interface ErrorMessage extends BaseMessage {
+  kind: 'error';
+  data: {
+    error: Error;
+  };
+}
+
+export interface EnableMessage extends BaseMessage {
+  kind: 'enable';
+  data: {
+    // if no participant id is set it indicates publisher encryption enable/disable
+    participantId?: string;
+    enabled: boolean;
+  };
+}
+
+export type E2EEWorkerMessage =
+  | InitMessage
+  | SetKeyMessage
+  | EncodeMessage
+  | ErrorMessage
+  | EnableMessage
+  | RemoveTransformMessage
+  | RTPVideoMapMessage
+  | UpdateCodecMessage
+  | RatchetRequestMessage
+  | RatchetMessage;
+
+export type KeySet = { material: CryptoKey; encryptionKey: CryptoKey };
+
+export type KeyProviderOptions = {
+  sharedKey: boolean;
+  ratchetSalt: string;
+  ratchetWindowSize: number;
+};
+
+export type KeyProviderCallbacks = {
+  setKey: (keyInfo: KeyInfo) => void;
+  ratchetRequest: (participantId?: string, keyIndex?: number) => void;
+  /** currently only emitted for local participant */
+  keyRatcheted: (material: CryptoKey, keyIndex?: number) => void;
+};
+
+export type ParticipantKeyHandlerCallbacks = {
+  keyRatcheted: (material: CryptoKey, keyIndex?: number, participantId?: string) => void;
+};
+
+export type E2EEManagerCallbacks = {
+  participantEncryptionStatusChanged: (enabled: boolean, participant?: Participant) => void;
+  encryptionError: (error: Error) => void;
+};
+
+export const EncryptionEvent = {
+  ParticipantEncryptionStatusChanged: 'participantEncryptionStatusChanged',
+  Error: 'encryptionError',
+} as const;
+
+export type CryptorCallbacks = {
+  cryptorError: (error: CryptorError) => void;
+};
+
+export const CryptorEvent = {
+  Error: 'cryptorError',
+} as const;
+
+export type KeyInfo = {
+  key: CryptoKey;
+  participantId?: string;
+  keyIndex?: number;
+};
+
+export type E2EEOptions = {
+  keyProvider: BaseKeyProvider;
+  worker: Worker;
+};
+
+export type DecodeRatchetOptions = {
+  /** attempts  */
+  ratchetCount: number;
+  /** ratcheted key to try */
+  encryptionKey?: CryptoKey;
+};
diff --git a/src/e2ee/utils.ts b/src/e2ee/utils.ts
new file mode 100644
index 0000000000..b5abe93789
--- /dev/null
+++ b/src/e2ee/utils.ts
@@ -0,0 +1,127 @@
+import { videoCodecs } from '../room/track/options';
+import type { VideoCodec } from '../room/track/options';
+import { ENCRYPTION_ALGORITHM } from './constants';
+
+export function isE2EESupported() {
+  return isInsertableStreamSupported() || isScriptTransformSupported();
+}
+
+export function isScriptTransformSupported() {
+  // @ts-ignore
+  return typeof window.RTCRtpScriptTransform !== 'undefined';
+}
+
+export function isInsertableStreamSupported() {
+  return (
+    typeof window.RTCRtpSender !== 'undefined' &&
+    // @ts-ignore
+    typeof window.RTCRtpSender.prototype.createEncodedStreams !== 'undefined'
+  );
+}
+
+export function isVideoFrame(
+  frame: RTCEncodedAudioFrame | RTCEncodedVideoFrame,
+): frame is RTCEncodedVideoFrame {
+  return 'type' in frame;
+}
+
+export async function importKey(
+  keyBytes: Uint8Array | ArrayBuffer,
+  algorithm: string | { name: string } = { name: ENCRYPTION_ALGORITHM },
+  usage: 'derive' | 'encrypt' = 'encrypt',
+) {
+  // https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/importKey
+  return crypto.subtle.importKey(
+    'raw',
+    keyBytes,
+    algorithm,
+    false,
+    usage === 'derive' ? ['deriveBits', 'deriveKey'] : ['encrypt', 'decrypt'],
+  );
+}
+
+export async function createKeyMaterialFromString(password: string) {
+  let enc = new TextEncoder();
+
+  const keyMaterial = await crypto.subtle.importKey(
+    'raw',
+    enc.encode(password),
+    {
+      name: 'PBKDF2',
+    },
+    false,
+    ['deriveBits', 'deriveKey'],
+  );
+
+  return keyMaterial;
+}
+
+function getAlgoOptions(algorithmName: string, salt: string) {
+  const textEncoder = new TextEncoder();
+  const encodedSalt = textEncoder.encode(salt);
+  switch (algorithmName) {
+    case 'HKDF':
+      return {
+        name: 'HKDF',
+        salt: encodedSalt,
+        hash: 'SHA-256',
+        info: new ArrayBuffer(128),
+      };
+    case 'PBKDF2': {
+      return {
+        name: 'PBKDF2',
+        salt: encodedSalt,
+        hash: 'SHA-256',
+        iterations: 100000,
+      };
+    }
+    default:
+      throw new Error(`algorithm ${algorithmName} is currently unsupported`);
+  }
+}
+
+/**
+ * Derives a set of keys from the master key.
+ * See https://tools.ietf.org/html/draft-omara-sframe-00#section-4.3.1
+ */
+export async function deriveKeys(material: CryptoKey, salt: string) {
+  const algorithmOptions = getAlgoOptions(material.algorithm.name, salt);
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/deriveKey#HKDF
+  // https://developer.mozilla.org/en-US/docs/Web/API/HkdfParams
+  const encryptionKey = await crypto.subtle.deriveKey(
+    algorithmOptions,
+    material,
+    {
+      name: ENCRYPTION_ALGORITHM,
+      length: 128,
+    },
+    false,
+    ['encrypt', 'decrypt'],
+  );
+
+  return { material, encryptionKey };
+}
+
+export function createE2EEKey(): Uint8Array {
+  return window.crypto.getRandomValues(new Uint8Array(32));
+}
+
+export function mimeTypeToVideoCodecString(mimeType: string) {
+  const codec = mimeType.split('/')[1].toLowerCase() as VideoCodec;
+  if (!videoCodecs.includes(codec)) {
+    throw Error(`Video codec not supported: ${codec}`);
+  }
+  return codec;
+}
+
+/**
+ * Ratchets a key. See
+ * https://tools.ietf.org/html/draft-omara-sframe-00#section-4.3.5.1
+ */
+export async function ratchet(material: CryptoKey, salt: string): Promise<ArrayBuffer> {
+  const algorithmOptions = getAlgoOptions(material.algorithm.name, salt);
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/deriveBits
+  return crypto.subtle.deriveBits(algorithmOptions, material, 256);
+}
diff --git a/src/e2ee/worker/FrameCryptor.test.ts b/src/e2ee/worker/FrameCryptor.test.ts
new file mode 100644
index 0000000000..67be8d1fe5
--- /dev/null
+++ b/src/e2ee/worker/FrameCryptor.test.ts
@@ -0,0 +1,21 @@
+/**
+ * @jest-environment node
+ */
+import { isFrameServerInjected } from './FrameCryptor';
+
+describe('FrameCryptor', () => {
+  it('identifies server injected frame correctly', () => {
+    const frameTrailer = new TextEncoder().encode('LKROCKS');
+    const frameData = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, ...frameTrailer]).buffer;
+
+    expect(isFrameServerInjected(frameData, frameTrailer)).toBe(true);
+  });
+  it('identifies server non server injected frame correctly', () => {
+    const frameTrailer = new TextEncoder().encode('LKROCKS');
+    const frameData = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, ...frameTrailer, 10]);
+
+    expect(isFrameServerInjected(frameData.buffer, frameTrailer)).toBe(false);
+    frameData.fill(0);
+    expect(isFrameServerInjected(frameData.buffer, frameTrailer)).toBe(false);
+  });
+});
diff --git a/src/e2ee/worker/FrameCryptor.ts b/src/e2ee/worker/FrameCryptor.ts
new file mode 100644
index 0000000000..01e38932a9
--- /dev/null
+++ b/src/e2ee/worker/FrameCryptor.ts
@@ -0,0 +1,614 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// TODO code inspired by https://github.com/webrtc/samples/blob/gh-pages/src/content/insertable-streams/endtoend-encryption/js/worker.js
+import EventEmitter from 'eventemitter3';
+import { workerLogger } from '../../logger';
+import type { VideoCodec } from '../../room/track/options';
+import { ENCRYPTION_ALGORITHM, IV_LENGTH, UNENCRYPTED_BYTES } from '../constants';
+import { CryptorError, CryptorErrorReason } from '../errors';
+import {
+  CryptorCallbacks,
+  CryptorEvent,
+  DecodeRatchetOptions,
+  KeyProviderOptions,
+  KeySet,
+} from '../types';
+import { deriveKeys, isVideoFrame } from '../utils';
+import type { ParticipantKeyHandler } from './ParticipantKeyHandler';
+
+export interface FrameCryptorConstructor {
+  new (opts?: unknown): BaseFrameCryptor;
+}
+
+export interface TransformerInfo {
+  readable: ReadableStream;
+  writable: WritableStream;
+  transformer: TransformStream;
+  abortController: AbortController;
+}
+
+export class BaseFrameCryptor extends EventEmitter<CryptorCallbacks> {
+  encodeFunction(
+    encodedFrame: RTCEncodedVideoFrame | RTCEncodedAudioFrame,
+    controller: TransformStreamDefaultController,
+  ): Promise<any> {
+    throw Error('not implemented for subclass');
+  }
+
+  decodeFunction(
+    encodedFrame: RTCEncodedVideoFrame | RTCEncodedAudioFrame,
+    controller: TransformStreamDefaultController,
+  ): Promise<any> {
+    throw Error('not implemented for subclass');
+  }
+}
+
+/**
+ * Cryptor is responsible for en-/decrypting media frames.
+ * Each Cryptor instance is responsible for en-/decrypting a single mediaStreamTrack.
+ */
+export class FrameCryptor extends BaseFrameCryptor {
+  private sendCounts: Map<number, number>;
+
+  private isKeyInvalid = false;
+
+  private participantId: string | undefined;
+
+  private trackId: string | undefined;
+
+  private keys: ParticipantKeyHandler;
+
+  private videoCodec?: VideoCodec;
+
+  private rtpMap: Map<number, VideoCodec>;
+
+  private keyProviderOptions: KeyProviderOptions;
+
+  /**
+   * used for detecting server injected unencrypted frames
+   */
+  private unencryptedFrameByteTrailer: Uint8Array;
+
+  constructor(opts: {
+    keys: ParticipantKeyHandler;
+    participantId: string;
+    keyProviderOptions: KeyProviderOptions;
+    unencryptedFrameBytes?: Uint8Array;
+  }) {
+    super();
+    this.sendCounts = new Map();
+    this.keys = opts.keys;
+    this.participantId = opts.participantId;
+    this.rtpMap = new Map();
+    this.keyProviderOptions = opts.keyProviderOptions;
+    this.unencryptedFrameByteTrailer =
+      opts.unencryptedFrameBytes ?? new TextEncoder().encode('LKROCKS');
+  }
+
+  /**
+   * Assign a different participant to the cryptor.
+   * useful for transceiver re-use
+   * @param id
+   * @param keys
+   */
+  setParticipant(id: string, keys: ParticipantKeyHandler) {
+    this.participantId = id;
+    this.keys = keys;
+  }
+
+  unsetParticipant() {
+    this.participantId = undefined;
+  }
+
+  getParticipantId() {
+    return this.participantId;
+  }
+
+  getTrackId() {
+    return this.trackId;
+  }
+
+  /**
+   * Update the video codec used by the mediaStreamTrack
+   * @param codec
+   */
+  setVideoCodec(codec: VideoCodec) {
+    this.videoCodec = codec;
+  }
+
+  /**
+   * rtp payload type map used for figuring out codec of payload type when encoding
+   * @param map
+   */
+  setRtpMap(map: Map<number, VideoCodec>) {
+    this.rtpMap = map;
+  }
+
+  setupTransform(
+    operation: 'encode' | 'decode',
+    readable: ReadableStream,
+    writable: WritableStream,
+    trackId: string,
+    codec?: VideoCodec,
+  ) {
+    if (codec) {
+      console.info('setting codec on cryptor to', codec);
+      this.videoCodec = codec;
+    }
+    const transformFn = operation === 'encode' ? this.encodeFunction : this.decodeFunction;
+    const transformStream = new TransformStream({
+      transform: transformFn.bind(this),
+    });
+
+    readable
+      .pipeThrough(transformStream)
+      .pipeTo(writable)
+      .catch((e) => {
+        console.error(e);
+        this.emit('cryptorError', e instanceof CryptorError ? e : new CryptorError(e.message));
+      });
+    this.trackId = trackId;
+  }
+
+  /**
+   * Function that will be injected in a stream and will encrypt the given encoded frames.
+   *
+   * @param {RTCEncodedVideoFrame|RTCEncodedAudioFrame} encodedFrame - Encoded video frame.
+   * @param {TransformStreamDefaultController} controller - TransportStreamController.
+   *
+   * The VP8 payload descriptor described in
+   * https://tools.ietf.org/html/rfc7741#section-4.2
+   * is part of the RTP packet and not part of the frame and is not controllable by us.
+   * This is fine as the SFU keeps having access to it for routing.
+   *
+   * The encrypted frame is formed as follows:
+   * 1) Find unencrypted byte length, depending on the codec, frame type and kind.
+   * 2) Form the GCM IV for the frame as described above.
+   * 3) Encrypt the rest of the frame using AES-GCM.
+   * 4) Allocate space for the encrypted frame.
+   * 5) Copy the unencrypted bytes to the start of the encrypted frame.
+   * 6) Append the ciphertext to the encrypted frame.
+   * 7) Append the IV.
+   * 8) Append a single byte for the key identifier.
+   * 9) Enqueue the encrypted frame for sending.
+   */
+  async encodeFunction(
+    encodedFrame: RTCEncodedVideoFrame | RTCEncodedAudioFrame,
+    controller: TransformStreamDefaultController,
+  ) {
+    if (
+      !this.keys.isEnabled() ||
+      // skip for encryption for empty dtx frames
+      encodedFrame.data.byteLength === 0
+    ) {
+      return controller.enqueue(encodedFrame);
+    }
+
+    const { encryptionKey } = this.keys.getKeySet();
+    const keyIndex = this.keys.getCurrentKeyIndex();
+
+    if (encryptionKey) {
+      const iv = this.makeIV(
+        encodedFrame.getMetadata().synchronizationSource ?? -1,
+        encodedFrame.timestamp,
+      );
+
+      // Thіs is not encrypted and contains the VP8 payload descriptor or the Opus TOC byte.
+      const frameHeader = new Uint8Array(
+        encodedFrame.data,
+        0,
+        this.getUnencryptedBytes(encodedFrame),
+      );
+
+      // Frame trailer contains the R|IV_LENGTH and key index
+      const frameTrailer = new Uint8Array(2);
+
+      frameTrailer[0] = IV_LENGTH;
+      frameTrailer[1] = keyIndex;
+
+      // Construct frame trailer. Similar to the frame header described in
+      // https://tools.ietf.org/html/draft-omara-sframe-00#section-4.2
+      // but we put it at the end.
+      //
+      // ---------+-------------------------+-+---------+----
+      // payload  |IV...(length = IV_LENGTH)|R|IV_LENGTH|KID |
+      // ---------+-------------------------+-+---------+----
+      try {
+        const cipherText = await crypto.subtle.encrypt(
+          {
+            name: ENCRYPTION_ALGORITHM,
+            iv,
+            additionalData: new Uint8Array(encodedFrame.data, 0, frameHeader.byteLength),
+          },
+          encryptionKey,
+          new Uint8Array(encodedFrame.data, this.getUnencryptedBytes(encodedFrame)),
+        );
+
+        const newData = new ArrayBuffer(
+          frameHeader.byteLength + cipherText.byteLength + iv.byteLength + frameTrailer.byteLength,
+        );
+        const newUint8 = new Uint8Array(newData);
+
+        newUint8.set(frameHeader); // copy first bytes.
+        newUint8.set(new Uint8Array(cipherText), frameHeader.byteLength); // add ciphertext.
+        newUint8.set(new Uint8Array(iv), frameHeader.byteLength + cipherText.byteLength); // append IV.
+        newUint8.set(frameTrailer, frameHeader.byteLength + cipherText.byteLength + iv.byteLength); // append frame trailer.
+
+        encodedFrame.data = newData;
+
+        return controller.enqueue(encodedFrame);
+      } catch (e: any) {
+        // TODO: surface this to the app.
+        workerLogger.error(e);
+      }
+    } else {
+      this.emit(
+        CryptorEvent.Error,
+        new CryptorError(`encryption key missing for encoding`, CryptorErrorReason.MissingKey),
+      );
+    }
+  }
+
+  /**
+   * Function that will be injected in a stream and will decrypt the given encoded frames.
+   *
+   * @param {RTCEncodedVideoFrame|RTCEncodedAudioFrame} encodedFrame - Encoded video frame.
+   * @param {TransformStreamDefaultController} controller - TransportStreamController.
+   */
+  async decodeFunction(
+    encodedFrame: RTCEncodedVideoFrame | RTCEncodedAudioFrame,
+    controller: TransformStreamDefaultController,
+  ) {
+    if (
+      !this.keys.isEnabled() ||
+      // skip for decryption for empty dtx frames
+      encodedFrame.data.byteLength === 0 ||
+      // skip decryption if frame is server injected
+      isFrameServerInjected(encodedFrame.data, this.unencryptedFrameByteTrailer)
+    ) {
+      return controller.enqueue(encodedFrame);
+    }
+    const data = new Uint8Array(encodedFrame.data);
+    const keyIndex = data[encodedFrame.data.byteLength - 1];
+
+    if (this.keys.getKeySet(keyIndex)) {
+      try {
+        const decodedFrame = await this.decryptFrame(encodedFrame, keyIndex);
+        if (decodedFrame) {
+          return controller.enqueue(decodedFrame);
+        }
+        this.isKeyInvalid = false;
+      } catch (error) {
+        if (error instanceof CryptorError && error.reason === CryptorErrorReason.InvalidKey) {
+          if (!this.isKeyInvalid) {
+            workerLogger.warn('invalid key');
+            this.emit(
+              CryptorEvent.Error,
+              new CryptorError(
+                `invalid key for participant ${this.participantId}`,
+                CryptorErrorReason.InvalidKey,
+              ),
+            );
+            this.isKeyInvalid = true;
+          }
+        } else {
+          workerLogger.warn('decoding frame failed', { error });
+        }
+      }
+    } else {
+      this.emit(
+        CryptorEvent.Error,
+        new CryptorError(
+          `key missing for participant ${this.participantId}`,
+          CryptorErrorReason.MissingKey,
+        ),
+      );
+    }
+
+    return controller.enqueue(encodedFrame);
+  }
+
+  /**
+   * Function that will decrypt the given encoded frame. If the decryption fails, it will
+   * ratchet the key for up to RATCHET_WINDOW_SIZE times.
+   */
+  async decryptFrame(
+    encodedFrame: RTCEncodedVideoFrame | RTCEncodedAudioFrame,
+    keyIndex: number,
+    initialMaterial: KeySet | undefined = undefined,
+    ratchetOpts: DecodeRatchetOptions = { ratchetCount: 0 },
+  ): Promise<RTCEncodedVideoFrame | RTCEncodedAudioFrame | undefined> {
+    const keySet = this.keys.getKeySet(keyIndex);
+
+    // Construct frame trailer. Similar to the frame header described in
+    // https://tools.ietf.org/html/draft-omara-sframe-00#section-4.2
+    // but we put it at the end.
+    //
+    // ---------+-------------------------+-+---------+----
+    // payload  |IV...(length = IV_LENGTH)|R|IV_LENGTH|KID |
+    // ---------+-------------------------+-+---------+----
+
+    try {
+      const frameHeader = new Uint8Array(
+        encodedFrame.data,
+        0,
+        this.getUnencryptedBytes(encodedFrame),
+      );
+      const frameTrailer = new Uint8Array(encodedFrame.data, encodedFrame.data.byteLength - 2, 2);
+
+      const ivLength = frameTrailer[0];
+      const iv = new Uint8Array(
+        encodedFrame.data,
+        encodedFrame.data.byteLength - ivLength - frameTrailer.byteLength,
+        ivLength,
+      );
+
+      const cipherTextStart = frameHeader.byteLength;
+      const cipherTextLength =
+        encodedFrame.data.byteLength -
+        (frameHeader.byteLength + ivLength + frameTrailer.byteLength);
+
+      const plainText = await crypto.subtle.decrypt(
+        {
+          name: ENCRYPTION_ALGORITHM,
+          iv,
+          additionalData: new Uint8Array(encodedFrame.data, 0, frameHeader.byteLength),
+        },
+        ratchetOpts.encryptionKey ?? keySet.encryptionKey,
+        new Uint8Array(encodedFrame.data, cipherTextStart, cipherTextLength),
+      );
+
+      const newData = new ArrayBuffer(frameHeader.byteLength + plainText.byteLength);
+      const newUint8 = new Uint8Array(newData);
+
+      newUint8.set(new Uint8Array(encodedFrame.data, 0, frameHeader.byteLength));
+      newUint8.set(new Uint8Array(plainText), frameHeader.byteLength);
+
+      encodedFrame.data = newData;
+
+      return encodedFrame;
+    } catch (error: any) {
+      if (this.keyProviderOptions.ratchetWindowSize > 0) {
+        if (ratchetOpts.ratchetCount < this.keyProviderOptions.ratchetWindowSize) {
+          workerLogger.debug(
+            `ratcheting key attempt ${ratchetOpts.ratchetCount} of ${
+              this.keyProviderOptions.ratchetWindowSize
+            }, for kind ${encodedFrame instanceof RTCEncodedAudioFrame ? 'audio' : 'video'}`,
+          );
+
+          let ratchetedKeySet: KeySet | undefined;
+          if (keySet === this.keys.getKeySet(keyIndex)) {
+            // only ratchet if the currently set key is still the same as the one used to decrypt this frame
+            // if not, it might be that a different frame has already ratcheted and we try with that one first
+            const newMaterial = await this.keys.ratchetKey(keyIndex, false);
+
+            ratchetedKeySet = await deriveKeys(newMaterial, this.keyProviderOptions.ratchetSalt);
+          }
+
+          const frame = await this.decryptFrame(encodedFrame, keyIndex, initialMaterial || keySet, {
+            ratchetCount: ratchetOpts.ratchetCount + 1,
+            encryptionKey: ratchetedKeySet?.encryptionKey,
+          });
+          if (frame && ratchetedKeySet) {
+            this.keys.setKeySet(ratchetedKeySet, keyIndex, true);
+            // decryption was successful, set the new key index to reflect the ratcheted key set
+            this.keys.setCurrentKeyIndex(keyIndex);
+          }
+          return frame;
+        } else {
+          /**
+           * Since the key it is first send and only afterwards actually used for encrypting, there were
+           * situations when the decrypting failed due to the fact that the received frame was not encrypted
+           * yet and ratcheting, of course, did not solve the problem. So if we fail RATCHET_WINDOW_SIZE times,
+           * we come back to the initial key.
+           */
+          if (initialMaterial) {
+            workerLogger.debug('resetting to initial material');
+            this.keys.setKeyFromMaterial(initialMaterial.material, keyIndex);
+          }
+
+          workerLogger.warn('maximum ratchet attempts exceeded, resetting key');
+        }
+      } else {
+        throw new CryptorError(
+          'Decryption failed, most likely because of an invalid key',
+          CryptorErrorReason.InvalidKey,
+        );
+      }
+    }
+  }
+
+  /**
+   * Construct the IV used for AES-GCM and sent (in plain) with the packet similar to
+   * https://tools.ietf.org/html/rfc7714#section-8.1
+   * It concatenates
+   * - the 32 bit synchronization source (SSRC) given on the encoded frame,
+   * - the 32 bit rtp timestamp given on the encoded frame,
+   * - a send counter that is specific to the SSRC. Starts at a random number.
+   * The send counter is essentially the pictureId but we currently have to implement this ourselves.
+   * There is no XOR with a salt. Note that this IV leaks the SSRC to the receiver but since this is
+   * randomly generated and SFUs may not rewrite this is considered acceptable.
+   * The SSRC is used to allow demultiplexing multiple streams with the same key, as described in
+   *   https://tools.ietf.org/html/rfc3711#section-4.1.1
+   * The RTP timestamp is 32 bits and advances by the codec clock rate (90khz for video, 48khz for
+   * opus audio) every second. For video it rolls over roughly every 13 hours.
+   * The send counter will advance at the frame rate (30fps for video, 50fps for 20ms opus audio)
+   * every second. It will take a long time to roll over.
+   *
+   * See also https://developer.mozilla.org/en-US/docs/Web/API/AesGcmParams
+   */
+  private makeIV(synchronizationSource: number, timestamp: number) {
+    const iv = new ArrayBuffer(IV_LENGTH);
+    const ivView = new DataView(iv);
+
+    // having to keep our own send count (similar to a picture id) is not ideal.
+    if (!this.sendCounts.has(synchronizationSource)) {
+      // Initialize with a random offset, similar to the RTP sequence number.
+      this.sendCounts.set(synchronizationSource, Math.floor(Math.random() * 0xffff));
+    }
+
+    const sendCount = this.sendCounts.get(synchronizationSource) ?? 0;
+
+    ivView.setUint32(0, synchronizationSource);
+    ivView.setUint32(4, timestamp);
+    ivView.setUint32(8, timestamp - (sendCount % 0xffff));
+
+    this.sendCounts.set(synchronizationSource, sendCount + 1);
+
+    return iv;
+  }
+
+  getUnencryptedBytes(frame: RTCEncodedVideoFrame | RTCEncodedAudioFrame): number {
+    if (isVideoFrame(frame)) {
+      let detectedCodec = this.getVideoCodec(frame) ?? this.videoCodec;
+
+      if (detectedCodec === 'av1' || detectedCodec === 'vp9') {
+        throw new Error(`${detectedCodec} is not yet supported for end to end encryption`);
+      }
+
+      if (detectedCodec === 'vp8') {
+        return UNENCRYPTED_BYTES[frame.type];
+      }
+
+      const data = new Uint8Array(frame.data);
+      try {
+        const naluIndices = findNALUIndices(data);
+
+        // if the detected codec is undefined we test whether it _looks_ like a h264 frame as a best guess
+        const isH264 =
+          detectedCodec === 'h264' ||
+          naluIndices.some((naluIndex) =>
+            [NALUType.SLICE_IDR, NALUType.SLICE_NON_IDR].includes(parseNALUType(data[naluIndex])),
+          );
+
+        if (isH264) {
+          for (const index of naluIndices) {
+            let type = parseNALUType(data[index]);
+            switch (type) {
+              case NALUType.SLICE_IDR:
+              case NALUType.SLICE_NON_IDR:
+                return index + 2;
+              default:
+                break;
+            }
+          }
+          throw new TypeError('Could not find NALU');
+        }
+      } catch (e) {
+        // no op, we just continue and fallback to vp8
+      }
+
+      return UNENCRYPTED_BYTES[frame.type];
+    } else {
+      return UNENCRYPTED_BYTES.audio;
+    }
+  }
+
+  /**
+   * inspects frame payloadtype if available and maps it to the codec specified in rtpMap
+   */
+  getVideoCodec(frame: RTCEncodedVideoFrame): VideoCodec | undefined {
+    if (this.rtpMap.size === 0) {
+      return undefined;
+    }
+    // @ts-expect-error payloadType is not yet part of the typescript definition and currently not supported in Safari
+    const payloadType = frame.getMetadata().payloadType;
+    const codec = payloadType ? this.rtpMap.get(payloadType) : undefined;
+    return codec;
+  }
+}
+
+/**
+ * Slice the NALUs present in the supplied buffer, assuming it is already byte-aligned
+ * code adapted from https://github.com/medooze/h264-frame-parser/blob/main/lib/NalUnits.ts to return indices only
+ */
+export function findNALUIndices(stream: Uint8Array): number[] {
+  const result: number[] = [];
+  let start = 0,
+    pos = 0,
+    searchLength = stream.length - 2;
+  while (pos < searchLength) {
+    // skip until end of current NALU
+    while (
+      pos < searchLength &&
+      !(stream[pos] === 0 && stream[pos + 1] === 0 && stream[pos + 2] === 1)
+    )
+      pos++;
+    if (pos >= searchLength) pos = stream.length;
+    // remove trailing zeros from current NALU
+    let end = pos;
+    while (end > start && stream[end - 1] === 0) end--;
+    // save current NALU
+    if (start === 0) {
+      if (end !== start) throw TypeError('byte stream contains leading data');
+    } else {
+      result.push(start);
+    }
+    // begin new NALU
+    start = pos = pos + 3;
+  }
+  return result;
+}
+
+export function parseNALUType(startByte: number): NALUType {
+  return startByte & kNaluTypeMask;
+}
+
+const kNaluTypeMask = 0x1f;
+
+export enum NALUType {
+  /** Coded slice of a non-IDR picture */
+  SLICE_NON_IDR = 1,
+  /** Coded slice data partition A */
+  SLICE_PARTITION_A = 2,
+  /** Coded slice data partition B */
+  SLICE_PARTITION_B = 3,
+  /** Coded slice data partition C */
+  SLICE_PARTITION_C = 4,
+  /** Coded slice of an IDR picture */
+  SLICE_IDR = 5,
+  /** Supplemental enhancement information */
+  SEI = 6,
+  /** Sequence parameter set */
+  SPS = 7,
+  /** Picture parameter set */
+  PPS = 8,
+  /** Access unit delimiter */
+  AUD = 9,
+  /** End of sequence */
+  END_SEQ = 10,
+  /** End of stream */
+  END_STREAM = 11,
+  /** Filler data */
+  FILLER_DATA = 12,
+  /** Sequence parameter set extension */
+  SPS_EXT = 13,
+  /** Prefix NAL unit */
+  PREFIX_NALU = 14,
+  /** Subset sequence parameter set */
+  SUBSET_SPS = 15,
+  /** Depth parameter set */
+  DPS = 16,
+
+  // 17, 18 reserved
+
+  /** Coded slice of an auxiliary coded picture without partitioning */
+  SLICE_AUX = 19,
+  /** Coded slice extension */
+  SLICE_EXT = 20,
+  /** Coded slice extension for a depth view component or a 3D-AVC texture view component */
+  SLICE_LAYER_EXT = 21,
+
+  // 22, 23 reserved
+}
+
+/**
+ * we use a magic frame trailer to detect whether a frame is injected
+ * by the livekit server and thus to be treated as unencrypted
+ * @internal
+ */
+export function isFrameServerInjected(frameData: ArrayBuffer, trailerBytes: Uint8Array): boolean {
+  const frameTrailer = new Uint8Array(
+    frameData.slice(frameData.byteLength - trailerBytes.byteLength),
+  );
+  return trailerBytes.every((value, index) => value === frameTrailer[index]);
+}
diff --git a/src/e2ee/worker/ParticipantKeyHandler.ts b/src/e2ee/worker/ParticipantKeyHandler.ts
new file mode 100644
index 0000000000..4b4ab91be7
--- /dev/null
+++ b/src/e2ee/worker/ParticipantKeyHandler.ts
@@ -0,0 +1,129 @@
+import EventEmitter from 'eventemitter3';
+import { workerLogger } from '../../logger';
+import { KEYRING_SIZE } from '../constants';
+import type { KeyProviderOptions, KeySet, ParticipantKeyHandlerCallbacks } from '../types';
+import { deriveKeys, importKey, ratchet } from '../utils';
+
+// TODO ParticipantKeyHandlers currently don't get destroyed on participant disconnect
+// we could do this by having a separate worker message on participant disconnected.
+
+/**
+ * ParticipantKeyHandler is responsible for providing a cryptor instance with the
+ * en-/decryption key of a participant. It assumes that all tracks of a specific participant
+ * are encrypted with the same key.
+ * Additionally it exposes a method to ratchet a key which can be used by the cryptor either automatically
+ * if decryption fails or can be triggered manually on both sender and receiver side.
+ *
+ */
+export class ParticipantKeyHandler extends EventEmitter<ParticipantKeyHandlerCallbacks> {
+  private currentKeyIndex: number;
+
+  private cryptoKeyRing: Array<KeySet>;
+
+  private enabled: boolean;
+
+  private keyProviderOptions: KeyProviderOptions;
+
+  private ratchetPromiseMap: Map<number, Promise<CryptoKey>>;
+
+  private participantId: string | undefined;
+
+  constructor(
+    participantId: string | undefined,
+    isEnabled: boolean,
+    keyProviderOptions: KeyProviderOptions,
+  ) {
+    super();
+    this.currentKeyIndex = 0;
+    this.cryptoKeyRing = new Array(KEYRING_SIZE);
+    this.enabled = isEnabled;
+    this.keyProviderOptions = keyProviderOptions;
+    this.ratchetPromiseMap = new Map();
+    this.participantId = participantId;
+  }
+
+  setEnabled(enabled: boolean) {
+    this.enabled = enabled;
+  }
+
+  /**
+   * Ratchets the current key (or the one at keyIndex if provided) and
+   * returns the ratcheted material
+   * if `setKey` is true (default), it will also set the ratcheted key directly on the crypto key ring
+   * @param keyIndex
+   * @param setKey
+   */
+  ratchetKey(keyIndex?: number, setKey = true): Promise<CryptoKey> {
+    const currentKeyIndex = (keyIndex ??= this.getCurrentKeyIndex());
+
+    const existingPromise = this.ratchetPromiseMap.get(currentKeyIndex);
+    if (typeof existingPromise !== 'undefined') {
+      return existingPromise;
+    }
+    const ratchetPromise = new Promise<CryptoKey>(async (resolve, reject) => {
+      try {
+        const currentMaterial = this.getKeySet(currentKeyIndex).material;
+        const newMaterial = await importKey(
+          await ratchet(currentMaterial, this.keyProviderOptions.ratchetSalt),
+          currentMaterial.algorithm.name,
+          'derive',
+        );
+
+        if (setKey) {
+          this.setKeyFromMaterial(newMaterial, currentKeyIndex, true);
+        }
+        this.emit('keyRatcheted', newMaterial, keyIndex, this.participantId);
+        resolve(newMaterial);
+      } catch (e) {
+        reject(e);
+      } finally {
+        this.ratchetPromiseMap.delete(currentKeyIndex);
+      }
+    });
+    this.ratchetPromiseMap.set(currentKeyIndex, ratchetPromise);
+    return ratchetPromise;
+  }
+
+  /**
+   * takes in a key material with `deriveBits` and `deriveKey` set as key usages
+   * and derives encryption keys from the material and sets it on the key ring buffer
+   * together with the material
+   * also updates the currentKeyIndex
+   */
+  async setKeyFromMaterial(material: CryptoKey, keyIndex = 0, emitRatchetEvent = false) {
+    workerLogger.debug('setting new key');
+    if (keyIndex >= 0) {
+      this.currentKeyIndex = keyIndex % this.cryptoKeyRing.length;
+    }
+    const keySet = await deriveKeys(material, this.keyProviderOptions.ratchetSalt);
+    this.setKeySet(keySet, this.currentKeyIndex, emitRatchetEvent);
+  }
+
+  async setKeySet(keySet: KeySet, keyIndex: number, emitRatchetEvent = false) {
+    this.cryptoKeyRing[keyIndex % this.cryptoKeyRing.length] = keySet;
+    if (emitRatchetEvent) {
+      this.emit('keyRatcheted', keySet.material, keyIndex, this.participantId);
+    }
+  }
+
+  async setCurrentKeyIndex(index: number) {
+    this.currentKeyIndex = index % this.cryptoKeyRing.length;
+  }
+
+  isEnabled() {
+    return this.enabled;
+  }
+
+  getCurrentKeyIndex() {
+    return this.currentKeyIndex;
+  }
+
+  /**
+   * returns currently used KeySet or the one at `keyIndex` if provided
+   * @param keyIndex
+   * @returns
+   */
+  getKeySet(keyIndex?: number) {
+    return this.cryptoKeyRing[keyIndex ?? this.currentKeyIndex];
+  }
+}
diff --git a/src/e2ee/worker/e2ee.worker.ts b/src/e2ee/worker/e2ee.worker.ts
new file mode 100644
index 0000000000..7df993ac78
--- /dev/null
+++ b/src/e2ee/worker/e2ee.worker.ts
@@ -0,0 +1,217 @@
+import { workerLogger } from '../../logger';
+import { KEY_PROVIDER_DEFAULTS } from '../constants';
+import { CryptorErrorReason } from '../errors';
+import type {
+  E2EEWorkerMessage,
+  EnableMessage,
+  ErrorMessage,
+  KeyProviderOptions,
+  RatchetMessage,
+} from '../types';
+import { FrameCryptor } from './FrameCryptor';
+import { ParticipantKeyHandler } from './ParticipantKeyHandler';
+
+const participantCryptors: FrameCryptor[] = [];
+const participantKeys: Map<string, ParticipantKeyHandler> = new Map();
+
+let publishCryptors: FrameCryptor[] = [];
+let publisherKeys: ParticipantKeyHandler;
+
+let isEncryptionEnabled: boolean = false;
+
+let useSharedKey: boolean = false;
+
+let sharedKey: CryptoKey | undefined;
+
+let keyProviderOptions: KeyProviderOptions = KEY_PROVIDER_DEFAULTS;
+
+workerLogger.setDefaultLevel('info');
+
+onmessage = (ev) => {
+  const { kind, data }: E2EEWorkerMessage = ev.data;
+
+  switch (kind) {
+    case 'init':
+      workerLogger.info('worker initialized');
+      keyProviderOptions = data.keyProviderOptions;
+      useSharedKey = !!data.keyProviderOptions.sharedKey;
+      // acknowledge init successful
+      const enableMsg: EnableMessage = {
+        kind: 'enable',
+        data: { enabled: isEncryptionEnabled },
+      };
+      publisherKeys = new ParticipantKeyHandler(undefined, isEncryptionEnabled, keyProviderOptions);
+      publisherKeys.on('keyRatcheted', emitRatchetedKeys);
+      postMessage(enableMsg);
+      break;
+    case 'enable':
+      setEncryptionEnabled(data.enabled, data.participantId);
+      workerLogger.info('updated e2ee enabled status');
+      // acknowledge enable call successful
+      postMessage(ev.data);
+      break;
+    case 'decode':
+      let cryptor = getTrackCryptor(data.participantId, data.trackId);
+      cryptor.setupTransform(
+        kind,
+        data.readableStream,
+        data.writableStream,
+        data.trackId,
+        data.codec,
+      );
+      break;
+    case 'encode':
+      let pubCryptor = getPublisherCryptor(data.trackId);
+      pubCryptor.setupTransform(
+        kind,
+        data.readableStream,
+        data.writableStream,
+        data.trackId,
+        data.codec,
+      );
+      break;
+    case 'setKey':
+      if (useSharedKey) {
+        workerLogger.debug('set shared key');
+        setSharedKey(data.key, data.keyIndex);
+      } else if (data.participantId) {
+        getParticipantKeyHandler(data.participantId).setKeyFromMaterial(data.key, data.keyIndex);
+      } else {
+        workerLogger.error('no participant Id was provided and shared key usage is disabled');
+      }
+      break;
+    case 'removeTransform':
+      unsetCryptorParticipant(data.trackId);
+      break;
+    case 'updateCodec':
+      getTrackCryptor(data.participantId, data.trackId).setVideoCodec(data.codec);
+      break;
+    case 'setRTPMap':
+      publishCryptors.forEach((cr) => {
+        cr.setRtpMap(data.map);
+      });
+      break;
+    case 'ratchetRequest':
+      getParticipantKeyHandler(data.participantId).ratchetKey(data.keyIndex);
+
+    default:
+      break;
+  }
+};
+
+function getTrackCryptor(participantId: string, trackId: string) {
+  let cryptor = participantCryptors.find((c) => c.getTrackId() === trackId);
+  if (!cryptor) {
+    workerLogger.info('creating new cryptor for', { participantId });
+    if (!keyProviderOptions) {
+      throw Error('Missing keyProvider options');
+    }
+    cryptor = new FrameCryptor({
+      participantId,
+      keys: getParticipantKeyHandler(participantId),
+      keyProviderOptions,
+    });
+
+    setupCryptorErrorEvents(cryptor);
+    participantCryptors.push(cryptor);
+  } else if (participantId !== cryptor.getParticipantId()) {
+    // assign new participant id to track cryptor and pass in correct key handler
+    cryptor.setParticipant(participantId, getParticipantKeyHandler(participantId));
+  }
+  if (sharedKey) {
+  }
+  return cryptor;
+}
+
+function getParticipantKeyHandler(participantId?: string) {
+  if (!participantId) {
+    return publisherKeys!;
+  }
+  let keys = participantKeys.get(participantId);
+  if (!keys) {
+    keys = new ParticipantKeyHandler(participantId, true, keyProviderOptions);
+    if (sharedKey) {
+      keys.setKeyFromMaterial(sharedKey);
+    }
+    participantKeys.set(participantId, keys);
+  }
+  return keys;
+}
+
+function unsetCryptorParticipant(trackId: string) {
+  participantCryptors.find((c) => c.getTrackId() === trackId)?.unsetParticipant();
+}
+
+function getPublisherCryptor(trackId: string) {
+  let publishCryptor = publishCryptors.find((cryptor) => cryptor.getTrackId() === trackId);
+  if (!publishCryptor) {
+    if (!keyProviderOptions) {
+      throw new TypeError('Missing keyProvider options');
+    }
+    publishCryptor = new FrameCryptor({
+      keys: publisherKeys!,
+      participantId: 'publisher',
+      keyProviderOptions,
+    });
+    setupCryptorErrorEvents(publishCryptor);
+    publishCryptors.push(publishCryptor);
+  }
+  return publishCryptor;
+}
+
+function setEncryptionEnabled(enable: boolean, participantId?: string) {
+  if (!participantId) {
+    isEncryptionEnabled = enable;
+    publisherKeys.setEnabled(enable);
+  } else {
+    getParticipantKeyHandler(participantId).setEnabled(enable);
+  }
+}
+
+function setSharedKey(key: CryptoKey, index?: number) {
+  workerLogger.debug('setting shared key');
+  sharedKey = key;
+  publisherKeys?.setKeyFromMaterial(key, index);
+  for (const [, keyHandler] of participantKeys) {
+    keyHandler.setKeyFromMaterial(key, index);
+  }
+}
+
+function setupCryptorErrorEvents(cryptor: FrameCryptor) {
+  cryptor.on('cryptorError', (error) => {
+    const msg: ErrorMessage = {
+      kind: 'error',
+      data: { error: new Error(`${CryptorErrorReason[error.reason]}: ${error.message}`) },
+    };
+    postMessage(msg);
+  });
+}
+
+function emitRatchetedKeys(material: CryptoKey, keyIndex?: number) {
+  const msg: RatchetMessage = {
+    kind: `ratchetKey`,
+    data: {
+      // participantId,
+      keyIndex,
+      material,
+    },
+  };
+  postMessage(msg);
+}
+
+// Operations using RTCRtpScriptTransform.
+// @ts-ignore
+if (self.RTCTransformEvent) {
+  workerLogger.debug('setup transform event');
+  // @ts-ignore
+  self.onrtctransform = (event) => {
+    const transformer = event.transformer;
+    workerLogger.debug('transformer', transformer);
+    transformer.handled = true;
+    const { kind, participantId, trackId, codec } = transformer.options;
+    const cryptor =
+      kind === 'encode' ? getPublisherCryptor(trackId) : getTrackCryptor(participantId, trackId);
+    workerLogger.debug('transform', { codec });
+    cryptor.setupTransform(kind, transformer.readable, transformer.writable, trackId, codec);
+  };
+}
diff --git a/src/e2ee/worker/tsconfig.json b/src/e2ee/worker/tsconfig.json
new file mode 100644
index 0000000000..9d6482e450
--- /dev/null
+++ b/src/e2ee/worker/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2017", "ES2018.Promise", "WebWorker"]
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index 696ab3c56b..90f8f863bc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -41,6 +41,7 @@ export { facingModeFromDeviceLabel, facingModeFromLocalTrack } from './room/trac
 export * from './room/track/types';
 export type { DataPublishOptions, SimulationScenario } from './room/types';
 export * from './version';
+export * from './e2ee';
 export * from './room/track/processor/types';
 export {
   setLogLevel,
diff --git a/src/logger.ts b/src/logger.ts
index dc6c4bdbe4..7f24869475 100644
--- a/src/logger.ts
+++ b/src/logger.ts
@@ -17,6 +17,7 @@ type StructuredLogger = {
   info: (msg: string, context?: object) => void;
   warn: (msg: string, context?: object) => void;
   error: (msg: string, context?: object) => void;
+  setDefaultLevel: (level: log.LogLevelDesc) => void;
 };
 
 const livekitLogger = log.getLogger('livekit');
@@ -25,8 +26,13 @@ livekitLogger.setDefaultLevel(LogLevel.info);
 
 export default livekitLogger as StructuredLogger;
 
-export function setLogLevel(level: LogLevel | LogLevelString) {
-  livekitLogger.setLevel(level);
+export function setLogLevel(level: LogLevel | LogLevelString, loggerName?: 'livekit' | 'lk-e2ee') {
+  if (loggerName) {
+    log.getLogger(loggerName).setLevel(level);
+  }
+  for (const logger of Object.values(log.getLoggers())) {
+    logger.setLevel(level);
+  }
 }
 
 export type LogExtension = (level: LogLevel, msg: string, context?: object) => void;
@@ -54,3 +60,5 @@ export function setLogExtension(extension: LogExtension) {
   };
   livekitLogger.setLevel(livekitLogger.getLevel()); // Be sure to call setLevel method in order to apply plugin
 }
+
+export const workerLogger = log.getLogger('lk-e2ee') as StructuredLogger;
diff --git a/src/options.ts b/src/options.ts
index 93eaacd2a1..a60d712080 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -1,3 +1,4 @@
+import type { E2EEOptions } from './e2ee/types';
 import type { ReconnectPolicy } from './room/ReconnectPolicy';
 import type {
   AudioCaptureOptions,
@@ -83,6 +84,11 @@ export interface InternalRoomOptions {
    */
 
   expWebAudioMix: boolean | WebAudioSettings;
+
+  /**
+   * @experimental
+   */
+  e2ee?: E2EEOptions;
 }
 
 /**
diff --git a/src/proto/livekit_models.ts b/src/proto/livekit_models.ts
index d76ec39baa..12afa207a5 100644
--- a/src/proto/livekit_models.ts
+++ b/src/proto/livekit_models.ts
@@ -378,7 +378,7 @@ export function disconnectReasonToJSON(object: DisconnectReason): string {
 }
 
 export enum ReconnectReason {
-  RR_UNKOWN = 0,
+  RR_UNKNOWN = 0,
   RR_SIGNAL_DISCONNECTED = 1,
   RR_PUBLISHER_FAILED = 2,
   RR_SUBSCRIBER_FAILED = 3,
@@ -389,8 +389,8 @@ export enum ReconnectReason {
 export function reconnectReasonFromJSON(object: any): ReconnectReason {
   switch (object) {
     case 0:
-    case "RR_UNKOWN":
-      return ReconnectReason.RR_UNKOWN;
+    case "RR_UNKNOWN":
+      return ReconnectReason.RR_UNKNOWN;
     case 1:
     case "RR_SIGNAL_DISCONNECTED":
       return ReconnectReason.RR_SIGNAL_DISCONNECTED;
@@ -412,8 +412,8 @@ export function reconnectReasonFromJSON(object: any): ReconnectReason {
 
 export function reconnectReasonToJSON(object: ReconnectReason): string {
   switch (object) {
-    case ReconnectReason.RR_UNKOWN:
-      return "RR_UNKOWN";
+    case ReconnectReason.RR_UNKNOWN:
+      return "RR_UNKNOWN";
     case ReconnectReason.RR_SIGNAL_DISCONNECTED:
       return "RR_SIGNAL_DISCONNECTED";
     case ReconnectReason.RR_PUBLISHER_FAILED:
@@ -429,7 +429,7 @@ export function reconnectReasonToJSON(object: ReconnectReason): string {
 }
 
 export enum SubscriptionError {
-  SE_UNKOWN = 0,
+  SE_UNKNOWN = 0,
   SE_CODEC_UNSUPPORTED = 1,
   SE_TRACK_NOTFOUND = 2,
   UNRECOGNIZED = -1,
@@ -438,8 +438,8 @@ export enum SubscriptionError {
 export function subscriptionErrorFromJSON(object: any): SubscriptionError {
   switch (object) {
     case 0:
-    case "SE_UNKOWN":
-      return SubscriptionError.SE_UNKOWN;
+    case "SE_UNKNOWN":
+      return SubscriptionError.SE_UNKNOWN;
     case 1:
     case "SE_CODEC_UNSUPPORTED":
       return SubscriptionError.SE_CODEC_UNSUPPORTED;
@@ -455,8 +455,8 @@ export function subscriptionErrorFromJSON(object: any): SubscriptionError {
 
 export function subscriptionErrorToJSON(object: SubscriptionError): string {
   switch (object) {
-    case SubscriptionError.SE_UNKOWN:
-      return "SE_UNKOWN";
+    case SubscriptionError.SE_UNKNOWN:
+      return "SE_UNKNOWN";
     case SubscriptionError.SE_CODEC_UNSUPPORTED:
       return "SE_CODEC_UNSUPPORTED";
     case SubscriptionError.SE_TRACK_NOTFOUND:
@@ -3970,8 +3970,8 @@ function toTimestamp(date: Date): Timestamp {
 }
 
 function fromTimestamp(t: Timestamp): Date {
-  let millis = t.seconds * 1_000;
-  millis += t.nanos / 1_000_000;
+  let millis = (t.seconds || 0) * 1_000;
+  millis += (t.nanos || 0) / 1_000_000;
   return new Date(millis);
 }
 
diff --git a/src/room/PCTransport.ts b/src/room/PCTransport.ts
index 55e2e98d3f..d0c41c113c 100644
--- a/src/room/PCTransport.ts
+++ b/src/room/PCTransport.ts
@@ -25,6 +25,7 @@ const startBitrateForSVC = 0.7;
 export const PCEvents = {
   NegotiationStarted: 'negotiationStarted',
   NegotiationComplete: 'negotiationComplete',
+  RTPVideoPayloadTypes: 'rtpVideoPayloadTypes',
 } as const;
 
 /** @internal */
@@ -136,6 +137,14 @@ export default class PCTransport extends EventEmitter {
       this.createAndSendOffer();
     } else if (sd.type === 'answer') {
       this.emit(PCEvents.NegotiationComplete);
+      if (sd.sdp) {
+        const sdpParsed = parse(sd.sdp);
+        sdpParsed.media.forEach((media) => {
+          if (media.type === 'video') {
+            this.emit(PCEvents.RTPVideoPayloadTypes, media.rtp);
+          }
+        });
+      }
     }
   }
 
diff --git a/src/room/RTCEngine.ts b/src/room/RTCEngine.ts
index 0af6626795..30c5b02d97 100644
--- a/src/room/RTCEngine.ts
+++ b/src/room/RTCEngine.ts
@@ -1,4 +1,5 @@
 import EventEmitter from 'eventemitter3';
+import type { MediaAttributes } from 'sdp-transform';
 import { SignalClient } from '../api/SignalClient';
 import type { SignalOptions } from '../api/SignalClient';
 import log from '../logger';
@@ -43,6 +44,7 @@ import type { TrackPublishOptions, VideoCodec } from './track/options';
 import {
   Mutex,
   isCloud,
+  isVideoCodec,
   isWeb,
   sleep,
   supportsAddTrack,
@@ -313,6 +315,14 @@ export default class RTCEngine extends EventEmitter<EngineEventCallbacks> {
     this.participantSid = joinResponse.participant?.sid;
 
     const rtcConfig = this.makeRTCConfiguration(joinResponse);
+
+    if (this.signalOpts?.e2eeEnabled) {
+      log.debug('E2EE - setting up transports with insertable streams');
+      //  this makes sure that no data is sent before the transforms are ready
+      // @ts-ignore
+      rtcConfig.encodedInsertableStreams = true;
+    }
+
     const googConstraints = { optional: [{ googDscp: true }] };
     this.publisher = new PCTransport(rtcConfig, googConstraints);
     this.subscriber = new PCTransport(rtcConfig);
@@ -646,11 +656,13 @@ export default class RTCEngine extends EventEmitter<EngineEventCallbacks> {
     encodings?: RTCRtpEncodingParameters[],
   ) {
     if (supportsTransceiver()) {
-      return this.createTransceiverRTCRtpSender(track, opts, encodings);
+      const sender = await this.createTransceiverRTCRtpSender(track, opts, encodings);
+      return sender;
     }
     if (supportsAddTrack()) {
-      log.debug('using add-track fallback');
-      return this.createRTCRtpSender(track.mediaStreamTrack);
+      log.warn('using add-track fallback');
+      const sender = await this.createRTCRtpSender(track.mediaStreamTrack);
+      return sender;
     }
     throw new UnexpectedConnectionState('Required webRTC APIs not supported on this device');
   }
@@ -662,7 +674,6 @@ export default class RTCEngine extends EventEmitter<EngineEventCallbacks> {
     encodings?: RTCRtpEncodingParameters[],
   ) {
     // store RTCRtpSender
-    // @ts-ignore
     if (supportsTransceiver()) {
       return this.createSimulcastTransceiverSender(track, simulcastTrack, opts, encodings);
     }
@@ -683,7 +694,13 @@ export default class RTCEngine extends EventEmitter<EngineEventCallbacks> {
       throw new UnexpectedConnectionState('publisher is closed');
     }
 
-    const transceiverInit: RTCRtpTransceiverInit = { direction: 'sendonly' };
+    const streams: MediaStream[] = [];
+
+    if (track.mediaStream) {
+      streams.push(track.mediaStream);
+    }
+
+    const transceiverInit: RTCRtpTransceiverInit = { direction: 'sendonly', streams };
     if (encodings) {
       transceiverInit.sendEncodings = encodings;
     }
@@ -692,6 +709,7 @@ export default class RTCEngine extends EventEmitter<EngineEventCallbacks> {
       track.mediaStreamTrack,
       transceiverInit,
     );
+
     if (track.kind === Track.Kind.Video && opts.videoCodec) {
       this.setPreferredCodec(transceiver, track.kind, opts.videoCodec);
       track.codec = opts.videoCodec;
@@ -819,7 +837,7 @@ export default class RTCEngine extends EventEmitter<EngineEventCallbacks> {
       }
 
       if (recoverable) {
-        this.handleDisconnect('reconnect', ReconnectReason.RR_UNKOWN);
+        this.handleDisconnect('reconnect', ReconnectReason.RR_UNKNOWN);
       } else {
         log.info(
           `could not recover connection after ${this.reconnectAttempts} attempts, ${
@@ -1197,13 +1215,24 @@ export default class RTCEngine extends EventEmitter<EngineEventCallbacks> {
         });
       });
 
+      this.publisher.once(PCEvents.RTPVideoPayloadTypes, (rtpTypes: MediaAttributes['rtp']) => {
+        const rtpMap = new Map<number, VideoCodec>();
+        rtpTypes.forEach((rtp) => {
+          const codec = rtp.codec.toLowerCase();
+          if (isVideoCodec(codec)) {
+            rtpMap.set(rtp.payload, codec);
+          }
+        });
+        this.emit(EngineEvent.RTPVideoMapUpdate, rtpMap);
+      });
+
       this.publisher.negotiate((e) => {
         cleanup();
         reject(e);
         if (e instanceof NegotiationError) {
           this.fullReconnectOnNext = true;
         }
-        this.handleDisconnect('negotiation', ReconnectReason.RR_UNKOWN);
+        this.handleDisconnect('negotiation', ReconnectReason.RR_UNKNOWN);
       });
     });
   }
@@ -1318,5 +1347,8 @@ export type EngineEventCallbacks = {
   activeSpeakersUpdate: (speakers: Array<SpeakerInfo>) => void;
   dataPacketReceived: (userPacket: UserPacket, kind: DataPacket_Kind) => void;
   transportsCreated: (publisher: PCTransport, subscriber: PCTransport) => void;
+  /** @internal */
+  trackSenderAdded: (track: Track, sender: RTCRtpSender) => void;
+  rtpVideoMapUpdate: (rtpMap: Map<number, VideoCodec>) => void;
   dcBufferStatusChanged: (isLow: boolean, kind: DataPacket_Kind) => void;
 };
diff --git a/src/room/Room.ts b/src/room/Room.ts
index 75073b114c..6b8fa0eb4d 100644
--- a/src/room/Room.ts
+++ b/src/room/Room.ts
@@ -1,6 +1,8 @@
 import EventEmitter from 'eventemitter3';
 import 'webrtc-adapter';
 import { toProtoSessionDescription } from '../api/SignalClient';
+import { EncryptionEvent } from '../e2ee';
+import { E2EEManager } from '../e2ee/E2eeManager';
 import log from '../logger';
 import type {
   InternalRoomConnectOptions,
@@ -112,6 +114,9 @@ class Room extends EventEmitter<RoomEventCallbacks> {
   /** options of room */
   options: InternalRoomOptions;
 
+  /** reflects the sender encryption status of the local participant */
+  isE2EEEnabled: boolean = false;
+
   private roomInfo?: RoomModel;
 
   private identityToSid: Map<string, string>;
@@ -131,6 +136,8 @@ class Room extends EventEmitter<RoomEventCallbacks> {
 
   private disconnectLock: Mutex;
 
+  private e2eeManager: E2EEManager | undefined;
+
   private cachedParticipantSids: Array<string>;
 
   private connectionReconcileInterval?: ReturnType<typeof setInterval>;
@@ -180,6 +187,40 @@ class Room extends EventEmitter<RoomEventCallbacks> {
     if (this.options.audioOutput?.deviceId) {
       this.switchActiveDevice('audiooutput', unwrapConstraint(this.options.audioOutput.deviceId));
     }
+
+    if (this.options.e2ee) {
+      this.setupE2EE();
+    }
+  }
+
+  async setE2EEEnabled(enabled: boolean) {
+    if (this.e2eeManager) {
+      await Promise.all([
+        this.localParticipant.setE2EEEnabled(enabled),
+        this.e2eeManager.setParticipantCryptorEnabled(enabled),
+      ]);
+    } else {
+      throw Error('e2ee not configured, please set e2ee settings within the room options');
+    }
+  }
+
+  private setupE2EE() {
+    if (this.options.e2ee) {
+      this.e2eeManager = new E2EEManager(this.options.e2ee);
+      this.e2eeManager.on(
+        EncryptionEvent.ParticipantEncryptionStatusChanged,
+        (enabled, participant) => {
+          if (participant instanceof LocalParticipant) {
+            this.isE2EEEnabled = enabled;
+          }
+          this.emit(RoomEvent.ParticipantEncryptionStatusChanged, enabled, participant);
+        },
+      );
+      this.e2eeManager.on(EncryptionEvent.Error, (error) =>
+        this.emit(RoomEvent.EncryptionError, error),
+      );
+      this.e2eeManager?.setup(this);
+    }
   }
 
   /**
@@ -273,6 +314,9 @@ class Room extends EventEmitter<RoomEventCallbacks> {
     if (this.localParticipant) {
       this.localParticipant.setupEngine(this.engine);
     }
+    if (this.e2eeManager) {
+      this.e2eeManager.setupEngine(this.engine);
+    }
   }
 
   /**
@@ -392,6 +436,7 @@ class Room extends EventEmitter<RoomEventCallbacks> {
         adaptiveStream:
           typeof roomOptions.adaptiveStream === 'object' ? true : roomOptions.adaptiveStream,
         maxRetries: connectOptions.maxRetries,
+        e2eeEnabled: !!this.e2eeManager,
       },
       abortController.signal,
     );
@@ -1595,7 +1640,9 @@ class Room extends EventEmitter<RoomEventCallbacks> {
         }),
         new LocalVideoTrack(
           publishOptions.useRealTracks
-            ? (await navigator.mediaDevices.getUserMedia({ video: true })).getVideoTracks()[0]
+            ? (
+                await window.navigator.mediaDevices.getUserMedia({ video: true })
+              ).getVideoTracks()[0]
             : createDummyVideoStreamTrack(
                 160 * participantOptions.aspectRatios[0] ?? 1,
                 160,
@@ -1758,6 +1805,8 @@ export type RoomEventCallbacks = {
   audioPlaybackChanged: (playing: boolean) => void;
   signalConnected: () => void;
   recordingStatusChanged: (recording: boolean) => void;
+  participantEncryptionStatusChanged: (encrypted: boolean, participant?: Participant) => void;
+  encryptionError: (error: Error) => void;
   dcBufferStatusChanged: (isLow: boolean, kind: DataPacket_Kind) => void;
   activeDeviceChanged: (kind: MediaDeviceKind, deviceId: string) => void;
 };
diff --git a/src/room/defaults.ts b/src/room/defaults.ts
index 6fb893f54e..c8b7412653 100644
--- a/src/room/defaults.ts
+++ b/src/room/defaults.ts
@@ -20,7 +20,7 @@ export const publishDefaults: TrackPublishDefaults = {
   screenShareEncoding: ScreenSharePresets.h1080fps15.encoding,
   stopMicTrackOnMute: false,
   videoCodec: 'vp8',
-  backupCodec: { codec: 'vp8', encoding: VideoPresets.h540.encoding },
+  backupCodec: false,
 } as const;
 
 export const audioDefaults: AudioCaptureOptions = {
diff --git a/src/room/events.ts b/src/room/events.ts
index 6125346304..b6eb2f986f 100644
--- a/src/room/events.ts
+++ b/src/room/events.ts
@@ -273,6 +273,9 @@ export enum RoomEvent {
    */
   RecordingStatusChanged = 'recordingStatusChanged',
 
+  ParticipantEncryptionStatusChanged = 'participantEncryptionStatusChanged',
+
+  EncryptionError = 'encryptionError',
   /**
    * Emits whenever the current buffer status of a data channel changes
    * args: (isLow: boolean, kind: [[DataPacket_Kind]])
@@ -443,6 +446,9 @@ export enum ParticipantEvent {
    * args: (prevPermissions: [[ParticipantPermission]])
    */
   ParticipantPermissionsChanged = 'participantPermissionsChanged',
+
+  /** @internal */
+  PCTrackAdded = 'pcTrackAdded',
 }
 
 /** @internal */
@@ -460,6 +466,7 @@ export enum EngineEvent {
   MediaTrackAdded = 'mediaTrackAdded',
   ActiveSpeakersUpdate = 'activeSpeakersUpdate',
   DataPacketReceived = 'dataPacketReceived',
+  RTPVideoMapUpdate = 'rtpVideoMapUpdate',
   DCBufferStatusChanged = 'dcBufferStatusChanged',
 }
 
diff --git a/src/room/participant/LocalParticipant.ts b/src/room/participant/LocalParticipant.ts
index 5515ffb433..ed75d6757e 100644
--- a/src/room/participant/LocalParticipant.ts
+++ b/src/room/participant/LocalParticipant.ts
@@ -1,6 +1,12 @@
 import log from '../../logger';
 import type { InternalRoomOptions } from '../../options';
-import { DataPacket, DataPacket_Kind, ParticipantInfo } from '../../proto/livekit_models';
+import {
+  DataPacket,
+  DataPacket_Kind,
+  Encryption_Type,
+  ParticipantInfo,
+  ParticipantPermission,
+} from '../../proto/livekit_models';
 import {
   AddTrackRequest,
   DataChannelInfo,
@@ -68,6 +74,8 @@ export default class LocalParticipant extends Participant {
   // keep a pointer to room options
   private roomOptions: InternalRoomOptions;
 
+  private encryptionType: Encryption_Type = Encryption_Type.NONE;
+
   private reconnectFuture?: Future<void>;
 
   /** @internal */
@@ -214,6 +222,22 @@ export default class LocalParticipant extends Participant {
     return this.setTrackEnabled(Track.Source.ScreenShare, enabled, options, publishOptions);
   }
 
+  /** @internal */
+  setPermissions(permissions: ParticipantPermission): boolean {
+    const prevPermissions = this.permissions;
+    const changed = super.setPermissions(permissions);
+    if (changed && prevPermissions) {
+      this.emit(ParticipantEvent.ParticipantPermissionsChanged, prevPermissions);
+    }
+    return changed;
+  }
+
+  /** @internal */
+  async setE2EEEnabled(enabled: boolean) {
+    this.encryptionType = enabled ? Encryption_Type.GCM : Encryption_Type.NONE;
+    await this.republishAllTracks(undefined, false);
+  }
+
   /**
    * Enable or disable publishing for a track by source. This serves as a simple
    * way to manage the common tracks (camera, mic, or screen share).
@@ -552,6 +576,12 @@ export default class LocalParticipant extends Participant {
       ...options,
     };
 
+    // disable simulcast if e2ee is set on safari
+    if (isSafari() && this.roomOptions.e2ee) {
+      log.info(`End-to-end encryption is set up, simulcast publishing will be disabled on Safari`);
+      opts.simulcast = false;
+    }
+
     if (opts.source) {
       track.source = opts.source;
     }
@@ -624,8 +654,9 @@ export default class LocalParticipant extends Participant {
       muted: track.isMuted,
       source: Track.sourceToProto(track.source),
       disableDtx: !(opts.dtx ?? true),
+      encryption: this.encryptionType,
       stereo: isStereo,
-      disableRed: !(opts.red ?? true),
+      // disableRed: !(opts.red ?? true),
     });
 
     // compute encodings and layers for video
@@ -980,7 +1011,7 @@ export default class LocalParticipant extends Participant {
     ) as LocalTrackPublication[];
   }
 
-  async republishAllTracks(options?: TrackPublishOptions) {
+  async republishAllTracks(options?: TrackPublishOptions, restartTracks: boolean = true) {
     const localPubs: LocalTrackPublication[] = [];
     this.tracks.forEach((pub) => {
       if (pub.track) {
@@ -995,6 +1026,19 @@ export default class LocalParticipant extends Participant {
       localPubs.map(async (pub) => {
         const track = pub.track!;
         await this.unpublishTrack(track, false);
+        if (
+          restartTracks &&
+          !track.isMuted &&
+          (track instanceof LocalAudioTrack || track instanceof LocalVideoTrack) &&
+          !track.isUserProvided
+        ) {
+          // generally we need to restart the track before publishing, often a full reconnect
+          // is necessary because computer had gone to sleep.
+          log.debug('restarting existing track', {
+            track: pub.trackSid,
+          });
+          await track.restartTrack();
+        }
         await this.publishTrack(track, pub.options);
       }),
     );
diff --git a/src/room/participant/Participant.ts b/src/room/participant/Participant.ts
index 37f3621e6a..81ed6b676a 100644
--- a/src/room/participant/Participant.ts
+++ b/src/room/participant/Participant.ts
@@ -68,6 +68,10 @@ export default class Participant extends EventEmitter<ParticipantEventCallbacks>
 
   private _connectionQuality: ConnectionQuality = ConnectionQuality.Unknown;
 
+  get isEncrypted() {
+    return this.tracks.size > 0 && Array.from(this.tracks.values()).every((tr) => tr.isEncrypted);
+  }
+
   /** @internal */
   constructor(sid: string, identity: string, name?: string, metadata?: string) {
     super();
diff --git a/src/room/track/TrackPublication.ts b/src/room/track/TrackPublication.ts
index 1bb27a1b7b..29931b1fcd 100644
--- a/src/room/track/TrackPublication.ts
+++ b/src/room/track/TrackPublication.ts
@@ -1,5 +1,6 @@
 import EventEmitter from 'eventemitter3';
 import log from '../../logger';
+import { Encryption_Type } from '../../proto/livekit_models';
 import type { SubscriptionError, TrackInfo } from '../../proto/livekit_models';
 import type { UpdateSubscription, UpdateTrackSettings } from '../../proto/livekit_rtc';
 import { TrackEvent } from '../events';
@@ -35,6 +36,8 @@ export class TrackPublication extends EventEmitter<PublicationEventCallbacks> {
 
   protected metadataMuted: boolean = false;
 
+  protected encryption: Encryption_Type = Encryption_Type.NONE;
+
   constructor(kind: Track.Kind, id: string, name: string) {
     super();
     this.kind = kind;
@@ -71,6 +74,10 @@ export class TrackPublication extends EventEmitter<PublicationEventCallbacks> {
     return this.track !== undefined;
   }
 
+  get isEncrypted(): boolean {
+    return this.encryption !== Encryption_Type.NONE;
+  }
+
   /**
    * an [AudioTrack] if this publication holds an audio track
    */
@@ -110,8 +117,9 @@ export class TrackPublication extends EventEmitter<PublicationEventCallbacks> {
       };
       this.simulcasted = info.simulcast;
     }
+    this.encryption = info.encryption;
     this.trackInfo = info;
-    log.trace('update publication info', { info });
+    log.debug('update publication info', { info });
   }
 }
 
diff --git a/src/room/track/options.ts b/src/room/track/options.ts
index e9860e4a92..1ea191a51d 100644
--- a/src/room/track/options.ts
+++ b/src/room/track/options.ts
@@ -272,10 +272,11 @@ export interface AudioPreset {
   priority?: RTCPriorityType;
 }
 
-const codecs = ['vp8', 'h264', 'vp9', 'av1'] as const;
 const backupCodecs = ['vp8', 'h264'] as const;
 
-export type VideoCodec = (typeof codecs)[number];
+export const videoCodecs = ['vp8', 'h264', 'vp9', 'av1'] as const;
+
+export type VideoCodec = (typeof videoCodecs)[number];
 
 export type BackupVideoCodec = (typeof backupCodecs)[number];
 
diff --git a/src/room/utils.ts b/src/room/utils.ts
index ca58e22d38..b1bcbdf7c4 100644
--- a/src/room/utils.ts
+++ b/src/room/utils.ts
@@ -4,6 +4,7 @@ import type { DetectableBrowser } from '../utils/browserParser';
 import { protocolVersion, version } from '../version';
 import type LocalAudioTrack from './track/LocalAudioTrack';
 import type RemoteAudioTrack from './track/RemoteAudioTrack';
+import { VideoCodec, videoCodecs } from './track/options';
 import { getNewAudioContext } from './track/utils';
 import type { LiveKitReactNativeInfo } from './types';
 
@@ -456,6 +457,10 @@ export class Mutex {
   }
 }
 
+export function isVideoCodec(maybeCodec: string): maybeCodec is VideoCodec {
+  return videoCodecs.includes(maybeCodec as VideoCodec);
+}
+
 export function unwrapConstraint(constraint: ConstrainDOMString): string {
   if (typeof constraint === 'string') {
     return constraint;
diff --git a/src/room/worker.d.ts b/src/room/worker.d.ts
new file mode 100644
index 0000000000..ead3d9e1f4
--- /dev/null
+++ b/src/room/worker.d.ts
@@ -0,0 +1,4 @@
+declare module 'web-worker:*' {
+  const WorkerFactory: new () => Worker;
+  export default WorkerFactory;
+}
diff --git a/src/test/MockMediaStreamTrack.ts b/src/test/MockMediaStreamTrack.ts
index e0934001bb..593143d3ec 100644
--- a/src/test/MockMediaStreamTrack.ts
+++ b/src/test/MockMediaStreamTrack.ts
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+// @ts-ignore
 export default class MockMediaStreamTrack implements MediaStreamTrack {
   contentHint: string = '';
 
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
index f8d7764481..6d3e673cc7 100644
--- a/tsconfig.eslint.json
+++ b/tsconfig.eslint.json
@@ -4,10 +4,11 @@
     "src/**/*.ts",
     "src/**/*.js",
     "example/**/*.ts",
-    ".eslintrc.js",
+    ".eslintrc.cjs",
+    ".eslintrc.dist.cjs",
     "jest.config.js",
     "rollup.config.js",
-    "rollup.config.dev.js"
+    "rollup.config.worker.js"
   ],
   "exclude": ["dist/**"]
 }
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000000..5f7ce4c7fd
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,51 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import { babel } from '@rollup/plugin-babel';
+import replace from 'rollup-plugin-re';
+import dns from 'dns';
+
+dns.setDefaultResultOrder('verbatim');
+
+export default defineConfig({
+  server: {
+    port: 8080,
+    open: true,
+  },
+  build: {
+    minify: 'esbuild',
+    target: 'es2019',
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'Livekit Client SDK JS',
+      // the proper extensions will be added
+      fileName: 'livekit-client',
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: [],
+      output: {},
+      plugins: [
+        babel({
+          babelHelpers: 'bundled',
+          plugins: ['@babel/plugin-proposal-object-rest-spread'],
+          presets: ['@babel/preset-env'],
+          extensions: ['.js', '.ts', '.mjs'],
+        }),
+        replace({
+          patterns: [
+            {
+              // protobuf.js uses `eval` to determine whether a module is present or not
+              // in most modern browsers this will fail anyways due to CSP, and it's safer to just replace it with `undefined`
+              // until this PR is merged: https://github.com/protobufjs/protobuf.js/pull/1548
+              // related discussion: https://github.com/protobufjs/protobuf.js/issues/593
+              test: /eval.*\(moduleName\);/g,
+              replace: 'undefined;',
+            },
+          ],
+        }),
+      ],
+    },
+  },
+});