fix: add more webstream polyfills (#391)

Required for data track usage

Author: davidliu

.changeset/fuzzy-tables-relate.md

@@ -0,0 +1,5 @@
+---
+'@livekit/react-native': patch
+---
+
+Update `livekit-client` to 2.19.0

.changeset/slick-deserts-join.md

@@ -0,0 +1,5 @@
+---
+'@livekit/react-native': patch
+---
+
+Update `web-streams-polyfill` to 4.3.0

.changeset/vast-laws-travel.md

@@ -0,0 +1,5 @@
+---
+'@livekit/react-native': patch
+---
+
+Add polyfills for `CountQueuingStrategy` and `TransformStream` for compatibility with livekit-client

ci/package.json

@@ -14,7 +14,7 @@
     "@livekit/react-native": "*",
     "@livekit/react-native-webrtc": "^144.1.0-beta.2",
     "@react-native/new-app-screen": "0.82.1",
-    "livekit-client": "^2.15.8",
+    "livekit-client": "^2.19.0",
     "react": "19.1.1",
     "react-native": "0.82.1",
     "react-native-safe-area-context": "^5.5.2"

ci/yarn.lock

@@ -1944,12 +1944,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@livekit/protocol@npm:1.42.0":
-  version: 1.42.0
-  resolution: "@livekit/protocol@npm:1.42.0"
+"@livekit/protocol@npm:1.45.8":
+  version: 1.45.8
+  resolution: "@livekit/protocol@npm:1.45.8"
   dependencies:
     "@bufbuild/protobuf": "npm:^1.10.0"
-  checksum: 10/a2780387fa6914f33b5585509c8ab96d2bf13e9972c8377091badeaefe91fa5ea338c9bac839f64146e81f06865ead6ccaf58b9850ac539885657d6c81a8e3b2
+  checksum: 10/53144553718a4fd71b85298201c8548b9a5d814a2f61a7b5d930442444f05a4e27c5f4cf29e0d7221fbda9209684a670ffba8d092d9aaf6b413396e036dd8500
   languageName: node
   linkType: hard
 
@@ -3602,7 +3602,7 @@ __metadata:
     eslint: "npm:^8.19.0"
     install-local: "npm:^3.0.1"
     jest: "npm:^29.6.3"
-    livekit-client: "npm:^2.15.8"
+    livekit-client: "npm:^2.19.0"
     prettier: "npm:2.8.8"
     react: "npm:19.1.1"
     react-native: "npm:0.82.1"
@@ -6537,23 +6537,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"livekit-client@npm:^2.15.8":
-  version: 2.15.8
-  resolution: "livekit-client@npm:2.15.8"
+"livekit-client@npm:^2.19.0":
+  version: 2.19.0
+  resolution: "livekit-client@npm:2.19.0"
   dependencies:
     "@livekit/mutex": "npm:1.1.1"
-    "@livekit/protocol": "npm:1.42.0"
+    "@livekit/protocol": "npm:1.45.8"
     events: "npm:^3.3.0"
     jose: "npm:^6.1.0"
     loglevel: "npm:^1.9.2"
     sdp-transform: "npm:^2.15.0"
-    ts-debounce: "npm:^4.0.0"
     tslib: "npm:2.8.1"
     typed-emitter: "npm:^2.1.0"
-    webrtc-adapter: "npm:^9.0.1"
+    webrtc-adapter: "npm:9.0.5"
   peerDependencies:
     "@types/dom-mediacapture-record": ^1
-  checksum: 10/bce9a5fa4d1d7abb716d520d6f6a72555b1e44c15b21e50493851056f026e377d1adb7ffa93c98a4f75826238f7a3d4027cf2c9d9f51b92ce18ff5a3d6d04f32
+  checksum: 10/66d6bf49e65652369419da4118690578cf372e8e4ae3d3c081ebb2b7931ea62418f10bc7e6ca5e39fae90ed97642ef01292082b602f469721a19bbdbc8777c6a
   languageName: node
   linkType: hard
 
@@ -8871,13 +8870,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-debounce@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "ts-debounce@npm:4.0.0"
-  checksum: 10/346a5f753fd2d855befe351c29782ee998c0ecd309f7650082c438ef5833cc4e2c70d8eea5d8a277d5b42fa997a6e9ba9eab5b88edd8d1e8d292367dcd09ef8b
-  languageName: node
-  linkType: hard
-
 "tslib@npm:2.8.1, tslib@npm:^2.1.0":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
@@ -9211,12 +9203,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webrtc-adapter@npm:^9.0.1":
-  version: 9.0.3
-  resolution: "webrtc-adapter@npm:9.0.3"
+"webrtc-adapter@npm:9.0.5":
+  version: 9.0.5
+  resolution: "webrtc-adapter@npm:9.0.5"
   dependencies:
     sdp: "npm:^3.2.0"
-  checksum: 10/5544cb38093a20b485d1d24eb23483f9ad3cdab0b0edd277cc44a90e871269dd78d124d9c45e91381e16361f79744648575fce762b258bc02c12c3c28ef5e138
+  checksum: 10/23c87b78b689b542ad52723c61c71aead3e07d8ddb4479daafa3fd9490ae3a199859149bb9fb4a16c7e9d13a9e0527e684e781791a221391c21781be2fb5c2e9
   languageName: node
   linkType: hard
 

example/ios/Podfile.lock

@@ -8,7 +8,7 @@ PODS:
   - hermes-engine (0.82.0):
     - hermes-engine/Pre-built (= 0.82.0)
   - hermes-engine/Pre-built (0.82.0)
-  - livekit-react-native (2.10.1):
+  - livekit-react-native (2.11.0-beta.1):
     - boost
     - DoubleConversion
     - fast_float
@@ -1814,7 +1814,7 @@ PODS:
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
     - SocketRocket
-  - react-native-safe-area-context (5.6.1):
+  - react-native-safe-area-context (5.7.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -1832,8 +1832,8 @@ PODS:
     - React-graphics
     - React-ImageManager
     - React-jsi
-    - react-native-safe-area-context/common (= 5.6.1)
-    - react-native-safe-area-context/fabric (= 5.6.1)
+    - react-native-safe-area-context/common (= 5.7.0)
+    - react-native-safe-area-context/fabric (= 5.7.0)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-renderercss
@@ -1844,7 +1844,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-safe-area-context/common (5.6.1):
+  - react-native-safe-area-context/common (5.7.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -1872,7 +1872,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-safe-area-context/fabric (5.6.1):
+  - react-native-safe-area-context/fabric (5.7.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2790,9 +2790,9 @@ SPEC CHECKSUMS:
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   hermes-engine: 8642d8f14a548ab718ec112e9bebdfdd154138b5
-  livekit-react-native: d3bef98b710d5f0fb6ad1c7734c954ddde910150
+  livekit-react-native: a051e6aa4c21e1b2429d136a3d544ae0ccfa08a6
   livekit-react-native-webrtc: 6fc2ff1df5af82d1adb25828ba14a90380a2073e
-  RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
+  RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f
   RCTDeprecation: f17e2ebc07876ca9ab8eb6e4b0a4e4647497ae3a
   RCTRequired: e2c574c1b45231f7efb0834936bd609d75072b63
   RCTTypeSafety: c693294e3993056955c3010eb1ebc574f1fcded6
@@ -2825,7 +2825,7 @@ SPEC CHECKSUMS:
   React-logger: 500f2fa5697d224e63c33d913c8a4765319e19bf
   React-Mapbuffer: 06d59c448da7e34eb05b3fb2189e12f6a30fec57
   React-microtasksnativemodule: d1ee999dc9052e23f6488b730fa2d383a4ea40e5
-  react-native-safe-area-context: c6e2edd1c1da07bdce287fa9d9e60c5f7b514616
+  react-native-safe-area-context: befb5404eb8a16fdc07fa2bebab3568ecabcbb8a
   React-NativeModulesApple: 46690a0fe94ec28fc6fc686ec797b911d251ded0
   React-oscompat: 95875e81f5d4b3c7b2c888d5bd2c9d83450d8bdb
   React-perflogger: 2e229bf33e42c094fd64516d89ec1187a2b79b5b

example/package.json

@@ -15,7 +15,7 @@
     "@react-navigation/native": "^7.1.18",
     "@react-navigation/native-stack": "^7.3.27",
     "@supersami/rn-foreground-service": "^2.2.5",
-    "livekit-client": "^2.15.8",
+    "livekit-client": "^2.19.0",
     "react": "19.1.1",
     "react-native": "0.82.1",
     "react-native-callkeep": "^4.3.14",

example/src/RoomPage.tsx

@@ -6,7 +6,6 @@ import type {
 
 import {
   StyleSheet,
-  View,
   FlatList,
   type ListRenderItem,
   findNodeHandle,
@@ -28,6 +27,11 @@ import {
   useRNE2EEManager,
 } from '@livekit/react-native';
 import { Platform } from 'react-native';
+import {
+  SafeAreaProvider,
+  SafeAreaView,
+  initialWindowMetrics,
+} from 'react-native-safe-area-context';
 // @ts-ignore
 import {
   mediaDevices,
@@ -70,19 +74,21 @@ export const RoomPage = ({
   let e2eeOptions = e2ee ? { e2eeManager } : undefined;
 
   return (
-    <LiveKitRoom
-      serverUrl={url}
-      token={token}
-      connect={true}
-      options={{
-        adaptiveStream: { pixelDensity: 'screen' },
-        e2ee: e2eeOptions,
-      }}
-      audio={false}
-      video={true}
-    >
-      <RoomView navigation={navigation} e2ee={e2ee} />
-    </LiveKitRoom>
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <LiveKitRoom
+        serverUrl={url}
+        token={token}
+        connect={true}
+        options={{
+          adaptiveStream: { pixelDensity: 'screen' },
+          e2ee: e2eeOptions,
+        }}
+        audio={false}
+        video={true}
+      >
+        <RoomView navigation={navigation} e2ee={e2ee} />
+      </LiveKitRoom>
+    </SafeAreaProvider>
   );
 };
 
@@ -176,7 +182,10 @@ const RoomView = ({ navigation, e2ee }: RoomViewProps) => {
   };
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView
+      style={styles.container}
+      edges={['top', 'bottom', 'left', 'right']}
+    >
       {stageView}
       {otherParticipantsView}
       <RoomControls
@@ -241,7 +250,7 @@ const RoomView = ({ navigation, e2ee }: RoomViewProps) => {
         }}
       />
       {screenCapturePickerView}
-    </View>
+    </SafeAreaView>
   );
 };
 

package.json

@@ -65,7 +65,7 @@
     "promise.allsettled": "^1.0.5",
     "react-native-url-polyfill": "^3.0.0",
     "typed-emitter": "^2.1.0",
-    "web-streams-polyfill": "^4.1.0",
+    "web-streams-polyfill": "^4.3.0",
     "well-known-symbols": "^4.1.0"
   },
   "devDependencies": {
@@ -86,7 +86,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "jest": "^30.4.2",
-    "livekit-client": "^2.15.8",
+    "livekit-client": "^2.19.0",
     "pod-install": "^1.0.9",
     "prettier": "^3.6.2",
     "react": "19.2.0",
@@ -98,7 +98,7 @@
   },
   "peerDependencies": {
     "@livekit/react-native-webrtc": "^144.1.0-beta.2",
-    "livekit-client": "^2.15.8",
+    "livekit-client": "^2.19.0",
     "react": "*",
     "react-native": "*"
   },

src/e2ee/RNKeyProvider.ts

@@ -6,6 +6,7 @@ import {
 } from '@livekit/react-native-webrtc';
 
 const defaultRatchetSalt = 'LKFrameEncryptionKey';
+const defaultKeySize = 128;
 const defaultMagicBytes = 'LK-ROCKS';
 const defaultRatchetWindowSize = 16;
 const defaultFailureTolerance = -1;
@@ -35,6 +36,7 @@ export default class RNKeyProvider extends BaseKeyProvider {
       keyRingSize: options.keyringSize ?? defaultKeyRingSize,
       keyringSize: options.keyringSize ?? defaultKeyRingSize,
       discardFrameWhenCryptorNotReady: defaultDiscardFrameWhenCryptorNotReady,
+      keySize: options.keySize ?? defaultKeySize,
     };
 
     let magicBytes = options.uncryptedMagicBytes ?? defaultMagicBytes;