@livekit/react-native 2.9.2 → 2.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/react-native",
-  "version": "2.9.2",
+  "version": "2.9.4",
   "description": "LiveKit for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -43,30 +43,35 @@
   ],
   "dependencies": {
     "@livekit/components-react": "^2.8.1",
+    "@livekit/mutex": "^1.1.1",
     "array.prototype.at": "^1.1.1",
+    "base64-js": "1.5.1",
     "event-target-shim": "6.0.2",
     "events": "^3.3.0",
     "loglevel": "^1.8.0",
     "promise.allsettled": "^1.0.5",
-    "react-native-quick-base64": "2.1.1",
     "react-native-url-polyfill": "^1.3.0",
     "typed-emitter": "^2.1.0",
     "web-streams-polyfill": "^4.1.0",
     "well-known-symbols": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
     "@commitlint/config-conventional": "^16.2.1",
-    "@livekit/react-native-webrtc": "^137.0.1",
-    "@react-native/babel-preset": "0.74.84",
-    "@react-native/eslint-config": "0.74.84",
-    "@react-native/metro-config": "0.74.84",
-    "@react-native/typescript-config": "0.74.84",
+    "@livekit/react-native-webrtc": "^137.0.2",
+    "@react-native-community/cli": "20.0.0",
+    "@react-native-community/cli-platform-android": "20.0.0",
+    "@react-native-community/cli-platform-ios": "20.0.0",
+    "@react-native/babel-preset": "0.82.0",
+    "@react-native/eslint-config": "0.82.0",
+    "@react-native/metro-config": "0.82.0",
+    "@react-native/typescript-config": "0.82.0",
     "@release-it/conventional-changelog": "^4.2.0",
     "@types/fastestsmallesttextencoderdecoder": "^1.0.0",
-    "@types/react": "^18.2.6",
+    "@types/react": "^19.1.1",
+    "@types/react-test-renderer": "^19.1.0",
     "babel-jest": "^29.6.3",
     "commitlint": "^16.2.1",
     "eslint": "^8.23.0",
@@ -75,19 +80,19 @@
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^7.0.4",
     "jest": "^29.6.3",
-    "livekit-client": "^2.15.4",
+    "livekit-client": "^2.15.8",
     "pod-install": "^0.2.2",
     "prettier": "2.8.8",
-    "react": "18.2.0",
-    "react-native": "0.74.2",
+    "react": "19.1.1",
+    "react-native": "0.82.0",
     "react-native-builder-bob": "^0.18.2",
     "release-it": "^14.2.2",
-    "typedoc": "^0.25.13",
-    "typescript": "5.0.4"
+    "typedoc": "^0.28.14",
+    "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@livekit/react-native-webrtc": "^137.0.1",
-    "livekit-client": "^2.15.4",
+    "@livekit/react-native-webrtc": "^137.0.2",
+    "livekit-client": "^2.15.8",
     "react": "*",
     "react-native": "*"
   },
@@ -103,8 +108,11 @@
     "bootstrap": "yarn example && yarn && yarn pods"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
+  "workspaces": [
+    "example"
+  ],
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
@@ -172,7 +180,10 @@
     "root": true,
     "extends": [
       "@react-native",
-      "prettier"
+      "eslint-config-prettier"
+    ],
+    "plugins": [
+      "eslint-plugin-prettier"
     ],
     "rules": {
       "prettier/prettier": [

package/src/audio/MediaRecorder.ts

@@ -5,7 +5,7 @@ import {
   Event,
   defineEventAttribute,
 } from 'event-target-shim/index';
-import { toByteArray } from 'react-native-quick-base64';
+import { toByteArray } from 'base64-js';
 import LiveKitModule from '../LKNativeModule';
 import { log } from '../logger';
 

package/src/components/VideoTrack.tsx

@@ -208,6 +208,7 @@ export const VideoTrack = forwardRef<RTCViewInstance, VideoTrackProps>(
       videoView = (
         <RTCView
           style={styles.videoTrack}
+          // @ts-expect-error
           streamURL={mediaStream?.toURL() ?? ''}
           objectFit={objectFit}
           zOrder={zOrder}
@@ -220,6 +221,7 @@ export const VideoTrack = forwardRef<RTCViewInstance, VideoTrackProps>(
       videoView = (
         <RTCPIPView
           style={styles.videoTrack}
+          // @ts-expect-error
           streamURL={mediaStream?.toURL() ?? ''}
           objectFit={objectFit}
           zOrder={zOrder}

package/src/components/VideoView.tsx

@@ -98,6 +98,7 @@ export const VideoView = ({
       >
         <RTCView
           style={styles.videoView}
+          // @ts-expect-error
           streamURL={mediaStream?.toURL() ?? ''}
           objectFit={objectFit}
           zOrder={zOrder}

package/src/e2ee/RNE2EEManager.ts

@@ -1,7 +1,10 @@
 import {
+  RTCDataPacketCryptor,
+  RTCDataPacketCryptorFactory,
   RTCFrameCryptorAlgorithm,
   RTCFrameCryptorFactory,
   RTCRtpReceiver,
+  type RTCEncryptedPacket,
   type RTCFrameCryptor,
   type RTCRtpSender,
 } from '@livekit/react-native-webrtc';
@@ -16,6 +19,9 @@ import {
   type BaseE2EEManager,
   type E2EEManagerCallbacks,
   EncryptionEvent,
+  type DecryptDataResponseMessage,
+  type EncryptDataResponseMessage,
+  Mutex,
 } from 'livekit-client';
 import type RNKeyProvider from './RNKeyProvider';
 import type RTCEngine from 'livekit-client/dist/src/room/RTCEngine';
@@ -36,11 +42,28 @@ export default class RNE2EEManager
     RTCFrameCryptorAlgorithm.kAesGcm;
 
   private encryptionEnabled: boolean = false;
+  private dataChannelEncryptionEnabled: boolean = false;
 
-  constructor(keyProvider: RNKeyProvider) {
+  private dataPacketCryptorLock = new Mutex();
+  private dataPacketCryptor: RTCDataPacketCryptor | undefined = undefined;
+  constructor(
+    keyProvider: RNKeyProvider,
+    dcEncryptionEnabled: boolean = false
+  ) {
     super();
     this.keyProvider = keyProvider;
     this.encryptionEnabled = false;
+    this.dataChannelEncryptionEnabled = dcEncryptionEnabled;
+  }
+
+  get isEnabled(): boolean {
+    return this.encryptionEnabled;
+  }
+  get isDataChannelEncryptionEnabled(): boolean {
+    return this.isEnabled && this.dataChannelEncryptionEnabled;
+  }
+  set isDataChannelEncryptionEnabled(value: boolean) {
+    this.dataChannelEncryptionEnabled = value;
   }
 
   setup(room: Room) {
@@ -78,7 +101,16 @@ export default class RNE2EEManager
             await frameCryptor.dispose();
           }
         }
-      );
+      )
+      .on(RoomEvent.SignalConnected, () => {
+        if (!this.room) {
+          throw new TypeError(`expected room to be present on signal connect`);
+        }
+        this.setParticipantCryptorEnabled(
+          this.room.localParticipant.isE2EEEnabled,
+          this.room.localParticipant.identity
+        );
+      });
   }
 
   private async setupE2EESender(
@@ -133,6 +165,89 @@ export default class RNE2EEManager
     this.keyProvider.setSifTrailer(trailer);
   }
 
+  private async getDataPacketCryptor(): Promise<RTCDataPacketCryptor> {
+    let dataPacketCryptor = this.dataPacketCryptor;
+    if (dataPacketCryptor) {
+      return dataPacketCryptor;
+    }
+
+    let unlock = await this.dataPacketCryptorLock.lock();
+
+    try {
+      dataPacketCryptor = this.dataPacketCryptor;
+      if (dataPacketCryptor) {
+        return dataPacketCryptor;
+      }
+
+      dataPacketCryptor =
+        await RTCDataPacketCryptorFactory.createDataPacketCryptor(
+          this.algorithm,
+          this.keyProvider.rtcKeyProvider
+        );
+
+      this.dataPacketCryptor = dataPacketCryptor;
+      return dataPacketCryptor;
+    } finally {
+      unlock();
+    }
+  }
+  async encryptData(
+    data: Uint8Array
+  ): Promise<EncryptDataResponseMessage['data']> {
+    let room = this.room;
+    if (!room) {
+      throw new Error("e2eemanager isn't setup with room!");
+    }
+
+    let participantId = room.localParticipant.identity;
+
+    let dataPacketCryptor = await this.getDataPacketCryptor();
+
+    let encryptedPacket = await dataPacketCryptor.encrypt(
+      participantId,
+      this.keyProvider.getLatestKeyIndex(participantId),
+      data
+    );
+
+    if (!encryptedPacket) {
+      throw new Error('encryption for packet failed');
+    }
+    return {
+      uuid: '', //not used
+      payload: encryptedPacket.payload,
+      iv: encryptedPacket.iv,
+      keyIndex: encryptedPacket.keyIndex,
+    };
+  }
+
+  async handleEncryptedData(
+    payload: Uint8Array,
+    iv: Uint8Array,
+    participantIdentity: string,
+    keyIndex: number
+  ): Promise<DecryptDataResponseMessage['data']> {
+    let packet = {
+      payload,
+      iv,
+      keyIndex,
+    } satisfies RTCEncryptedPacket;
+
+    let dataPacketCryptor = await this.getDataPacketCryptor();
+    let decryptedData = await dataPacketCryptor.decrypt(
+      participantIdentity,
+      packet
+    );
+
+    if (!decryptedData) {
+      throw new Error('decryption for packet failed');
+    }
+
+    return {
+      uuid: '', //not used
+      payload: decryptedData,
+    } satisfies DecryptDataResponseMessage['data'];
+  }
+
   // Utility methods
   //////////////////////
 

package/src/hooks/useE2EEManager.ts

@@ -2,6 +2,7 @@ import RNE2EEManager from '../e2ee/RNE2EEManager';
 import { log, RNKeyProvider } from '..';
 import { useEffect, useState } from 'react';
 import type { RNKeyProviderOptions } from '../e2ee/RNKeyProvider';
+import type { BaseE2EEManager } from 'livekit-client';
 
 export type UseRNE2EEManagerOptions = {
   keyProviderOptions?: RNKeyProviderOptions;
@@ -10,7 +11,7 @@ export type UseRNE2EEManagerOptions = {
 
 export interface RNE2EEManagerState {
   keyProvider: RNKeyProvider;
-  e2eeManager: RNE2EEManager;
+  e2eeManager: BaseE2EEManager;
 }
 
 /**
@@ -22,7 +23,7 @@ export function useRNE2EEManager(
   let [keyProvider] = useState(
     () => new RNKeyProvider(options.keyProviderOptions ?? {})
   );
-  let [e2eeManager] = useState(() => new RNE2EEManager(keyProvider));
+  let [e2eeManager] = useState(() => new RNE2EEManager(keyProvider, false));
 
   useEffect(() => {
     let setup = async () => {

package/src/index.tsx

@@ -1,7 +1,6 @@
 import 'well-known-symbols/Symbol.asyncIterator/auto';
 import 'well-known-symbols/Symbol.iterator/auto';
 import './polyfills/MediaRecorderShim';
-import 'react-native-quick-base64';
 import { registerGlobals as webrtcRegisterGlobals } from '@livekit/react-native-webrtc';
 import { setupURLPolyfill } from 'react-native-url-polyfill';
 import './polyfills/EncoderDecoderTogether.min.js';
@@ -28,9 +27,9 @@ export interface RegisterGlobalsOptions {
   /**
    * Automatically configure audio session before accessing microphone.
    * When enabled, sets the iOS audio category to 'playAndRecord' before getUserMedia.
+   * Has no effect on non-iOS platforms.
    *
    * @default true
-   * @platform ios
    */
   autoConfigureAudioSession?: boolean;
 }

package/lib/typescript/babel.config.d.ts

@@ -1 +0,0 @@
-export const presets: string[];

package/lib/typescript/lib/commonjs/LKNativeModule.d.ts

@@ -1,3 +0,0 @@
-export const __esModule: boolean;
-export default LiveKitModule;
-declare const LiveKitModule: any;

package/lib/typescript/lib/commonjs/audio/AudioManager.d.ts

@@ -1,10 +0,0 @@
-export const __esModule: boolean;
-/**
- * Handles setting the appropriate AVAudioSession options automatically
- * depending on the audio track states of the Room.
- *
- * @param room
- * @param preferSpeakerOutput
- * @param onConfigureNativeAudio A custom method for determining options used.
- */
-export function useIOSAudioManagement(room: any, preferSpeakerOutput: boolean | undefined, onConfigureNativeAudio: any): void;

package/lib/typescript/lib/commonjs/audio/AudioSession.d.ts

@@ -1,33 +0,0 @@
-export const __esModule: boolean;
-export namespace AndroidAudioTypePresets {
-    namespace communication {
-        const manageAudioFocus: boolean;
-        const audioMode: string;
-        const audioFocusMode: string;
-        const audioStreamType: string;
-        const audioAttributesUsageType: string;
-        const audioAttributesContentType: string;
-    }
-    namespace media {
-        const manageAudioFocus_1: boolean;
-        export { manageAudioFocus_1 as manageAudioFocus };
-        const audioMode_1: string;
-        export { audioMode_1 as audioMode };
-        const audioFocusMode_1: string;
-        export { audioFocusMode_1 as audioFocusMode };
-        const audioStreamType_1: string;
-        export { audioStreamType_1 as audioStreamType };
-        const audioAttributesUsageType_1: string;
-        export { audioAttributesUsageType_1 as audioAttributesUsageType };
-        const audioAttributesContentType_1: string;
-        export { audioAttributesContentType_1 as audioAttributesContentType };
-    }
-}
-export default AudioSession;
-export function getDefaultAppleAudioConfigurationForMode(mode: any, preferSpeakerOutput?: boolean): {
-    audioCategory: string;
-    audioCategoryOptions: string[];
-    audioMode: string;
-};
-declare class AudioSession {
-}

package/lib/typescript/lib/commonjs/audio/MediaRecorder.d.ts

@@ -1,24 +0,0 @@
-export const __esModule: boolean;
-declare const MediaRecorder_base: any;
-/**
- * A MediaRecord implementation only meant for recording audio streams.
- *
- * @private
- */
-export class MediaRecorder extends MediaRecorder_base {
-    [x: string]: any;
-    constructor(stream: any);
-    stream: any;
-    registerListener(): void;
-    _reactTag: any;
-    unregisterListener(): void;
-    pause(): void;
-    state: string | undefined;
-    resume(): void;
-    start(): void;
-    stop(): void;
-    requestData(): void;
-    dispatchData(): void;
-    _parts: any[] | undefined;
-}
-export {};

package/lib/typescript/lib/commonjs/components/BarVisualizer.d.ts

@@ -1,32 +0,0 @@
-export const __esModule: boolean;
-/**
- * @beta
- */
-/**
- * Visualizes audio signals from a TrackReference as bars.
- * If the `state` prop is set, it automatically transitions between VoiceAssistant states.
- * @beta
- *
- * @remarks For VoiceAssistant state transitions this component requires a voice assistant agent running with livekit-agents \>= 0.9.0
- *
- * @example
- * ```tsx
- * function SimpleVoiceAssistant() {
- *   const { state, audioTrack } = useVoiceAssistant();
- *   return (
- *    <BarVisualizer
- *      state={state}
- *      trackRef={audioTrack}
- *    />
- *   );
- * }
- * ```
- */
-export function BarVisualizer({ style, state, barCount, trackRef, options }: {
-    style?: {} | undefined;
-    state: any;
-    barCount?: number | undefined;
-    trackRef: any;
-    options: any;
-}): any;
-export function useBarAnimator(state: any, columns: any, interval: any): any;

package/lib/typescript/lib/commonjs/components/LiveKitRoom.d.ts

@@ -1,20 +0,0 @@
-export const __esModule: boolean;
-/** @public */
-/**
- * The `LiveKitRoom` component provides the room context to all its child components.
- * It is generally the starting point of your LiveKit app and the root of the LiveKit component tree.
- * It provides the room state as a React context to all child components, so you don't have to pass it yourself.
- *
- * @example
- * ```tsx
- * <LiveKitRoom
- *  token='<livekit-token>'
- *  serverUrl='<url-to-livekit-server>'
- *  connect={true}
- * >
- *     ...
- * </LiveKitRoom>
- * ```
- * @public
- */
-export function LiveKitRoom(props: any): any;

package/lib/typescript/lib/commonjs/components/VideoTrack.d.ts

@@ -1,2 +0,0 @@
-export const __esModule: boolean;
-export const VideoTrack: any;

package/lib/typescript/lib/commonjs/components/VideoView.d.ts

@@ -1,14 +0,0 @@
-export const __esModule: boolean;
-/**
- * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
- */
-/**
- * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
- */
-export function VideoView({ style, videoTrack, objectFit, zOrder, mirror }: {
-    style?: {} | undefined;
-    videoTrack: any;
-    objectFit?: string | undefined;
-    zOrder: any;
-    mirror: any;
-}): any;

package/lib/typescript/lib/commonjs/components/ViewPortDetector.d.ts

@@ -1,30 +0,0 @@
-export const __esModule: boolean;
-export default ViewPortDetector;
-declare const ViewPortDetector_base: any;
-/**
- * Detects when this is in the viewport and visible.
- *
- * Will not fire visibility changes for zero width/height components.
- */
-declare class ViewPortDetector extends ViewPortDetector_base {
-    [x: string]: any;
-    constructor(props: any);
-    lastAppStateActive: any;
-    interval: TimeoutHandler | null;
-    lastValue: any;
-    state: {
-        rectTop: number;
-        rectBottom: number;
-    };
-    componentDidMount(): void;
-    appStateSubscription: any;
-    componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    render(): any;
-    view: any;
-}
-declare class TimeoutHandler {
-    set handler(arg: any);
-    get handler(): any;
-    clear(): void;
-}

package/lib/typescript/lib/commonjs/e2ee/RNE2EEManager.d.ts

@@ -1,23 +0,0 @@
-export const __esModule: boolean;
-export default RNE2EEManager;
-declare const RNE2EEManager_base: any;
-/**
- * @experimental
- */
-declare class RNE2EEManager extends RNE2EEManager_base {
-    [x: string]: any;
-    constructor(keyProvider: any);
-    keyProvider: any;
-    encryptionEnabled: boolean;
-    setup(room: any): void;
-    room: any;
-    setupEventListeners(room: any): void;
-    setupE2EESender(publication: any, participant: any): Promise<void>;
-    setupE2EEReceiver(publication: any, participant: any): Promise<void>;
-    setSifTrailer(trailer: any): void;
-    findTrackCryptor(trackId: any): any;
-    createFrameCryptorForSender(sender: any, participantId: any): any;
-    createFrameCryptorForReceiver(receiver: any, participantId: any): any;
-    setupEngine(_engine: any): void;
-    setParticipantCryptorEnabled(enabled: any, participantIdentity: any): void;
-}

package/lib/typescript/lib/commonjs/e2ee/RNKeyProvider.d.ts

@@ -1,33 +0,0 @@
-export const __esModule: boolean;
-export default RNKeyProvider;
-declare const RNKeyProvider_base: any;
-/**
- * Options for construction an RNKeyProvider
- */
-/**
- * @experimental
- */
-declare class RNKeyProvider extends RNKeyProvider_base {
-    [x: string]: any;
-    constructor(options: any);
-    nativeKeyProvider: any;
-    getLatestKeyIndex(participantId: any): any;
-    /**
-     * Accepts a passphrase that's used to create the crypto keys.
-     * @param key
-     */
-    setSharedKey(key: any, keyIndex: any): Promise<any>;
-    ratchetSharedKey(keyIndex: any): Promise<void>;
-    /**
-     * Accepts a passphrase that's used to create the crypto keys for a participant's stream.
-     * @param key
-     */
-    setKey(participantId: any, key: any, keyIndex: any): Promise<any>;
-    ratchetKey(participantIdentity: any, keyIndex: any): Promise<void>;
-    setSifTrailer(trailer: any): Promise<any>;
-    /**
-     * @internal
-     */
-    get rtcKeyProvider(): any;
-    dispose(): void;
-}

package/lib/typescript/lib/commonjs/events/EventEmitter.d.ts

@@ -1,4 +0,0 @@
-export const __esModule: boolean;
-export function addListener(listener: any, eventName: any, eventHandler: any): void;
-export function removeListener(listener: any): void;
-export function setupNativeEvents(): void;

package/lib/typescript/lib/commonjs/hooks/useE2EEManager.d.ts

@@ -1,8 +0,0 @@
-export const __esModule: boolean;
-/**
- * @experimental
- */
-export function useRNE2EEManager(options: any): {
-    keyProvider: any;
-    e2eeManager: any;
-};

package/lib/typescript/lib/commonjs/hooks/useMultibandTrackVolume.d.ts

@@ -1,8 +0,0 @@
-export const __esModule: boolean;
-/**
- * A hook for tracking the volume of an audio track across multiple frequency bands.
- *
- * @param trackOrTrackReference
- * @returns A number array containing the volume for each frequency band.
- */
-export function useMultibandTrackVolume(trackOrTrackReference: any, options: any): any;

package/lib/typescript/lib/commonjs/hooks/useTrackVolume.d.ts

@@ -1,8 +0,0 @@
-export const __esModule: boolean;
-/**
- * A hook for tracking the volume of an audio track.
- *
- * @param trackOrTrackReference
- * @returns A number between 0-1 representing the volume.
- */
-export function useTrackVolume(trackOrTrackReference: any): any;

package/lib/typescript/lib/commonjs/hooks.d.ts

@@ -1,32 +0,0 @@
-export const __esModule: boolean;
-export const ParticipantContext: any;
-export const RoomContext: any;
-export const TrackRefContext: any;
-export const isTrackReference: any;
-export const useChat: any;
-export const useConnectionState: any;
-export const useDataChannel: any;
-export const useEnsureTrackRef: any;
-export const useIsEncrypted: any;
-export const useIsMuted: any;
-export const useIsSpeaking: any;
-export const useLiveKitRoom: any;
-export const useLocalParticipant: any;
-export const useLocalParticipantPermissions: any;
-export const useMaybeTrackRefContext: any;
-export const useParticipantContext: any;
-export const useParticipantInfo: any;
-export const useParticipantTracks: any;
-export const useParticipants: any;
-export const useRemoteParticipant: any;
-export const useRemoteParticipants: any;
-export const useRoomContext: any;
-export const useRoomInfo: any;
-export const useSortedParticipants: any;
-export const useSpeakingParticipants: any;
-export const useTrackMutedIndicator: any;
-export const useTrackRefContext: any;
-export const useTrackTranscription: any;
-export const useTracks: any;
-export const useVisualStableUpdate: any;
-export const useVoiceAssistant: any;