feat(client): add E2EE support via WebRTC Encoded Transforms

.github/workflows/deploy-react-sample-apps.yml

@@ -58,6 +58,8 @@ jobs:
             project-id: prj_uNJTw7DefSAntAoWCXwJaHc1khoA
           - name: audio-rooms
             project-id: prj_0WnHcvVkXpM4PRc2ymVmrAHFILoT
+          - name: e2ee-demo - https://stream-e2ee-demo.vercel.app
+            project-id: prj_fdQ1cP6fTIyXkjmoKfLhNnzANF4M
           - name: react-dogfood - https://pronto.getstream.io
             project-id: prj_4TTdjeVHEDhWWiFRfjIr1QFb5ell
           - name: react-dogfood-staging - https://pronto-staging.getstream.io

packages/client/index.ts

@@ -23,6 +23,8 @@ export * from './src/helpers/DynascaleManager';
 export * from './src/helpers/ViewportTracker';
 export * from './src/helpers/sound-detector';
 export * from './src/helpers/participantUtils';
+export * from './src/rtc/e2ee/E2EEManager';
+export * from './src/rtc/e2ee/EncryptionManager';
 export * as Browsers from './src/helpers/browsers';
 
 export * from './src/logger';

packages/client/plugins/rollup-plugin-inline-worker.mts

@@ -0,0 +1,68 @@
+import { rollup, type Plugin } from 'rollup';
+import typescript from '@rollup/plugin-typescript';
+import { format, resolveConfig } from 'prettier';
+import { dirname, resolve } from 'path';
+
+interface InlineWorkerOptions {
+  /** File names (not paths) that trigger the plugin, e.g. `['worker.ts']`. */
+  include: string[];
+}
+
+/**
+ * Rollup plugin that bundles worker TypeScript files into inline functions.
+ *
+ * Only files whose path ends with one of the provided `include` patterns
+ * are processed — all other modules are skipped with zero overhead.
+ *
+ * For each matched file, the plugin:
+ * 1. Finds the corresponding `-impl.ts` entry (e.g. `worker.ts` → `worker/worker-impl.ts`)
+ * 2. Bundles it with a nested Rollup + TypeScript build
+ * 3. Wraps the result in an exported function and formats with prettier
+ *
+ * The consumer creates a Worker from the function via:
+ *   `new Worker(\`data:text/javascript,(\${fn.toString()})()\`)`
+ * or via a Blob URL.
+ */
+export default function inlineWorker({ include }: InlineWorkerOptions): Plugin {
+  const fileNames = new Set(include);
+
+  return {
+    name: 'inline-worker',
+
+    async load(id: string) {
+      const fileName = id.split('/').pop();
+      if (!fileNames.has(fileName!)) return null;
+
+      // e2ee-worker.ts → e2ee-worker/e2ee-worker-impl.ts
+      const dir = dirname(id);
+      const name = fileName!.replace(/\.ts$/, '');
+      const implPath = resolve(dir, name, `${name}-impl.ts`);
+
+      const bundle = await rollup({
+        input: implPath,
+        plugins: [
+          typescript({
+            tsconfig: resolve(dir, name, 'tsconfig.json'),
+            exclude: ['**/node_modules/**', '**/__tests__/**'],
+          }),
+        ],
+      });
+
+      const { output } = await bundle.generate({
+        format: 'es',
+        indent: false,
+        sourcemap: false,
+      });
+      await bundle.close();
+
+      // Wrap bundled code in an exported function, then format with prettier.
+      return await format(
+        `export function e2eeWorker() { ${output[0].code} }`,
+        {
+          parser: 'babel',
+          ...(await resolveConfig(implPath)),
+        },
+      );
+    },
+  };
+}

packages/client/rollup.config.mjs

@@ -1,5 +1,6 @@
 import typescript from '@rollup/plugin-typescript';
 import replace from '@rollup/plugin-replace';
+import inlineWorker from './plugins/rollup-plugin-inline-worker.mts';
 
 import pkg from './package.json' with { type: 'json' };
 
@@ -30,12 +31,15 @@ const external = [
 const browserConfig = {
   input: 'index.ts',
   output: {
-    file: 'dist/index.browser.es.js',
+    dir: 'dist',
     format: 'esm',
     sourcemap: true,
+    entryFileNames: 'index.browser.es.js',
+    chunkFileNames: '[name].browser.es.js',
   },
   external: external.filter((dep) => !browserIgnoredModules.includes(dep)),
   plugins: [
+    inlineWorker({ include: ['e2ee-worker.ts'] }),
     replace({
       preventAssignment: true,
       'process.env.PKG_VERSION': JSON.stringify(pkg.version),
@@ -55,6 +59,7 @@ const createNodeConfig = (outputFile, format) => ({
     file: outputFile,
     format: format,
     sourcemap: true,
+    inlineDynamicImports: true,
   },
   external,
   plugins: [

packages/client/src/Call.ts

@@ -15,6 +15,7 @@ import {
   TrackPublishOptions,
   trackTypeToParticipantStreamKey,
 } from './rtc';
+import type { E2EEManager } from './rtc/e2ee/E2EEManager';
 import {
   registerEventHandlers,
   registerRingingCallEventHandlers,
@@ -30,7 +31,7 @@ import {
   getCurrentValue,
 } from './store/rxUtils';
 import { ScopedLogger, videoLoggerSystem } from './logger';
-import type {
+import {
   AcceptCallResponse,
   BlockUserRequest,
   BlockUserResponse,
@@ -76,8 +77,8 @@ import type {
   RingCallResponse,
   SendCallEventRequest,
   SendCallEventResponse,
-  SendReactionRequest,
-  SendReactionResponse,
+  SendVideoReactionRequest,
+  SendVideoReactionResponse,
   StartClosedCaptionsRequest,
   StartClosedCaptionsResponse,
   StartFrameRecordingRequest,
@@ -109,6 +110,8 @@ import type {
   UpdateCallRequest,
   UpdateCallResponse,
   UpdateUserPermissionsRequest,
+  UpdateUserPermissionsRequestGrantPermissionsEnum,
+  UpdateUserPermissionsRequestRevokePermissionsEnum,
   UpdateUserPermissionsResponse,
 } from './gen/coordinator';
 import { OwnCapability } from './gen/coordinator';
@@ -266,6 +269,7 @@ export class Call {
 
   subscriber?: Subscriber;
   publisher?: Publisher;
+  e2eeManager?: E2EEManager;
 
   /**
    * Flag telling whether this call is a "ringing" call.
@@ -1542,6 +1546,7 @@ export class Call {
     this.sfuStatsReporter = undefined;
     if (closePreviousInstances && this.subscriber) {
       await this.subscriber.dispose();
+      this.state.removeAllOrphanedTracks();
     }
     const basePeerConnectionOptions: BasePeerConnectionOpts = {
       sfuClient,
@@ -1552,6 +1557,7 @@ export class Call {
       enableTracing,
       statsTimestampDriftThresholdMs: reportingIntervalMs / 2,
       clientPublishOptions: this.clientPublishOptions,
+      e2ee: this.e2eeManager,
       onReconnectionNeeded: (kind, reason, peerType) => {
         this.reconnect(kind, reason).catch((err) => {
           const message = `[Reconnect] Error reconnecting, after a ${PeerType[peerType]} error: ${reason}`;
@@ -1628,12 +1634,12 @@ export class Call {
    * Retrieves credentials for joining the call.
    *
    * @internal
-   *
    * @param data the join call data.
    */
   doJoinRequest = async (data?: JoinCallData): Promise<JoinCallResponse> => {
     const location = await this.streamClient.getLocationHint();
-    const request: JoinCallRequest = { ...data, location };
+    const e2ee = !!this.e2eeManager;
+    const request: JoinCallRequest = { ...data, location, e2ee };
     const joinResponse = await this.streamClient.post<
       JoinCallResponse,
       JoinCallRequest
@@ -2355,6 +2361,31 @@ export class Call {
     this.clientPublishOptions = { ...this.clientPublishOptions, ...options };
   };
 
+  /**
+   * Set the E2EE (end-to-end encryption) manager for this call.
+   *
+   * Must be called before {@link join} so the RTCPeerConnection can be
+   * configured for E2EE.
+   *
+   * The manager is kept across {@link leave} so a rejoin of this same instance
+   * stays encrypted: do not dispose it while this call may be joined again.
+   * A disposed manager throws from `encrypt`/`decrypt` rather than silently
+   * publishing nothing, so re-attach a fresh one instead of reusing it.
+   *
+   * @param e2ee - Any `E2EEManager`. Use `EncryptionManager.create()` for the
+   *         built-in AES-GCM scheme, or pass your own implementation.
+   * @throws if called after the peer connections have been built (i.e. after
+   *         `join`): those PCs were already configured without an encryptor, so
+   *         adopting a manager now would silently publish/receive cleartext for
+   *         the live session.
+   */
+  setE2EEManager = (e2ee: E2EEManager) => {
+    if (this.publisher || this.subscriber) {
+      throw new Error('setE2EEManager must be called before join()');
+    }
+    this.e2eeManager = e2ee;
+  };
+
   /**
    * Notifies the SFU that a noise cancellation process has started.
    *
@@ -2453,9 +2484,9 @@ export class Call {
    * @param reaction the reaction to send.
    */
   sendReaction = async (
-    reaction: SendReactionRequest,
-  ): Promise<SendReactionResponse> => {
-    return this.streamClient.post<SendReactionResponse, SendReactionRequest>(
+    reaction: SendVideoReactionRequest,
+  ): Promise<SendVideoReactionResponse> => {
+    return this.streamClient.post(
       `${this.streamClientBasePath}/reaction`,
       reaction,
     );
@@ -2673,7 +2704,7 @@ export class Call {
   ): Promise<RequestPermissionResponse> => {
     const { permissions } = data;
     const canRequestPermissions = permissions.every((permission) =>
-      this.permissionsContext.canRequest(permission as OwnCapability),
+      this.permissionsContext.canRequest(permission),
     );
     if (!canRequestPermissions) {
       throw new Error(
@@ -2698,10 +2729,14 @@ export class Call {
    * @param userId the id of the user to grant permissions to.
    * @param permissions the permissions to grant.
    */
-  grantPermissions = async (userId: string, permissions: string[]) => {
+  grantPermissions = async (
+    userId: string,
+    permissions: string[] | UpdateUserPermissionsRequestGrantPermissionsEnum[],
+  ) => {
     return this.updateUserPermissions({
       user_id: userId,
-      grant_permissions: permissions,
+      grant_permissions:
+        permissions as UpdateUserPermissionsRequestGrantPermissionsEnum[],
     });
   };
 
@@ -2717,10 +2752,14 @@ export class Call {
    * @param userId the id of the user to revoke permissions from.
    * @param permissions the permissions to revoke.
    */
-  revokePermissions = async (userId: string, permissions: string[]) => {
+  revokePermissions = async (
+    userId: string,
+    permissions: string[] | UpdateUserPermissionsRequestRevokePermissionsEnum[],
+  ) => {
     return this.updateUserPermissions({
       user_id: userId,
-      revoke_permissions: permissions,
+      revoke_permissions:
+        permissions as UpdateUserPermissionsRequestRevokePermissionsEnum[],
     });
   };
 

packages/client/src/__tests__/Call.test.ts

@@ -17,6 +17,7 @@ import { Dispatcher } from '../rtc';
 import { Call } from '../Call';
 import { StreamVideoParticipant } from '../types';
 import { TrackType } from '../gen/video/sfu/models/models';
+import type { E2EEManager } from '../rtc/e2ee/E2EEManager';
 
 const apiKey = process.env.STREAM_API_KEY!;
 const secret = process.env.STREAM_SECRET!;
@@ -300,6 +301,20 @@ describe('muting logic', () => {
   });
 });
 
+describe('setE2EEManager', () => {
+  it('throws when called after the peer connections exist', () => {
+    const call = client.call('default', generateUUIDv4());
+    const e2ee = fromPartial<E2EEManager>({});
+    // Before join there are no peer connections, so it is accepted.
+    expect(() => call.setE2EEManager(e2ee)).not.toThrow();
+    // Once a subscriber/publisher exists (i.e. after join) the PCs were already
+    // built without the manager; setting it now would leave the live session
+    // half-encrypted, so it must be rejected (finding 12).
+    call['subscriber'] = fromPartial({});
+    expect(() => call.setE2EEManager(e2ee)).toThrow(/before join/);
+  });
+});
+
 describe('client event reporting', () => {
   afterEach(() => {
     vi.restoreAllMocks();

packages/client/src/coordinator/connection/connection.ts

@@ -9,10 +9,11 @@ import {
 } from './utils';
 import type { StreamVideoEvent, UR, WSConnectionError } from './types';
 import type { LogLevel } from '@stream-io/logger';
-import type {
+import {
   ConnectedEvent,
   ConnectionErrorEvent,
   WSAuthMessage,
+  WSAuthMessageProductsEnum,
 } from '../../gen/coordinator';
 import { makeSafePromise, type SafePromise } from '../../helpers/promise';
 import { getTimers } from '../../timers';
@@ -529,15 +530,17 @@ export class StableWSConnection {
       return;
     }
 
-    const authMessage = JSON.stringify({
+    const wsAuthMessage: WSAuthMessage = {
       token,
+      products: [WSAuthMessageProductsEnum.VIDEO],
       user_details: {
         id: user.id,
         name: user.name,
         image: user.image,
         custom: user.custom,
       },
-    } as WSAuthMessage);
+    };
+    const authMessage = JSON.stringify(wsAuthMessage);
 
     this._log(`onopen() - Sending auth message ${authMessage}`, {}, 'trace');