feat: e2ee implementation

ci/ios/Podfile

@@ -5,7 +5,7 @@ require Pod::Executable.execute_command('node', ['-p',
     {paths: [process.argv[1]]},
   )', __dir__]).strip
 
-platform :ios, min_ios_version_supported
+platform :ios, 14.0
 prepare_react_native_project!
 
 linkage = ENV['USE_FRAMEWORKS']

ci/ios/Podfile.lock

@@ -7,12 +7,12 @@ PODS:
   - hermes-engine (0.74.2):
     - hermes-engine/Pre-built (= 0.74.2)
   - hermes-engine/Pre-built (0.74.2)
-  - livekit-react-native (2.4.2):
+  - livekit-react-native (2.4.3):
     - livekit-react-native-webrtc
     - React-Core
-  - livekit-react-native-webrtc (125.0.5):
+  - livekit-react-native-webrtc (125.0.6):
     - React-Core
-    - WebRTC-SDK (~> 125.6422.05)
+    - WebRTC-SDK (~> 125.6422.06)
   - RCT-Folly (2024.01.01.00):
     - boost
     - DoubleConversion
@@ -1171,7 +1171,7 @@ PODS:
     - React-perflogger (= 0.74.2)
     - React-utils (= 0.74.2)
   - SocketRocket (0.7.0)
-  - WebRTC-SDK (125.6422.05)
+  - WebRTC-SDK (125.6422.06)
   - Yoga (0.0.0)
 
 DEPENDENCIES:
@@ -1361,8 +1361,8 @@ SPEC CHECKSUMS:
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
   glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
   hermes-engine: 01d3e052018c2a13937aca1860fbedbccd4a41b7
-  livekit-react-native: e9b507c3df7d55d9c306a9d3ac7455d02ce3596f
-  livekit-react-native-webrtc: 081ba1baabf80183f35ac840fc3a787e99b45e45
+  livekit-react-native: b93bfc9038869dcbd5cee53b419c956c28e44949
+  livekit-react-native-webrtc: 7f040d0557b0e0903d6cfe4977ddf608462988c6
   RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
   RCTDeprecation: b03c35057846b685b3ccadc9bfe43e349989cdb2
   RCTRequired: 194626909cfa8d39ca6663138c417bc6c431648c
@@ -1411,9 +1411,9 @@ SPEC CHECKSUMS:
   React-utils: 4476b7fcbbd95cfd002f3e778616155241d86e31
   ReactCommon: ecad995f26e0d1e24061f60f4e5d74782f003f12
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  WebRTC-SDK: 1990a1a595bd0b59c17485ce13ff17f575732c12
+  WebRTC-SDK: 79942c006ea64f6fb48d7da8a4786dfc820bc1db
   Yoga: ae3c32c514802d30f687a04a6a35b348506d411f
 
-PODFILE CHECKSUM: 7927865c347f4d00f3934d2c6585d16bb3e659e6
+PODFILE CHECKSUM: 7e787510e5e3fbe259a5a7507ea2e7e1b1ff65ef
 
 COCOAPODS: 1.13.0

ci/yarn.lock

@@ -2159,15 +2159,15 @@ __metadata:
   linkType: hard
 
 "@livekit/react-native-webrtc@npm:^125.0.5":
-  version: 125.0.5
-  resolution: "@livekit/react-native-webrtc@npm:125.0.5"
+  version: 125.0.6
+  resolution: "@livekit/react-native-webrtc@npm:125.0.6"
   dependencies:
     base64-js: 1.5.1
     debug: 4.3.4
     event-target-shim: 6.0.2
   peerDependencies:
     react-native: ">=0.60.0"
-  checksum: 3c492575156b5d243b03fdb6ed05881c9daaaddad05083f0bfa6d604cc0962f434a46d5fdbd592333caebcdab6d10d8bc3657aa227b6d726c6c853aa49e793be
+  checksum: 7c715568b4899bae718b39bd9bf1d72a346afdab008f6fd47b903f6bf96eabf9a7457d0de6835e4e76750754c7fc6f4a460fa4176733d8ba189e7cd2dc1f5e36
   languageName: node
   linkType: hard
 

example/index.tsx

@@ -1,8 +1,8 @@
 import { AppRegistry } from 'react-native';
 import App from './src/App';
 import { name as appName } from './app.json';
-import { registerGlobals } from '@livekit/react-native';
-import { LogLevel, setLogLevel } from 'livekit-client';
+import { registerGlobals, setLogLevel } from '@livekit/react-native';
+import { LogLevel } from 'livekit-client';
 import { setupErrorLogHandler } from './src/utils/ErrorLogHandler';
 import { setupCallService } from './src/callservice/CallService';
 

example/ios/Podfile

@@ -5,7 +5,7 @@ require Pod::Executable.execute_command('node', ['-p',
     {paths: [process.argv[1]]},
   )', __dir__]).strip
 
-platform :ios, min_ios_version_supported
+platform :ios, 14.0
 prepare_react_native_project!
 
 linkage = ENV['USE_FRAMEWORKS']

example/ios/Podfile.lock

@@ -10,9 +10,9 @@ PODS:
   - livekit-react-native (2.4.3):
     - livekit-react-native-webrtc
     - React-Core
-  - livekit-react-native-webrtc (125.0.5):
+  - livekit-react-native-webrtc (125.0.6):
     - React-Core
-    - WebRTC-SDK (~> 125.6422.05)
+    - WebRTC-SDK (~> 125.6422.06)
   - RCT-Folly (2024.01.01.00):
     - boost
     - DoubleConversion
@@ -1201,7 +1201,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - SocketRocket (0.7.0)
-  - WebRTC-SDK (125.6422.05)
+  - WebRTC-SDK (125.6422.06)
   - Yoga (0.0.0)
 
 DEPENDENCIES:
@@ -1407,7 +1407,7 @@ SPEC CHECKSUMS:
   glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
   hermes-engine: 01d3e052018c2a13937aca1860fbedbccd4a41b7
   livekit-react-native: b93bfc9038869dcbd5cee53b419c956c28e44949
-  livekit-react-native-webrtc: 081ba1baabf80183f35ac840fc3a787e99b45e45
+  livekit-react-native-webrtc: 7f040d0557b0e0903d6cfe4977ddf608462988c6
   RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
   RCTDeprecation: b03c35057846b685b3ccadc9bfe43e349989cdb2
   RCTRequired: 194626909cfa8d39ca6663138c417bc6c431648c
@@ -1461,9 +1461,9 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: 0c357f3156fcb16c8589ede67cc036330b6698ca
   RNScreens: b32a9ff15bea7fcdbe5dff6477bc503f792b1208
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  WebRTC-SDK: 1990a1a595bd0b59c17485ce13ff17f575732c12
+  WebRTC-SDK: 79942c006ea64f6fb48d7da8a4786dfc820bc1db
   Yoga: ae3c32c514802d30f687a04a6a35b348506d411f
 
-PODFILE CHECKSUM: 6fcbd8445e8602c6a7ab17fb1523c62772c821da
+PODFILE CHECKSUM: b5aad0c7d12b2ea501eb822f98f00ca01d154bd9
 
 COCOAPODS: 1.13.0

example/package.json

@@ -10,7 +10,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@livekit/react-native-webrtc": "^125.0.5",
+    "@livekit/react-native-webrtc": "^125.0.6",
     "@react-native-async-storage/async-storage": "^1.17.10",
     "@react-navigation/native": "^6.0.8",
     "@react-navigation/native-stack": "^6.5.0",

example/src/App.tsx

@@ -23,5 +23,5 @@ export default function App() {
 
 export type RootStackParamList = {
   PreJoinPage: undefined;
-  RoomPage: { url: string; token: string };
+  RoomPage: { url: string; token: string; e2ee: boolean; e2eeKey: string };
 };

example/src/PreJoinPage.tsx

@@ -2,23 +2,37 @@ import * as React from 'react';
 import { useState, useEffect } from 'react';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 
-import { StyleSheet, View, TextInput, Text, Button } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  TextInput,
+  Text,
+  Button,
+  Switch,
+} from 'react-native';
 import type { RootStackParamList } from './App';
 import { useTheme } from '@react-navigation/native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
-const DEFAULT_URL = 'wss://www.example.com';
-const DEFAULT_TOKEN = '';
+const DEFAULT_URL = 'ws://192.168.11.3:7880';
+const DEFAULT_TOKEN =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzU3ODc4OTYsImlzcyI6IkFQSVRMV3JLOHRid3I0NyIsIm5iZiI6MTczMzE5NTg5Niwic3ViIjoicGhvbmUiLCJ2aWRlbyI6eyJyb29tIjoibXlyb29tIiwicm9vbUpvaW4iOnRydWV9fQ.2ucoFK_t1rX8cnUVdx_7nS-TOGv_2Io6uNEw11kPs3M';
+const DEFAULT_E2EE = false;
+const DEFAULT_E2EE_KEY = '';
 
 const URL_KEY = 'url';
 const TOKEN_KEY = 'token';
+const E2EE_KEY = 'e2eeEnabled';
+const E2EE_SHARED_KEY_KEY = 'e2eeSharedKey';
 
 export const PreJoinPage = ({
   navigation,
 }: NativeStackScreenProps<RootStackParamList, 'PreJoinPage'>) => {
   const [url, setUrl] = useState(DEFAULT_URL);
   const [token, setToken] = useState(DEFAULT_TOKEN);
-
+  const [e2eeEnabled, setE2EE] = useState(DEFAULT_E2EE);
+  const [e2eeKey, setE2EEKey] = useState(DEFAULT_E2EE_KEY);
+  const toggleE2EE = () => setE2EE((previousState) => !previousState);
   useEffect(() => {
     AsyncStorage.getItem(URL_KEY).then((value) => {
       if (value) {
@@ -31,14 +45,44 @@ export const PreJoinPage = ({
         setToken(value);
       }
     });
+    AsyncStorage.getItem(E2EE_KEY).then((value) => {
+      if (value) {
+        setE2EE(value === 'true');
+      }
+    });
+    AsyncStorage.getItem(E2EE_SHARED_KEY_KEY).then((value) => {
+      if (value) {
+        setE2EEKey(value);
+      }
+    });
   }, []);
 
   const { colors } = useTheme();
 
-  let saveValues = (saveUrl: string, saveToken: string) => {
+  let e2eeKeyInputTitle = <Text style={{ color: colors.text }}>E2EE Key</Text>;
+  let e2eeKeyInput = (
+    <TextInput
+      style={{
+        color: colors.text,
+        borderColor: colors.border,
+        ...styles.input,
+      }}
+      onChangeText={setE2EEKey}
+      value={e2eeKey}
+    />
+  );
+  let saveValues = (
+    saveUrl: string,
+    saveToken: string,
+    saveE2EE: boolean,
+    saveE2EEKey: string
+  ) => {
     AsyncStorage.setItem(URL_KEY, saveUrl);
     AsyncStorage.setItem(TOKEN_KEY, saveToken);
+    AsyncStorage.setItem(E2EE_KEY, saveE2EE.toString());
+    AsyncStorage.setItem(E2EE_SHARED_KEY_KEY, saveE2EEKey);
   };
+
   return (
     <View style={styles.container}>
       <Text style={{ color: colors.text }}>URL</Text>
@@ -63,10 +107,25 @@ export const PreJoinPage = ({
         value={token}
       />
 
+      <Text style={{ color: colors.text }}>Enable E2EE</Text>
+      <Switch onValueChange={toggleE2EE} value={e2eeEnabled} />
+
+      <View style={styles.spacer} />
+
+      {e2eeEnabled ? e2eeKeyInputTitle : null}
+      {e2eeEnabled ? e2eeKeyInput : null}
+
+      <View style={styles.spacer} />
+
       <Button
         title="Connect"
         onPress={() => {
-          navigation.push('RoomPage', { url: url, token: token });
+          navigation.push('RoomPage', {
+            url,
+            token,
+            e2ee: e2eeEnabled,
+            e2eeKey,
+          });
         }}
       />
 
@@ -75,7 +134,7 @@ export const PreJoinPage = ({
       <Button
         title="Save Values"
         onPress={() => {
-          saveValues(url, token);
+          saveValues(url, token, e2eeEnabled, e2eeKey);
         }}
       />
 
@@ -84,9 +143,16 @@ export const PreJoinPage = ({
       <Button
         title="Reset Values"
         onPress={() => {
-          saveValues(DEFAULT_URL, DEFAULT_TOKEN);
+          saveValues(
+            DEFAULT_URL,
+            DEFAULT_TOKEN,
+            DEFAULT_E2EE,
+            DEFAULT_E2EE_KEY
+          );
           setUrl(DEFAULT_URL);
           setToken(DEFAULT_TOKEN);
+          setE2EE(DEFAULT_E2EE);
+          setE2EEKey(DEFAULT_E2EE_KEY);
         }}
       />
     </View>
@@ -105,7 +171,7 @@ const styles = StyleSheet.create({
     marginVertical: 20,
   },
   input: {
-    width: '100%',
+    width: '90%',
     height: 40,
     margin: 12,
     borderWidth: 1,

example/src/RoomPage.tsx

@@ -28,6 +28,7 @@ import {
   type ReceivedDataMessage,
   AndroidAudioTypePresets,
   useIOSAudioManagement,
+  useRNE2EEManager,
 } from '@livekit/react-native';
 import { Platform } from 'react-native';
 // @ts-ignore
@@ -44,7 +45,7 @@ export const RoomPage = ({
   navigation,
   route,
 }: NativeStackScreenProps<RootStackParamList, 'RoomPage'>) => {
-  const { url, token } = route.params;
+  const { url, token, e2ee, e2eeKey } = route.params;
   useEffect(() => {
     let start = async () => {
       // Perform platform specific call setup.
@@ -66,13 +67,17 @@ export const RoomPage = ({
     };
   }, []);
 
+  let { e2eeManager } = useRNE2EEManager({ sharedKey: e2eeKey });
+  let e2eeOptions = e2ee ? { e2eeManager } : undefined;
+
   return (
     <LiveKitRoom
       serverUrl={url}
       token={token}
       connect={true}
       options={{
         adaptiveStream: { pixelDensity: 'screen' },
+        e2ee: e2eeOptions,
       }}
       audio={true}
       video={true}
@@ -89,6 +94,13 @@ interface RoomViewProps {
 const RoomView = ({ navigation }: RoomViewProps) => {
   const [isCameraFrontFacing, setCameraFrontFacing] = useState(true);
   const room = useRoomContext();
+  useEffect(() => {
+    let setup = async () => {
+      await room.setE2EEEnabled(true);
+    };
+    setup();
+    return () => {};
+  }, [room]);
 
   useIOSAudioManagement(room, true);
   // Setup room listeners

example/yarn.lock

@@ -2149,16 +2149,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@livekit/react-native-webrtc@npm:^125.0.5":
-  version: 125.0.5
-  resolution: "@livekit/react-native-webrtc@npm:125.0.5"
+"@livekit/react-native-webrtc@npm:^125.0.6":
+  version: 125.0.6
+  resolution: "@livekit/react-native-webrtc@npm:125.0.6"
   dependencies:
     base64-js: 1.5.1
     debug: 4.3.4
     event-target-shim: 6.0.2
   peerDependencies:
     react-native: ">=0.60.0"
-  checksum: 3c492575156b5d243b03fdb6ed05881c9daaaddad05083f0bfa6d604cc0962f434a46d5fdbd592333caebcdab6d10d8bc3657aa227b6d726c6c853aa49e793be
+  checksum: 7c715568b4899bae718b39bd9bf1d72a346afdab008f6fd47b903f6bf96eabf9a7457d0de6835e4e76750754c7fc6f4a460fa4176733d8ba189e7cd2dc1f5e36
   languageName: node
   linkType: hard
 
@@ -6079,7 +6079,7 @@ __metadata:
     "@babel/core": ^7.20.0
     "@babel/preset-env": ^7.20.0
     "@babel/runtime": ^7.20.0
-    "@livekit/react-native-webrtc": ^125.0.5
+    "@livekit/react-native-webrtc": ^125.0.6
     "@react-native-async-storage/async-storage": ^1.17.10
     "@react-native/babel-preset": 0.74.84
     "@react-native/eslint-config": 0.74.84