@stream-io/video-react-native-sdk 1.30.5 → 1.31.1-beta.0

package/src/hooks/useScreenShareAudioMixing.ts

@@ -0,0 +1,130 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { hasScreenShare, videoLoggerSystem } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { screenShareAudioMixingManager } from '../modules/ScreenShareAudioManager';
+import { NoiseCancellationWrapper } from '../providers/NoiseCancellation/lib';
+
+const logger = videoLoggerSystem.getLogger('useScreenShareAudioMixing');
+
+/**
+ * Tries to disable noise cancellation so screen audio passes through
+ * unfiltered. Returns true if NC was disabled (and should be re-enabled later).
+ */
+async function disableNoiseCancellation(): Promise<boolean> {
+  try {
+    const nc = NoiseCancellationWrapper.getInstance();
+    const wasEnabled = await nc.isEnabled();
+    if (wasEnabled) {
+      await nc.disable();
+      logger.info('Noise cancellation disabled for screen share audio');
+    }
+    return wasEnabled;
+  } catch {
+    // NC module not installed or not configured — nothing to do
+    return false;
+  }
+}
+
+/**
+ * Re-enables noise cancellation if it was previously disabled.
+ */
+async function restoreNoiseCancellation() {
+  try {
+    const nc = NoiseCancellationWrapper.getInstance();
+    await nc.enable();
+    logger.info('Noise cancellation re-enabled after screen share audio');
+  } catch {
+    // NC module not installed — nothing to do
+  }
+}
+
+/**
+ * Hook that manages the lifecycle of screen share audio mixing.
+ *
+ * When screen share is active and audio mixing is enabled
+ * (via `call.screenShare.enableScreenShareAudio()`), this hook
+ * calls the native module to mix captured screen/app audio
+ * into the microphone audio track.
+ *
+ * Noise cancellation is temporarily disabled while screen audio mixing
+ * is active so that all captured sounds (music, game audio, etc.)
+ * pass through without being filtered.
+ */
+export const useScreenShareAudioMixing = () => {
+  const call = useCall();
+  const { useLocalParticipant } = useCallStateHooks();
+  const localParticipant = useLocalParticipant();
+  const isScreenSharing =
+    localParticipant != null && hasScreenShare(localParticipant);
+
+  const [audioEnabled, setAudioEnabled] = useState(
+    () => call?.screenShare.state.audioEnabled ?? false,
+  );
+
+  const isMixingActiveRef = useRef(false);
+  const ncWasEnabledRef = useRef(false);
+
+  useEffect(() => {
+    if (!call) return;
+    const sub = call.screenShare.state.audioEnabled$.subscribe(setAudioEnabled);
+    return () => sub.unsubscribe();
+  }, [call]);
+
+  const startMixing = useCallback(async () => {
+    if (isMixingActiveRef.current) return;
+    try {
+      // Disable NC before starting mixing so screen audio is not filtered
+      ncWasEnabledRef.current = await disableNoiseCancellation();
+
+      logger.info('Starting screen share audio mixing');
+      await screenShareAudioMixingManager.startScreenShareAudioMixing();
+      isMixingActiveRef.current = true;
+    } catch (error) {
+      logger.warn('Failed to start screen share audio mixing', error);
+      if (ncWasEnabledRef.current) {
+        restoreNoiseCancellation().catch(() => {});
+        ncWasEnabledRef.current = false;
+      }
+    }
+  }, []);
+
+  const stopMixing = useCallback(async () => {
+    if (!isMixingActiveRef.current) return;
+    try {
+      logger.info('Stopping screen share audio mixing');
+      await screenShareAudioMixingManager.stopScreenShareAudioMixing();
+      isMixingActiveRef.current = false;
+
+      if (ncWasEnabledRef.current) {
+        await restoreNoiseCancellation();
+        ncWasEnabledRef.current = false;
+      }
+    } catch (error) {
+      logger.warn('Failed to stop screen share audio mixing', error);
+    }
+  }, []);
+
+  // Start/stop audio mixing based on screen share status and audio preference
+  useEffect(() => {
+    if (isScreenSharing && audioEnabled) {
+      startMixing();
+    } else {
+      stopMixing();
+    }
+  }, [isScreenSharing, audioEnabled, startMixing, stopMixing]);
+
+  useEffect(() => {
+    return () => {
+      if (isMixingActiveRef.current) {
+        screenShareAudioMixingManager
+          .stopScreenShareAudioMixing()
+          .catch(() => {});
+        isMixingActiveRef.current = false;
+        if (ncWasEnabledRef.current) {
+          restoreNoiseCancellation().catch(() => {});
+          ncWasEnabledRef.current = false;
+        }
+      }
+    };
+  }, []);
+};

package/src/hooks/useScreenShareButton.ts

@@ -8,6 +8,42 @@ import React, { useEffect, useRef } from 'react';
 import { findNodeHandle, NativeModules, Platform } from 'react-native';
 import { usePrevious } from '../utils/hooks';
 import { useIsIosScreenshareBroadcastStarted } from './useIsIosScreenshareBroadcastStarted';
+import { screenShareAudioMixingManager } from '../modules/ScreenShareAudioManager';
+
+/**
+ * The type of screen sharing to use on iOS.
+ *
+ * - `'broadcast'` — Uses a Broadcast Upload Extension (RPSystemBroadcastPickerView).
+ *   Captures the entire device screen, works across all apps. Requires an extension target.
+ * - `'inApp'` — Uses RPScreenRecorder.startCapture to capture the current app's screen.
+ *   Only captures the current app. Supports `.audioApp` sample buffers for audio mixing.
+ *
+ * On Android, this option is ignored — the system screen capture dialog is always used.
+ */
+export type ScreenShareType = 'broadcast' | 'inApp';
+
+/**
+ * Options for screen share behavior.
+ */
+export type ScreenShareOptions = {
+  /**
+   * The type of screen sharing on iOS. Default: `'broadcast'`.
+   * On Android this is ignored.
+   */
+  type?: ScreenShareType;
+  /**
+   * Whether to capture and mix system/app audio into the microphone audio track.
+   * When `true`, remote participants will hear media audio from the shared screen
+   * (e.g., YouTube video audio) mixed with the user's microphone.
+   *
+   * - iOS in-app: Audio captured from RPScreenRecorder `.audioApp` buffers.
+   * - iOS broadcast: Audio mixing is **not** currently supported.
+   * - Android: Audio captured via AudioPlaybackCaptureConfiguration (API 29+).
+   *
+   * Default: `false`.
+   */
+  includeAudio?: boolean;
+};
 
 // ios >= 14.0 or android - platform restrictions
 const CanDeviceScreenShare =
@@ -18,7 +54,7 @@ const CanDeviceScreenShare =
 export const useScreenShareButton = (
   /**
    * Ref of the ScreenCapturePickerView component.
-   *
+   * Required for iOS broadcast screen sharing. Can be `null` for in-app mode.
    */
   screenCapturePickerViewiOSRef: React.MutableRefObject<any>,
   /**
@@ -36,6 +72,10 @@ export const useScreenShareButton = (
    *
    */
   onMissingScreenShareStreamPermission?: () => void,
+  /**
+   * Options for screen share behavior (type, includeAudio).
+   */
+  screenShareOptions?: ScreenShareOptions,
 ) => {
   const call = useCall();
   const { useLocalParticipant, useCallSettings, useOwnCapabilities } =
@@ -47,6 +87,9 @@ export const useScreenShareButton = (
   );
   const isScreenSharingEnabledInCall = callSettings?.screensharing.enabled;
 
+  const screenShareType = screenShareOptions?.type ?? 'broadcast';
+  const includeAudio = screenShareOptions?.includeAudio ?? false;
+
   const onScreenShareStartedHandlerRef = useRef(onScreenShareStartedHandler);
   onScreenShareStartedHandlerRef.current = onScreenShareStartedHandler;
   const onScreenShareStoppedHandlerRef = useRef(onScreenShareStoppedHandler);
@@ -62,15 +105,22 @@ export const useScreenShareButton = (
     localParticipant && hasScreenShare(localParticipant);
 
   // listens to iOS screen share broadcast started event from the system
+  // (only relevant for broadcast mode)
   useEffect(() => {
     if (Platform.OS !== 'ios') {
       return;
     }
+    if (screenShareType !== 'broadcast') {
+      return;
+    }
     if (
       iosScreenShareStartedFromSystem &&
       !prevIosScreenShareStartedFromSystem
     ) {
       onScreenShareStartedHandlerRef.current?.();
+      if (includeAudio) {
+        call?.screenShare.enableScreenShareAudio();
+      }
       call?.screenShare.enable();
     } else if (
       !iosScreenShareStartedFromSystem &&
@@ -81,6 +131,8 @@ export const useScreenShareButton = (
     }
   }, [
     call,
+    includeAudio,
+    screenShareType,
     iosScreenShareStartedFromSystem,
     prevIosScreenShareStartedFromSystem,
   ]);
@@ -92,14 +144,43 @@ export const useScreenShareButton = (
         'User does not have permissions to stream the screen share media, calling onMissingScreenShareStreamPermission handler if present',
       );
       onMissingScreenShareStreamPermission?.();
+      return;
     }
+
     if (!hasPublishedScreenShare) {
-      if (Platform.OS === 'ios') {
+      // Set audio mixing preference before starting screen share
+      if (includeAudio) {
+        call?.screenShare.enableScreenShareAudio();
+      } else {
+        try {
+          await call?.screenShare.disableScreenShareAudio();
+        } catch (error) {
+          const logger = videoLoggerSystem.getLogger('useScreenShareButton');
+          logger.warn('Failed to disable screen share audio', error);
+        }
+      }
+
+      if (Platform.OS === 'ios' && screenShareType === 'inApp') {
+        // In-app screen sharing on iOS — uses RPScreenRecorder directly
+        try {
+          await screenShareAudioMixingManager.startInAppScreenCapture(
+            includeAudio,
+          );
+          await call?.screenShare.enable();
+          onScreenShareStartedHandler?.();
+        } catch (error) {
+          await screenShareAudioMixingManager.stopInAppScreenCapture();
+          const logger = videoLoggerSystem.getLogger('useScreenShareButton');
+          logger.warn('Failed to start in-app screen capture', error);
+        }
+      } else if (Platform.OS === 'ios') {
+        // Broadcast screen sharing on iOS — shows the system picker
         const reactTag = findNodeHandle(screenCapturePickerViewiOSRef.current);
         await NativeModules.ScreenCapturePickerViewManager.show(reactTag);
         // After this the iOS screen share broadcast started/stopped event will be triggered
         // and the useEffect listener will handle the rest
       } else {
+        // Android screen sharing
         try {
           await call?.screenShare.enable();
           onScreenShareStartedHandler?.();
@@ -114,6 +195,10 @@ export const useScreenShareButton = (
       }
     } else if (hasPublishedScreenShare) {
       onScreenShareStoppedHandler?.();
+      // Stop in-app screen capture if it was active (iOS only)
+      if (Platform.OS === 'ios' && screenShareType === 'inApp') {
+        await screenShareAudioMixingManager.stopInAppScreenCapture();
+      }
       await call?.screenShare.disable(true);
     }
   };

package/src/index.ts

@@ -9,6 +9,7 @@ import { registerGlobals } from '@stream-io/react-native-webrtc';
 import Logger from '@stream-io/react-native-webrtc/src/Logger';
 import { Platform } from 'react-native';
 import { registerSDKGlobals } from './utils/internal/registerSDKGlobals';
+import './utils/keepCallAliveHeadlessTask';
 
 // We're registering globals, because our video JS client is serving SDKs that use browser based webRTC functions.
 // This will result in creation of 2 global objects: `window` and `navigator`

package/src/modules/ScreenShareAudioManager.ts

@@ -0,0 +1,49 @@
+import { NativeModules, Platform } from 'react-native';
+
+const StreamVideoReactNative = NativeModules.StreamVideoReactNative;
+
+export class ScreenShareAudioManager {
+  /**
+   * Starts mixing screen share audio into the microphone audio track.
+   * On iOS, this enables audio buffer processing on the prepared mixer.
+   * On Android, this registers an audio processor that captures system media
+   * audio via AudioPlaybackCaptureConfiguration and mixes it into the mic buffer.
+   */
+  async startScreenShareAudioMixing(): Promise<void> {
+    return StreamVideoReactNative?.startScreenShareAudioMixing();
+  }
+
+  /**
+   * Stops mixing screen share audio into the microphone audio track
+   * and restores the original audio pipeline.
+   */
+  async stopScreenShareAudioMixing(): Promise<void> {
+    return StreamVideoReactNative?.stopScreenShareAudioMixing();
+  }
+
+  /**
+   * Starts in-app screen capture using RPScreenRecorder (iOS only).
+   * Unlike broadcast screen sharing, in-app capture runs in the main app process
+   * and can directly provide `.audioApp` sample buffers for mixing.
+   *
+   * @param includeAudio Whether to capture and mix app audio.
+   */
+  async startInAppScreenCapture(includeAudio: boolean): Promise<void> {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+    return StreamVideoReactNative?.startInAppScreenCapture(includeAudio);
+  }
+
+  /**
+   * Stops in-app screen capture (iOS only).
+   */
+  async stopInAppScreenCapture(): Promise<void> {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+    return StreamVideoReactNative?.stopInAppScreenCapture();
+  }
+}
+
+export const screenShareAudioMixingManager = new ScreenShareAudioManager();

package/src/modules/call-manager/CallManager.ts

@@ -1,7 +1,10 @@
 import { NativeEventEmitter, NativeModules, Platform } from 'react-native';
 import { AudioDeviceStatus, StreamInCallManagerConfig } from './types';
+import { getCallingxLibIfAvailable } from '../../utils/push/libs/callingx';
+import { videoLoggerSystem } from '@stream-io/video-client';
 
 const NativeManager = NativeModules.StreamInCallManager;
+const CallingxModule = getCallingxLibIfAvailable();
 
 const invariant = (condition: boolean, message: string) => {
   if (!condition) throw new Error(message);
@@ -72,6 +75,19 @@ class SpeakerManager {
   };
 }
 
+const shouldBypassForCallKit = (): boolean => {
+  if (Platform.OS !== 'ios') {
+    return false;
+  }
+  if (!CallingxModule) {
+    return false;
+  }
+  return (
+    CallingxModule.isSetup &&
+    (CallingxModule.hasRegisteredCall() || CallingxModule.isOngoingCallsEnabled)
+  );
+};
+
 export class CallManager {
   android = new AndroidCallManager();
   ios = new IOSCallManager();
@@ -95,6 +111,14 @@ export class CallManager {
    * @param config.enableStereoAudioOutput Whether to enable stereo audio output. Only supported for listener audio role.
    */
   start = (config?: StreamInCallManagerConfig): void => {
+    if (shouldBypassForCallKit()) {
+      videoLoggerSystem
+        .getLogger('CallManager')
+        .debug(
+          'start: skipping start as callkit is handling the audio session',
+        );
+      return;
+    }
     NativeManager.setAudioRole(config?.audioRole ?? 'communicator');
     if (config?.audioRole === 'communicator') {
       const type = config.deviceEndpointType ?? 'speaker';
@@ -110,6 +134,12 @@ export class CallManager {
    * Stops the in call manager.
    */
   stop = (): void => {
+    if (shouldBypassForCallKit()) {
+      videoLoggerSystem
+        .getLogger('CallManager')
+        .debug('stop: skipping stop as callkit is handling the audio session');
+      return;
+    }
     NativeManager.stop();
   };
 
@@ -118,4 +148,10 @@ export class CallManager {
    * in the native layer.
    */
   logAudioState = (): void => NativeManager.logAudioState();
+
+  /**
+   * For debugging purposes, returns the current audio state as a string.
+   * @returns A string containing the current audio state information.
+   */
+  getAudioStateLog = (): string => NativeManager.getAudioStateLog();
 }

package/src/modules/call-manager/native-module.d.ts

@@ -82,6 +82,13 @@ export interface CallManager extends NativeModule {
    * Meant for debugging purposes.
    */
   logAudioState: () => void;
+
+  /**
+   * Get the current audio state as a string.
+   * Meant for debugging purposes.
+   * @returns A string containing the current audio state information.
+   */
+  getAudioStateLog: () => string;
 }
 
 declare module 'react-native' {

package/src/providers/StreamCall/index.tsx

@@ -1,12 +1,13 @@
 import { StreamCallProvider } from '@stream-io/video-react-bindings';
 import React, { type PropsWithChildren, useEffect } from 'react';
 import { Call } from '@stream-io/video-client';
-import { useIosCallkeepWithCallingStateEffect } from '../../hooks/push/useIosCallkeepWithCallingStateEffect';
 import { canAddPushWSSubscriptionsRef } from '../../utils/push/internal/utils';
 import { useAndroidKeepCallAliveEffect } from '../../hooks/useAndroidKeepCallAliveEffect';
+import { useScreenShareAudioMixing } from '../../hooks/useScreenShareAudioMixing';
 import { AppStateListener } from './AppStateListener';
 import { DeviceStats } from './DeviceStats';
 import { pushUnsubscriptionCallbacks } from '../../utils/push/internal/constants';
+import { useCallingExpWithCallingStateEffect } from '../../hooks/push/useCallingExpWithCallingStateEffect';
 
 // const PIP_CHANGE_EVENT = 'StreamVideoReactNative_PIP_CHANGE_EVENT';
 
@@ -34,8 +35,9 @@ export const StreamCall = ({
     <StreamCallProvider call={call}>
       <AppStateListener />
       <AndroidKeepCallAlive />
-      <IosInformCallkeepCallEnd />
+      <CallingExpWithCallingState />
       <ClearPushWSSubscriptions />
+      <ScreenShareAudioMixer />
       <DeviceStats />
       {children}
     </StreamCallProvider>
@@ -52,11 +54,20 @@ const AndroidKeepCallAlive = () => {
 };
 
 /**
- * This is a renderless component to end the call in callkeep for ios.
- * useAndroidKeepCallAliveEffect needs to called inside a child of StreamCallProvider.
+ * This is a renderless component to sync state between stream call and CallKit/Telecom.
+ * useCallingExpWithCallingStateEffect needs to called inside a child of StreamCallProvider.
+ */
+const CallingExpWithCallingState = () => {
+  useCallingExpWithCallingStateEffect();
+  return null;
+};
+
+/**
+ * This is a renderless component to manage screen share audio mixing lifecycle.
+ * It starts/stops native audio mixing based on screen share status and audio preference.
  */
-const IosInformCallkeepCallEnd = () => {
-  useIosCallkeepWithCallingStateEffect();
+const ScreenShareAudioMixer = () => {
+  useScreenShareAudioMixing();
   return null;
 };
 

package/src/utils/StreamVideoRN/index.ts

@@ -3,9 +3,14 @@ import pushLogoutCallbacks from '../internal/pushLogoutCallback';
 import newNotificationCallbacks, {
   type NewCallNotificationCallback,
 } from '../internal/newNotificationCallbacks';
-import { setupIosCallKeepEvents } from '../push/setupIosCallKeepEvents';
 import { setupIosVoipPushEvents } from '../push/setupIosVoipPushEvents';
+import { setupCallingExpEvents } from '../push/setupCallingExpEvents';
+import {
+  extractCallingExpOptions,
+  getCallingxLib,
+} from '../push/libs/callingx';
 import { NativeModules, Platform } from 'react-native';
+import { videoLoggerSystem } from '@stream-io/video-client';
 
 // Utility type for deep partial
 type DeepPartial<T> = {
@@ -47,10 +52,7 @@ const DEFAULT_STREAM_VIDEO_CONFIG: StreamVideoConfig = {
     android: {
       channel: {
         id: 'stream_call_foreground_service',
-        name: 'To keep calls alive',
-        lights: false,
-        vibration: false,
-        importance: 3,
+        name: 'Ongoing calls',
       },
       notificationTexts: {
         title: 'Call in progress',
@@ -76,20 +78,6 @@ export class StreamVideoRN {
     this.config = deepMerge(this.config, updateConfig);
   }
 
-  static updateAndroidIncomingCallChannel(
-    updateChannel: Partial<
-      NonNullable<StreamVideoConfig['push']>['android']['incomingCallChannel']
-    >,
-  ) {
-    const prevChannel = this.config.push?.android?.incomingCallChannel;
-    if (prevChannel) {
-      this.config.push!.android.incomingCallChannel = {
-        ...prevChannel,
-        ...updateChannel,
-      };
-    }
-  }
-
   /**
    * Set the push config for StreamVideoRN.
    * This method must be called **outside** of your application lifecycle, e.g. alongside your
@@ -102,7 +90,28 @@ export class StreamVideoRN {
    * import App from './App';
    * // Set push config
    * const pushConfig = {}; // construct your config
-   * StreamVideoRN.setPushConfig(pushConfig);
+   * // Set CallKit/Android Telecom API integration options. All params are optional. If not provided, the default values will be used.
+   * const callingExpOptions = {
+   *   ios: {
+   *     callsHistory: true,
+   *     displayCallTimeout: 60000,
+   *     sound: 'ringtone',
+   *     imageName: 'callkit_icon',
+   *   },
+   *   android: {
+   *     incomingChannel: {
+   *       id: 'stream_incoming_call_notifications',
+   *       name: 'Call notifications',
+   *       vibration: true,
+   *       sound: 'default',
+   *     },
+   *     titleTransformer: (memberName: string, incoming: boolean) =>
+   *       incoming
+   *         ? `${memberName} is calling you`
+   *         : `You are calling ${memberName}`,
+   *   },
+   * };
+   * StreamVideoRN.setPushConfig(pushConfig, callingExpOptions);
    * AppRegistry.registerComponent('app', () => App);
    */
   static setPushConfig(pushConfig: NonNullable<StreamVideoConfig['push']>) {
@@ -110,20 +119,23 @@ export class StreamVideoRN {
       // Ignoring this config as push config was already set
       return;
     }
-    if (
-      __DEV__ &&
-      (pushConfig.navigateAcceptCall || pushConfig.navigateToIncomingCall)
-    ) {
+
+    this.config.push = pushConfig;
+
+    try {
+      const callingx = getCallingxLib();
+      videoLoggerSystem
+        .getLogger('StreamVideoRN.setPushConfig')
+        .info(JSON.stringify(this.config));
+      const options = extractCallingExpOptions(this.config);
+      callingx.setup(options);
+    } catch {
       throw new Error(
-        `Support for navigateAcceptCall or navigateToIncomingCall in pushConfig has been removed.
-        Please watch for incoming and outgoing calls in the root component of your app.
-        Please see https://getstream.io/video/docs/react-native/advanced/ringing-calls/#watch-for-incoming-and-outgoing-calls for more information.`,
+        'react-native-callingx library is not installed. Please check the installation instructions: https://getstream.io/video/docs/react-native/incoming-calls/ringing-setup/react-native/.',
       );
     }
 
-    this.config.push = pushConfig;
-
-    setupIosCallKeepEvents(pushConfig);
+    setupCallingExpEvents(pushConfig);
     setupIosVoipPushEvents(pushConfig);
   }