@stream-io/video-react-native-sdk 1.42.0 → 1.44.0

package/expo-config-plugin/static/SampleHandler.swift

@@ -2,6 +2,7 @@
 //  SampleHandler.swift
 //  Broadcast Extension
 //
+
 import ReplayKit
 import OSLog
 
@@ -9,26 +10,47 @@ let broadcastLogger = OSLog(subsystem: "io.getstream.reactnative", category: "Br
 private enum Constants {
     // the App Group ID value that the app and the broadcast extension targets are setup with. It differs for each app.
     static let appGroupIdentifier = "group.com.example.broadcast.appgroup"
+    static let videoSocketName = "rtc_SSFD"
+    static let audioSocketName = "rtc_SSFD_audio"
+    static let audioConnectMaxAttempts = 300
 }
 class SampleHandler: RPBroadcastSampleHandler {
 
-    private var clientConnection: SocketConnection?
-    private var uploader: SampleUploader?
+    private var videoClientConnection: SocketConnection?
+    private var videoUploader: SampleUploader?
+
+    private var audioClientConnection: SocketConnection?
+    private var audioUploader: AudioUploader?
 
     private var frameCount: Int = 0
 
+    private func socketFilePath(for name: String) -> String {
+        let sharedContainer = FileManager.default.containerURL(forSecurityApplicationGroupIdentifier: Constants.appGroupIdentifier)
+        return sharedContainer?.appendingPathComponent(name).path ?? ""
+    }
+
     var socketFilePath: String {
-      let sharedContainer = FileManager.default.containerURL(forSecurityApplicationGroupIdentifier: Constants.appGroupIdentifier)
-        return sharedContainer?.appendingPathComponent("rtc_SSFD").path ?? ""
+        socketFilePath(for: Constants.videoSocketName)
+    }
+
+    var audioSocketFilePath: String {
+        socketFilePath(for: Constants.audioSocketName)
     }
 
     override init() {
       super.init()
         if let connection = SocketConnection(filePath: socketFilePath) {
-          clientConnection = connection
-          setupConnection()
+          videoClientConnection = connection
+          setupVideoConnection()
 
-          uploader = SampleUploader(connection: connection)
+          videoUploader = SampleUploader(connection: connection)
+        }
+
+        if let connection = SocketConnection(filePath: audioSocketFilePath) {
+          audioClientConnection = connection
+          setupAudioConnection()
+
+          audioUploader = AudioUploader(connection: connection)
         }
         os_log(.debug, log: broadcastLogger, "%{public}s", socketFilePath)
     }
@@ -38,7 +60,8 @@ class SampleHandler: RPBroadcastSampleHandler {
         frameCount = 0
 
         DarwinNotificationCenter.shared.postNotification(.broadcastStarted)
-        openConnection()
+        openVideoConnection()
+        openAudioConnection()
     }
 
     override func broadcastPaused() {
@@ -52,14 +75,18 @@ class SampleHandler: RPBroadcastSampleHandler {
     override func broadcastFinished() {
         // User has requested to finish the broadcast.
         DarwinNotificationCenter.shared.postNotification(.broadcastStopped)
-        clientConnection?.close()
+        videoClientConnection?.close()
+        audioClientConnection?.close()
     }
 
     override func processSampleBuffer(_ sampleBuffer: CMSampleBuffer, with sampleBufferType: RPSampleBufferType) {
         switch sampleBufferType {
         case RPSampleBufferType.video:
-            uploader?.send(sample: sampleBuffer)
+            videoUploader?.send(sample: sampleBuffer)
+        case RPSampleBufferType.audioApp:
+            audioUploader?.send(sample: sampleBuffer)
         default:
+            // .audioMic is handled by the app's audio device module; ignore it here.
             break
         }
     }
@@ -67,8 +94,8 @@ class SampleHandler: RPBroadcastSampleHandler {
 
 private extension SampleHandler {
 
-    func setupConnection() {
-        clientConnection?.didClose = { [weak self] error in
+    func setupVideoConnection() {
+        videoClientConnection?.didClose = { [weak self] error in
             os_log(.debug, log: broadcastLogger, "client connection did close \(String(describing: error))")
 
             if let error = error {
@@ -82,12 +109,19 @@ private extension SampleHandler {
         }
     }
 
-    func openConnection() {
+    func setupAudioConnection() {
+        // closed audio socket must not tear down the whole broadcast.
+        audioClientConnection?.didClose = { error in
+            os_log(.debug, log: broadcastLogger, "audio connection did close \(String(describing: error))")
+        }
+    }
+
+    func openVideoConnection() {
         let queue = DispatchQueue(label: "broadcast.connectTimer")
         let timer = DispatchSource.makeTimerSource(queue: queue)
         timer.schedule(deadline: .now(), repeating: .milliseconds(100), leeway: .milliseconds(500))
         timer.setEventHandler { [weak self] in
-            guard self?.clientConnection?.open() == true else {
+            guard self?.videoClientConnection?.open() == true else {
                 return
             }
 
@@ -96,4 +130,23 @@ private extension SampleHandler {
 
         timer.resume()
     }
+
+    func openAudioConnection() {
+        let queue = DispatchQueue(label: "broadcast.audioConnectTimer")
+        let timer = DispatchSource.makeTimerSource(queue: queue)
+        timer.schedule(deadline: .now(), repeating: .milliseconds(100), leeway: .milliseconds(500))
+        var attempts = 0
+        timer.setEventHandler { [weak self] in
+            attempts += 1
+            if self?.audioClientConnection?.open() == true {
+                timer.cancel()
+                return
+            }
+            if attempts >= Constants.audioConnectMaxAttempts {
+                timer.cancel()
+            }
+        }
+
+        timer.resume()
+    }
 }

package/ios/StreamInCallManager.m

@@ -9,6 +9,10 @@ RCT_EXTERN_METHOD(setDefaultAudioDeviceEndpointType:(NSString *)endpointType)
 
 RCT_EXTERN_METHOD(setEnableStereoAudioOutput:(BOOL)enable)
 
+RCT_EXTERN_METHOD(setMuteMode:(NSInteger)mode)
+
+RCT_EXTERN_METHOD(setRecordingAlwaysPreparedMode:(BOOL)enabled)
+
 RCT_EXTERN_METHOD(setup)
 
 RCT_EXTERN_METHOD(start)

package/ios/StreamInCallManager.swift

@@ -124,7 +124,30 @@ class StreamInCallManager: RCTEventEmitter {
             self.enableStereo = enabled
         }
     }
-    
+
+    @objc(setMuteMode:)
+    func setMuteMode(mode: NSInteger) {
+        audioSessionQueue.async { [self] in
+            guard let adm = getAudioDeviceModule() else {
+                log("setMuteMode(\(mode)) skipped: no live call ADM")
+                return
+            }
+            let muteMode = RTCAudioEngineMuteMode(rawValue: mode) ?? .voiceProcessing
+            _ = adm.setMuteMode(muteMode)
+        }
+    }
+
+    @objc(setRecordingAlwaysPreparedMode:)
+    func setRecordingAlwaysPreparedMode(enabled: Bool) {
+        audioSessionQueue.async { [self] in
+            guard let adm = getAudioDeviceModule() else {
+                log("setRecordingAlwaysPreparedMode(\(enabled)) skipped: no live call ADM")
+                return
+            }
+            _ = adm.setRecordingAlwaysPreparedMode(enabled)
+        }
+    }
+
     /// Builds the audio config for the current role/device and sets it as WebRTC's default.
     private func makeAudioConfiguration(for routing: OutputRouting?) -> RTCAudioSessionConfiguration {
         let category: AVAudioSession.Category
@@ -152,7 +175,7 @@ class StreamInCallManager: RCTEventEmitter {
             // only exists under .playAndRecord.
             category = .playback
             mode = .spokenAudio
-            options = []
+            options = [.mixWithOthers]
         } else {
             // XCode 16 and older don't expose .allowBluetoothHFP
             // https://forums.swift.org/t/xcode-26-avaudiosession-categoryoptions-allowbluetooth-deprecated/80956
@@ -170,7 +193,7 @@ class StreamInCallManager: RCTEventEmitter {
                 // then we always can't use defaultToSpeaker
                 mustSetDefaultToSpeaker = false
             }
-            options = mustSetDefaultToSpeaker ? [bluetoothOption, .defaultToSpeaker] : [bluetoothOption]
+            options = mustSetDefaultToSpeaker ? [bluetoothOption, .defaultToSpeaker, .mixWithOthers] : [bluetoothOption, .mixWithOthers]
         }
 
         let rtcConfig = RTCAudioSessionConfiguration.webRTC()
@@ -199,11 +222,11 @@ class StreamInCallManager: RCTEventEmitter {
             // This path (no CallKit) owns audio-session activation itself, so the
             // engine must be allowed to start. Restores availability in case a
             // prior CallKit call had gated it off.
-            _ = adm.setEngineAvailability(.default)
+            _ = adm?.setEngineAvailability(.default)
 
             // Stereo is listener-only and applies live. Cleared by stop()'s reset().
             if callAudioRole == .listener && enableStereo {
-                adm.setStereoPlayoutPreference(true)
+                adm?.setStereoPlayoutPreference(true)
             }
 
             let rtcConfig = makeAudioConfiguration(for: selectedOutput)
@@ -228,7 +251,7 @@ class StreamInCallManager: RCTEventEmitter {
                 #if DEBUG
                 NSLog("%@","[StreamInCallManager][wireEngineSubscription]")
                 #endif
-                engineSubscription = adm.publisher.sink { [weak self] event in
+                engineSubscription = adm?.publisher.sink { [weak self] event in
                     guard let self else { return }
                     self.audioSessionQueue.async {
                         switch event {
@@ -339,7 +362,7 @@ class StreamInCallManager: RCTEventEmitter {
             // session.setActive(true) here.
             do {
                 let adm = getAudioDeviceModule()
-                try adm.setPlayout(true)
+                try adm?.setPlayout(true)
                 self.log("adm.setPlayout(true) done")
             } catch {
                 // String(describing:) surfaces the real error code (see setup()).
@@ -357,7 +380,7 @@ class StreamInCallManager: RCTEventEmitter {
                 return
             }
             let adm = getAudioDeviceModule()
-            adm.reset()
+            adm?.reset()
             clearOutputRouting()
             // Deactivate directly: the .didDisableAudioEngine sink is async and we cancel it below.
             applyConfigForEngineDisable()
@@ -603,7 +626,10 @@ class StreamInCallManager: RCTEventEmitter {
     @objc(getAudioStateLog)
     func getAudioStateLog() -> String {
         let session = AVAudioSession.sharedInstance()
-        let adm = getAudioDeviceModule()
+        
+        guard let adm = getAudioDeviceModule() else {
+            return "No audio device module found"
+        }
         
         // WebRTC wraps AVAudioSession with RTCAudioSession; log its state as well.
         let rtcSession = RTCAudioSession.sharedInstance()
@@ -798,7 +824,11 @@ class StreamInCallManager: RCTEventEmitter {
                 stereoRefreshWorkItem?.cancel()
                 // Create a new debounced work item
                 let workItem = DispatchWorkItem { [weak self] in
-                    self?.getAudioDeviceModule().refreshStereoPlayoutState()
+                    guard let adm = self?.getAudioDeviceModule() else {
+                        self?.log("Audio device module is not ready")
+                        return
+                    }
+                    adm.refreshStereoPlayoutState()
                     self?.log("Executed debounced refreshStereoPlayoutState")
                 }
                 stereoRefreshWorkItem = workItem
@@ -863,12 +893,14 @@ class StreamInCallManager: RCTEventEmitter {
     }
 
     // MARK: - Helper Methods
-    private func getAudioDeviceModule() -> AudioDeviceModule {
+    private func getAudioDeviceModule() -> AudioDeviceModule? {
         guard let webrtcModule = moduleRegistry?.module(forName: "WebRTCModule") as? WebRTCModule else {
             fatalError("WebRTCModule is required but not registered with the module registry")
         }
 
-        return webrtcModule.audioDeviceModule
+        // Follow the live call's ADM; fall back to the default only when no call factory is
+        // active (bare-fork, or an in-call-manager op firing outside the join↔leave window).
+        return webrtcModule.currentAudioDeviceModuleOrNil()
     }
 
     private func getCurrentWindow() -> UIWindow? {

package/ios/StreamVideoReactNative.m

@@ -51,6 +51,7 @@ void broadcastNotificationCallback(CFNotificationCenterRef center,
     bool hasListeners;
     CFNotificationCenterRef _notificationCenter;
     AVAudioPlayer *_busyTonePlayer; // Instance variable
+    ScreenAudioCapture *_screenAudioCapture; // Broadcast screen-share audio receiver
 }
 
 RCT_EXPORT_MODULE();
@@ -647,19 +648,25 @@ RCT_EXPORT_METHOD(startScreenShareAudioMixing:(RCTPromiseResolveBlock)resolve
     if (apmId && [apmId isKindOfClass:[RTCDefaultAudioProcessingModule class]]) {
         RTCDefaultAudioProcessingModule *apm = (RTCDefaultAudioProcessingModule *)apmId;
         apm.capturePostProcessingDelegate = mixer;
-        NSLog(@"[SSAMixer] Set capturePostProcessingDelegate on APM");
     } else {
-        NSLog(@"[SSAMixer] WARNING: No RTCDefaultAudioProcessingModule available, mixing will not work");
+        NSLog(@"[SSAudio][Native] WARNING: No RTCDefaultAudioProcessingModule available, screen-share audio mixing will not work");
     }
 
     [mixer startMixing];
 
-    // Wire audio buffer handler on the active capturer → mixer.enqueue
     InAppScreenCapturer *capturer = options.activeInAppScreenCapturer;
     if (capturer) {
         capturer.audioBufferHandler = ^(CMSampleBufferRef sampleBuffer) {
             [mixer enqueue:sampleBuffer];
         };
+    } else {
+        if (!_screenAudioCapture) {
+            _screenAudioCapture = [ScreenAudioCapture new];
+        }
+        _screenAudioCapture.onAudioBuffer = ^(AVAudioPCMBuffer *pcmBuffer) {
+            [mixer enqueuePCM:pcmBuffer];
+        };
+        [_screenAudioCapture start];
     }
 
     resolve(nil);
@@ -671,12 +678,16 @@ RCT_EXPORT_METHOD(stopScreenShareAudioMixing:(RCTPromiseResolveBlock)resolve
     WebRTCModule *webrtcModule = [self.moduleRegistry moduleForName:"WebRTCModule"];
     WebRTCModuleOptions *options = [WebRTCModuleOptions sharedInstance];
 
-    // Stop feeding audio to the mixer
     InAppScreenCapturer *capturer = options.activeInAppScreenCapturer;
     if (capturer) {
         capturer.audioBufferHandler = nil;
     }
 
+    if (_screenAudioCapture) {
+        _screenAudioCapture.onAudioBuffer = nil;
+        [_screenAudioCapture stop];
+    }
+
     // Stop mixing
     ScreenShareAudioMixer *mixer = webrtcModule.audioDeviceModule.screenShareAudioMixer;
     [mixer stopMixing];
@@ -686,7 +697,6 @@ RCT_EXPORT_METHOD(stopScreenShareAudioMixing:(RCTPromiseResolveBlock)resolve
     if (apmId && [apmId isKindOfClass:[RTCDefaultAudioProcessingModule class]]) {
         RTCDefaultAudioProcessingModule *apm = (RTCDefaultAudioProcessingModule *)apmId;
         apm.capturePostProcessingDelegate = nil;
-        NSLog(@"[SSAMixer] Cleared capturePostProcessingDelegate on APM");
     }
 
     resolve(nil);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.42.0",
+  "version": "1.44.0",
   "description": "Stream Video SDK for React Native",
   "author": "https://getstream.io",
   "homepage": "https://getstream.io/video/docs/react-native/",
@@ -16,7 +16,7 @@
     "build:expo-plugin": "rimraf expo-config-plugin/dist && tsc --project expo-config-plugin/tsconfig.json",
     "build": "yarn copy-version && bob build && yarn build:expo-plugin",
     "test:expo-plugin": "jest --config=expo-config-plugin/jest.config.js --coverage",
-    "test": "yarn copy-version && jest --coverage && yarn test:expo-plugin",
+    "test": "yarn copy-version && jest --coverage && yarn test:types && yarn test:expo-plugin",
     "test:types": "yarn copy-version && tsc -p tsconfig.spec.json",
     "copy-version": "echo \"export const version = '$npm_package_version';\" > ./src/version.ts"
   },
@@ -52,8 +52,8 @@
     "!**/.*"
   ],
   "dependencies": {
-    "@stream-io/video-client": "1.56.0",
-    "@stream-io/video-react-bindings": "1.19.1",
+    "@stream-io/video-client": "1.58.0",
+    "@stream-io/video-react-bindings": "1.20.0",
     "intl-pluralrules": "2.0.1",
     "react-native-url-polyfill": "^3.0.0",
     "rxjs": "~7.8.2",
@@ -65,7 +65,7 @@
     "@react-native-firebase/messaging": ">=17.5.0",
     "@stream-io/noise-cancellation-react-native": ">=0.1.0",
     "@stream-io/react-native-callingx": ">=0.1.0",
-    "@stream-io/react-native-webrtc": "^145.1.1",
+    "@stream-io/react-native-webrtc": "^145.3.1",
     "@stream-io/video-filters-react-native": ">=0.1.0",
     "expo": ">=47.0.0",
     "expo-notifications": "*",
@@ -106,37 +106,39 @@
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",
-    "@expo/config-plugins": "56.0.8",
-    "@expo/config-types": "^56.0.5",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-typescript": "^7.29.7",
+    "@expo/config-plugins": "^57.0.6",
+    "@expo/config-types": "^57.0.2",
     "@expo/plist": "^0.7.0",
     "@react-native-community/netinfo": "12.0.1",
-    "@react-native-firebase/app": "^24.0.0",
-    "@react-native-firebase/messaging": "^24.0.0",
-    "@react-native/babel-preset": "0.85.3",
-    "@react-native/metro-config": "0.85.3",
-    "@stream-io/noise-cancellation-react-native": "^0.9.5",
-    "@stream-io/react-native-callingx": "^0.8.1",
-    "@stream-io/react-native-webrtc": "145.1.1",
+    "@react-native-firebase/app": "^24.1.1",
+    "@react-native-firebase/messaging": "^24.1.1",
+    "@react-native/babel-preset": "0.86.2",
+    "@react-native/jest-preset": "0.86.2",
+    "@react-native/metro-config": "0.86.2",
+    "@stream-io/noise-cancellation-react-native": "^0.11.0",
+    "@stream-io/react-native-callingx": "^0.10.0",
+    "@stream-io/react-native-webrtc": "145.3.1",
     "@stream-io/typescript-config": "^0.0.0",
-    "@stream-io/video-filters-react-native": "^0.14.5",
+    "@stream-io/video-filters-react-native": "^0.16.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "13.3.3",
     "@tsconfig/node18": "^18.2.6",
     "@types/jest": "^29.5.14",
-    "@types/node": "^25.9.3",
-    "@types/react": "~19.2.15",
+    "@types/node": "^25.9.5",
+    "@types/react": "~19.2.18",
     "@types/react-test-renderer": "^19.1.0",
-    "expo": "~56.0.9",
-    "expo-module-scripts": "^56.0.3",
-    "expo-notifications": "~56.0.16",
+    "expo": "~57.0.9",
+    "expo-notifications": "~57.0.8",
     "jest": "^29.7.0",
     "react": "19.2.3",
-    "react-native": "0.85.3",
-    "react-native-builder-bob": "^0.41.0",
-    "react-native-gesture-handler": "~2.31.2",
-    "react-native-reanimated": "4.3.1",
+    "react-native": "0.86.2",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-gesture-handler": "~2.32.0",
+    "react-native-reanimated": "4.5.3",
     "react-native-svg": "15.15.5",
-    "react-native-worklets": "0.8.3",
+    "react-native-worklets": "0.10.1",
     "react-test-renderer": "19.2.3",
     "rimraf": "^6.1.3",
     "typescript": "^6.0.3"

package/src/components/Call/CallControls/internal/ReactionsPicker.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import { useCall } from '@stream-io/video-react-bindings';
 import {
-  type SendReactionRequest,
+  type SendVideoReactionRequest,
   videoLoggerSystem,
 } from '@stream-io/video-client';
 import { ComponentTestIds } from '../../../../constants/TestIds';
@@ -82,7 +82,7 @@ export const ReactionsPicker = ({
     left: reactionsButtonLayoutRectangle?.x,
   };
 
-  const onClose = (reaction?: SendReactionRequest) => {
+  const onClose = (reaction?: SendVideoReactionRequest) => {
     if (reaction) {
       call?.sendReaction(reaction).catch((e) => {
         const logger = videoLoggerSystem.getLogger('ReactionsPicker');

package/src/components/Call/Lobby/Lobby.tsx

@@ -7,9 +7,8 @@ import {
 } from '@stream-io/video-react-bindings';
 import { Avatar } from '../../utility/Avatar';
 import type { StreamVideoParticipant } from '@stream-io/video-client';
-import type { MediaStream } from '@stream-io/react-native-webrtc';
-import { RTCView } from '@stream-io/react-native-webrtc';
 import { LobbyControls as DefaultLobbyControls } from '../CallControls/LobbyControls';
+import { LobbyCameraPreview } from './LobbyCameraPreview';
 import {
   JoinCallButton as DefaultJoinCallButton,
   type JoinCallButtonProps,
@@ -65,9 +64,8 @@ export const Lobby = ({
   const { useCameraState, useCallSettings } = useCallStateHooks();
   const callSettings = useCallSettings();
   const isVideoEnabledInCall = callSettings?.video.enabled;
-  const { isMute: cameraIsMuted, mediaStream } = useCameraState();
+  const { optimisticIsMute: cameraIsMuted } = useCameraState();
   const { t } = useI18n();
-  const localVideoStream = mediaStream as unknown as MediaStream | undefined;
 
   const connectedUserAsParticipant = useMemo(
     () =>
@@ -98,13 +96,8 @@ export const Lobby = ({
               ]}
             >
               <View style={styles.topView} />
-              {!cameraIsMuted && localVideoStream ? (
-                <RTCView
-                  mirror={true}
-                  streamURL={localVideoStream.toURL()}
-                  objectFit="cover"
-                  style={StyleSheet.absoluteFill}
-                />
+              {!cameraIsMuted ? (
+                <LobbyCameraPreview objectFit="cover" />
               ) : (
                 <View style={[styles.avatarContainer, lobby.avatarContainer]}>
                   <Avatar participant={connectedUserAsParticipant} />

package/src/components/Call/Lobby/LobbyCameraPreview.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { Platform, StyleSheet, ViewStyle } from 'react-native';
+import {
+  permissions,
+  RTCCameraPreviewView,
+} from '@stream-io/react-native-webrtc';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+
+/**
+ * Props for the {@link LobbyCameraPreview} component.
+ */
+export type LobbyCameraPreviewProps = {
+  /**
+   * Resembles the CSS style object-fit.
+   *
+   * @default 'cover'
+   */
+  objectFit?: 'contain' | 'cover';
+  /**
+   * Style applied to the preview view.
+   */
+  style?: ViewStyle;
+};
+
+/**
+ * The lobby runs before the call is joined. This component drives the native
+ * camera capturer directly via {@link RTCCameraPreviewView} which requires
+ * no track/peer connection factory to be created.
+ *
+ * It is driven by the *intended* camera state (optimistic): the lobby camera
+ * toggle only updates `optimisticStatus`; the real WebRTC track is acquired and
+ * published at join.
+ */
+export const LobbyCameraPreview = ({
+  style,
+  objectFit = 'cover',
+}: LobbyCameraPreviewProps) => {
+  const { useCameraState, useCallSettings } = useCallStateHooks();
+
+  const { optimisticIsMute, direction, selectedDevice } = useCameraState();
+  const settings = useCallSettings();
+
+  const wantsCamera = !optimisticIsMute;
+  const hasCameraPermission = useEnsureCameraPermission(wantsCamera);
+
+  const facing = direction === 'back' ? 'back' : 'front';
+
+  // Capture at the call's target resolution so the running preview capturer matches
+  // what the track publishes and can be adopted at join without reconfiguring.
+  // Normalize to landscape, matching CameraManager.selectTargetResolution.
+  const targetResolution = settings?.video.target_resolution;
+  let captureWidth = targetResolution?.width ?? 1280;
+  let captureHeight = targetResolution?.height ?? 720;
+  if (captureWidth < captureHeight) {
+    [captureWidth, captureHeight] = [captureHeight, captureWidth];
+  }
+
+  return (
+    <RTCCameraPreviewView
+      style={[StyleSheet.absoluteFill, style as any]}
+      isActive={wantsCamera && hasCameraPermission}
+      facing={facing}
+      deviceId={selectedDevice}
+      mirror={Platform.OS === 'ios' ? true : facing === 'front'}
+      objectFit={objectFit}
+      captureWidth={captureWidth}
+      captureHeight={captureHeight}
+    />
+  );
+};
+
+const useEnsureCameraPermission = (enabled: boolean): boolean => {
+  const [granted, setGranted] = useState(false);
+
+  useEffect(() => {
+    if (!enabled || granted) return;
+
+    let cancelled = false;
+    (async () => {
+      try {
+        const status = await permissions.query({ name: 'camera' });
+        if (status === 'granted') {
+          if (!cancelled) setGranted(true);
+          return;
+        }
+        const result = await permissions.request({ name: 'camera' });
+        if (!cancelled) setGranted(!!result);
+      } catch {
+        if (!cancelled) setGranted(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, granted]);
+
+  return granted;
+};

package/src/components/Call/Lobby/index.ts

@@ -1,3 +1,4 @@
 export * from './Lobby';
+export * from './LobbyCameraPreview';
 export * from './JoinCallButton';
 export * from './LobbyFooter';

package/src/components/Call/RingingCallContent/OutgoingCall.tsx

@@ -109,8 +109,7 @@ const Background = () => {
   const { useCameraState } = useCallStateHooks();
   const { isMute, camera } = useCameraState();
   const localVideoStream = camera.state.mediaStream as unknown as
-    | MediaStream
-    | undefined;
+    MediaStream | undefined;
 
   if (isMute || !localVideoStream) {
     return (

package/src/components/Participant/FloatingParticipantView/index.tsx

@@ -25,10 +25,7 @@ import { useFloatingVideoDimensions } from './useFloatingVideoDimensions';
 import { type StreamVideoParticipant } from '@stream-io/video-client';
 
 export type FloatingParticipantViewAlignment =
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
+  'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
 /**
  * Props to be passed for the LocalVideoView component.