FCE-2395: Implement screen sharing for live streams

internal/fishjam-chat/navigators/AppNavigator.tsx

@@ -15,6 +15,7 @@ import { ConnectWithFishjamRoom } from '../screens/ConnectWithFishjamRoom';
 import ConnectToLivestreamScreen from '../screens/ConnectToLivestreamScreen';
 import LivestreamStreamerScreen from '../screens/LivestreamScreen/LivestreamStreamerScreen';
 import LivestreamViewerScreen from '../screens/LivestreamScreen/LivestreamViewerScreen';
+import LivestreamScreenSharingScreen from '../screens/LivestreamScreen/LivestreamScreenSharingScreen';
 
 export type AppRootStackParamList = {
   Home: undefined;
@@ -31,6 +32,10 @@ export type AppRootStackParamList = {
     fishjamId: string;
     roomName: string;
   };
+  LivestreamScreenSharingScreen: {
+    fishjamId: string;
+    roomName: string;
+  };
   Room: {
     isCameraOn: boolean;
     userName?: string;
@@ -144,6 +149,10 @@ export default function AppNavigator() {
           name="LivestreamViewerScreen"
           component={LivestreamViewerScreen}
         />
+        <Stack.Screen
+          name="LivestreamScreenSharingScreen"
+          component={LivestreamScreenSharingScreen}
+        />
         <Stack.Screen
           name="Room"
           options={{

internal/fishjam-chat/package.json

@@ -20,12 +20,12 @@
     "@react-navigation/bottom-tabs": "^6.6.1",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
-    "expo": "53.0.17",
+    "expo": "53.0.25",
     "expo-build-properties": "~0.14.8",
     "expo-device": "~7.1.4",
     "expo-status-bar": "~2.2.3",
     "react": "19.0.0",
-    "react-native": "0.79.5",
+    "react-native": "0.79.6",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",

internal/fishjam-chat/screens/ConnectToLivestreamScreen.tsx

@@ -77,6 +77,24 @@ export default function ConnectToLivestreamScreen({ navigation }: Props) {
       setLoading(false);
     }
   };
+  const onTapConnectScreenSharingButton = async () => {
+    try {
+      validateInputs();
+      setConnectionError(null);
+      setLoading(true);
+
+      navigation.navigate('LivestreamScreenSharingScreen', {
+        fishjamId,
+        roomName,
+      });
+    } catch (e) {
+      const message =
+        'message' in (e as Error) ? (e as Error).message : 'Unknown error';
+      setConnectionError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
   return (
     <DismissKeyboard>
       <SafeAreaView style={styles.safeArea}>
@@ -109,6 +127,11 @@ export default function ConnectToLivestreamScreen({ navigation }: Props) {
             onPress={onTapConnectStreamerButton}
             disabled={loading}
           />
+          <Button
+            title="Stream Screen Sharing"
+            onPress={onTapConnectScreenSharingButton}
+            disabled={loading}
+          />
         </KeyboardAvoidingView>
       </SafeAreaView>
     </DismissKeyboard>

internal/fishjam-chat/screens/LivestreamScreen/LivestreamScreenSharingScreen.tsx

@@ -0,0 +1,84 @@
+import { useSandbox } from '@fishjam-cloud/react-native-client';
+import {
+  LivestreamStreamer,
+  useLivestreamScreenSharingStreamer,
+  VideoParameters,
+} from '@fishjam-cloud/react-native-client/livestream';
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import React, { useCallback } from 'react';
+import { Button, SafeAreaView, StyleSheet, View } from 'react-native';
+import { AppRootStackParamList } from '../../navigators/AppNavigator';
+import { BrandColors } from '../../utils/Colors';
+
+type Props = NativeStackScreenProps<
+  AppRootStackParamList,
+  'LivestreamScreenSharingScreen'
+>;
+
+export default function LivestreamScreenSharingScreen({ route }: Props) {
+  const { fishjamId, roomName } = route.params;
+
+  const { getSandboxLivestream } = useSandbox({
+    fishjamId,
+  });
+
+  const { connect, disconnect, isConnected, whipClientRef } =
+    useLivestreamScreenSharingStreamer({
+      audioEnabled: true,
+      videoParameters: VideoParameters.presetHD169,
+    });
+
+  const handleConnect = useCallback(async () => {
+    try {
+      const { streamerToken } = await getSandboxLivestream(roomName, false);
+      await connect(streamerToken);
+    } catch (err) {
+      console.log(err);
+    }
+  }, [connect, getSandboxLivestream, roomName]);
+
+  const handleDisconnect = useCallback(() => {
+    disconnect();
+  }, [disconnect]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.box}>
+        <View style={styles.videoView}>
+          <LivestreamStreamer style={styles.whepView} ref={whipClientRef} />
+          <Button
+            title={isConnected ? 'Disconnect' : 'Connect'}
+            onPress={isConnected ? handleDisconnect : handleConnect}
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F1FAFE',
+    padding: 24,
+  },
+  box: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 20,
+  },
+  videoView: {
+    width: '100%',
+    height: '70%',
+    backgroundColor: '#E0E0E0',
+    borderRadius: 12,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: BrandColors.darkBlue80,
+  },
+  whepView: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+});

packages/android-client/FishjamClient/src/main/java/com/fishjamcloud/client/webrtc/PeerConnectionFactoryWrapper.kt

@@ -34,7 +34,11 @@ internal class PeerConnectionFactoryWrapper(
 
   init {
     PeerConnectionFactory.initialize(
-      PeerConnectionFactory.InitializationOptions.builder(appContext).createInitializationOptions()
+      PeerConnectionFactory.InitializationOptions
+        .builder(appContext)
+        .setFieldTrials("WebRTC-Network-UseNWPathMonitor/Disabled/")
+        .setEnableInternalTracer(false)
+        .createInitializationOptions()
     )
 
     eglBase = EglBase.create()

packages/react-native-client/package.json

@@ -42,7 +42,7 @@
   "dependencies": {
     "promise-fs": "^2.1.1",
     "protobufjs": "^7.4.0",
-    "react-native-whip-whep": "0.6.0",
+    "react-native-whip-whep": "0.7.1",
     "zod": "^3.25.71"
   },
   "devDependencies": {

packages/react-native-client/plugin/src/withFishjam.ts

@@ -4,8 +4,8 @@ import { FishjamPluginOptions } from './types';
 import withFishjamIos from './withFishjamIos';
 
 const withFishjam: ConfigPlugin<FishjamPluginOptions> = (config, options) => {
-  withFishjamAndroid(config, options);
-  withFishjamIos(config, options);
+  config = withFishjamAndroid(config, options);
+  config = withFishjamIos(config, options);
   return config;
 };
 

packages/react-native-client/plugin/src/withFishjamAndroid.ts

@@ -18,7 +18,7 @@ const withFishjamForegroundService: ConfigPlugin<FishjamPluginOptions> = (
     const mainApplication = getMainApplicationOrThrow(configuration.modResults);
     mainApplication.service = mainApplication.service || [];
 
-    const newService = {
+    const fishjamService = {
       $: {
         'android:name':
           'io.fishjam.reactnative.foregroundService.FishjamForegroundService',
@@ -27,14 +27,72 @@ const withFishjamForegroundService: ConfigPlugin<FishjamPluginOptions> = (
       },
     };
 
-    const existingServiceIndex = mainApplication.service.findIndex(
-      (service) => service.$['android:name'] === newService.$['android:name'],
+    const whipWhepService = {
+      $: {
+        'android:name':
+          'com.swmansion.reactnativeclient.foregroundService.ScreenCaptureService',
+        'android:foregroundServiceType': 'mediaProjection',
+        'android:stopWithTask': 'true',
+      },
+    };
+
+    // Add Fishjam service
+    const existingFishjamServiceIndex = mainApplication.service.findIndex(
+      (service) =>
+        service.$['android:name'] === fishjamService.$['android:name'],
     );
 
-    if (existingServiceIndex !== -1) {
-      mainApplication.service[existingServiceIndex] = newService;
+    if (existingFishjamServiceIndex !== -1) {
+      mainApplication.service[existingFishjamServiceIndex] = fishjamService;
     } else {
-      mainApplication.service.push(newService);
+      mainApplication.service.push(fishjamService);
+    }
+
+    // Add WhipWhep service
+    const existingWhipWhepServiceIndex = mainApplication.service.findIndex(
+      (service) =>
+        service.$['android:name'] === whipWhepService.$['android:name'],
+    );
+
+    if (existingWhipWhepServiceIndex !== -1) {
+      mainApplication.service[existingWhipWhepServiceIndex] = whipWhepService;
+    } else {
+      mainApplication.service.push(whipWhepService);
+    }
+
+    return configuration;
+  });
+
+const withFishjamForegroundServicePermission: ConfigPlugin<
+  FishjamPluginOptions
+> = (config, props) =>
+  withAndroidManifest(config, (configuration) => {
+    if (!props?.android?.enableForegroundService) {
+      return configuration;
+    }
+
+    const mainApplication = configuration.modResults;
+    if (!mainApplication.manifest) {
+      return configuration;
+    }
+
+    if (!mainApplication.manifest['uses-permission']) {
+      mainApplication.manifest['uses-permission'] = [];
+    }
+
+    const permissions = mainApplication.manifest['uses-permission'];
+
+    const hasForegroundServicePermission = permissions.some(
+      (perm) =>
+        perm.$?.['android:name'] === 'android.permission.FOREGROUND_SERVICE',
+    );
+
+    if (!hasForegroundServicePermission) {
+      permissions.push({
+        $: {
+          'android:name': 'android.permission.FOREGROUND_SERVICE',
+        },
+      });
     }
 
     return configuration;
@@ -61,6 +119,7 @@ export const withFishjamAndroid: ConfigPlugin<FishjamPluginOptions> = (
   config,
   props,
 ) => {
+  config = withFishjamForegroundServicePermission(config, props);
   config = withFishjamForegroundService(config, props);
   config = withFishjamPictureInPicture(config, props);
   return config;