Merge remote-tracking branch 'origin/main' into feat/update-example

Author: mironiasty

README.md

@@ -345,6 +345,77 @@ toggleScreencast({screencastMetadata: { displayName: "Annie's desktop" }});
 
 Use track metadata to differentiate between video and screencast tracks.
 
+### Android foreground service
+
+In order for the call to continue running when app is in background, you need to
+set up and start a foreground service. You can use a 3rd party library for this,
+for example [notifee](https://notifee.app/).
+
+In `AndroidManifest.xml` specify necessary permissions:
+
+```xml
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_CAMERA" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE" />
+```
+
+And add foreground service:
+
+```xml
+<application
+...
+>
+  ...
+  <service
+    android:name="app.notifee.core.ForegroundService"
+    android:foregroundServiceType="mediaProjection|camera|microphone" />
+</application>
+```
+
+Then to start the foreground service:
+
+```ts
+import notifee, { AndroidImportance } from '@notifee/react-native';
+
+const startForegroundService = async () => {
+  if (Platform.OS === 'android') return;
+  const channelId = await notifee.createChannel({
+    id: 'video_call',
+    name: 'Video call',
+    lights: false,
+    vibration: false,
+    importance: AndroidImportance.DEFAULT,
+  });
+
+  await notifee.displayNotification({
+    title: 'Your video call is ongoing',
+    body: 'Tap to return to the call.',
+    android: {
+      channelId,
+      asForegroundService: true,
+      ongoing: true,
+      pressAction: {
+        id: 'default',
+      },
+    },
+  });
+};
+```
+
+Don't forget to also stop the service when the call has ended:
+
+```ts
+notifee.stopForegroundService();
+```
+
+Also add this code in your `index.js` to register the service:
+
+```js
+notifee.registerForegroundService((notification) => {
+  return new Promise(() => {});
+});
+```
+
 ### Developing
 
 Run `./scripts/init.sh` in the main directory to install swift-format and set up

android/src/main/java/org/membraneframework/reactnative/MembraneWebRTC.kt

@@ -168,7 +168,7 @@ class MembraneWebRTC(val sendEvent: (name: String, data: Map<String, Any?>) -> U
     }
     videoParameters = videoParameters.copy(
       dimensions = if (createOptions.flipVideo) videoParameters.dimensions.flip() else videoParameters.dimensions,
-      simulcastConfig = videoSimulcastConfig,
+      simulcastConfig = getSimulcastConfigFromOptions(createOptions.simulcastConfig),
       maxBitrate = videoMaxBandwidth
     )
     return videoParameters

example/android/app/src/main/AndroidManifest.xml

@@ -2,8 +2,9 @@
 
     <uses-permission android:name="android.permission.INTERNET"/>
     <uses-permission android:name="android.permission.CAMERA"/>
-    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_CAMERA" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE" />
     <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
 
 
@@ -27,5 +28,8 @@
                 <category android:name="android.intent.category.LAUNCHER"/>
             </intent-filter>
         </activity>
+        <service
+          android:name="app.notifee.core.ForegroundService"
+          android:foregroundServiceType="mediaProjection|camera|microphone" />
     </application>
 </manifest>

example/hooks/useJoinRoom.ts

@@ -4,6 +4,10 @@ import {
   useMicrophone,
   VideoQuality,
 } from '@fishjam-dev/react-native-client';
+import notifee, {
+  AndroidImportance,
+  AndroidColor,
+} from '@notifee/react-native';
 import { useCallback } from 'react';
 import { Platform } from 'react-native';
 
@@ -12,6 +16,33 @@ interface Props {
   isMicrophoneAvailable: boolean;
 }
 
+async function startForegroundService() {
+  if (Platform.OS === 'android') {
+    const channelId = await notifee.createChannel({
+      id: 'video_call',
+      name: 'Video call',
+      lights: false,
+      vibration: false,
+      importance: AndroidImportance.DEFAULT,
+    });
+
+    await notifee.displayNotification({
+      title: 'Your video call is ongoing',
+      body: 'Tap to return to the call.',
+      android: {
+        channelId,
+        asForegroundService: true,
+        ongoing: true,
+        color: AndroidColor.BLUE,
+        colorized: true,
+        pressAction: {
+          id: 'default',
+        },
+      },
+    });
+  }
+}
+
 export function useJoinRoom({
   isCameraAvailable,
   isMicrophoneAvailable,
@@ -21,6 +52,7 @@ export function useJoinRoom({
   const { startMicrophone } = useMicrophone();
 
   const joinRoom = useCallback(async () => {
+    await startForegroundService();
     await startCamera({
       simulcastConfig: {
         enabled: true,

example/index.js

@@ -6,7 +6,12 @@ import { AppRegistry } from 'react-native';
 import App from './App';
 import { name as appName } from './app.json';
 import { LogBox } from 'react-native';
+import notifee from '@notifee/react-native';
 
 LogBox.ignoreLogs(['new NativeEventEmitter']);
 
+notifee.registerForegroundService((notification) => {
+  return new Promise(() => {});
+});
+
 AppRegistry.registerComponent(appName, () => App);

example/ios/Podfile.lock

@@ -1410,4 +1410,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 8daa796ed34dbeeeb2b648d198968b27b4c2ae8d
 
-COCOAPODS: 1.13.0
+COCOAPODS: 1.14.3

example/package.json

@@ -17,6 +17,7 @@
     "@expo-google-fonts/noto-sans": "^0.2.3",
     "@fishjam-dev/react-native-client": "file:..",
     "@gorhom/bottom-sheet": "^4",
+    "@notifee/react-native": "^7.8.2",
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",

example/screens/RoomScreen.tsx

@@ -8,6 +8,7 @@ import {
   useAudioSettings,
 } from '@fishjam-dev/react-native-client';
 import BottomSheet from '@gorhom/bottom-sheet';
+import notifee from '@notifee/react-native';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Platform, SafeAreaView, StyleSheet, View } from 'react-native';
@@ -94,6 +95,12 @@ const RoomScreen = ({ navigation, route }: Props) => {
     }
   }, [audioSettings]);
 
+  useEffect(() => {
+    return () => {
+      notifee.stopForegroundService();
+    };
+  }, []);
+
   return (
     <SafeAreaView style={styles.container}>
       {tracks.length > 0 ? (

example/yarn.lock

@@ -1611,6 +1611,7 @@
 "@fishjam-dev/react-native-client@file:..":
   version "0.3.0"
   dependencies:
+    "@notifee/react-native" "^7.8.2"
     phoenix "^1.7.6"
     promise-fs "^2.1.1"
     protobufjs "^7.2.4"
@@ -1978,6 +1979,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@notifee/react-native@^7.8.2":
+  version "7.8.2"
+  resolved "https://registry.yarnpkg.com/@notifee/react-native/-/react-native-7.8.2.tgz#72d3199ae830b4128ddaef3c1c2f11604759c9c4"
+  integrity sha512-VG4IkWJIlOKqXwa3aExC3WFCVCGCC9BA55Ivg0SMRfEs+ruvYy/zlLANcrVGiPtgkUEryXDhA8SXx9+JcO8oLA==
+
 "@npmcli/fs@^1.0.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-1.1.1.tgz#72f719fe935e687c56a4faecf3c03d06ba593257"

ios/MembraneWebRTC.swift

@@ -157,11 +157,12 @@ class MembraneWebRTC: MembraneRTCDelegate {
         initLocalEndpoint()
     }
 
-    func getVideoParametersFromOptions(connectionOptions: CameraConfig) -> VideoParameters {
+    func getVideoParametersFromOptions(connectionOptions: CameraConfig) throws -> VideoParameters {
         let videoQuality = connectionOptions.quality
         let flipVideo = connectionOptions.flipVideo
         let videoBandwidthLimit = getMaxBandwidthFromOptions(
             maxBandwidth: connectionOptions.maxBandwidth)
+        let simulcastConfig = try getSimulcastConfigFromOptions(simulcastConfig: connectionOptions.simulcastConfig) ?? SimulcastConfig()
 
         let preset: VideoParameters = {
             switch videoQuality {
@@ -192,7 +193,7 @@ class MembraneWebRTC: MembraneRTCDelegate {
         let videoParameters = VideoParameters(
             dimensions: flipVideo ? preset.dimensions.flip() : preset.dimensions,
             maxBandwidth: videoBandwidthLimit,
-            simulcastConfig: self.videoSimulcastConfig
+            simulcastConfig: simulcastConfig
         )
         return videoParameters
     }
@@ -284,9 +285,10 @@ class MembraneWebRTC: MembraneRTCDelegate {
         try addTrackToLocalEndpoint(cameraTrack, config.videoTrackMetadata.toMetadata(), simulcastConfig)
         try setCameraTrackState(cameraTrack: cameraTrack, isEnabled: config.cameraEnabled)
     }
+  
     private func createCameraTrack(config: CameraConfig) throws -> LocalVideoTrack? {
         try ensureConnected()
-        let videoParameters = getVideoParametersFromOptions(connectionOptions: config)
+        let videoParameters = try getVideoParametersFromOptions(connectionOptions: config)
         guard
             let simulcastConfig = try getSimulcastConfigFromOptions(
                 simulcastConfig: config.simulcastConfig)

src/__mocks__/index.tsx

@@ -38,13 +38,6 @@ const emptyPromise = async (): Promise<void> => {
   });
 };
 
-export const useWebRTC = () => {
-  return {
-    connect: emptyPromise,
-    disconnect: emptyPromise,
-    error: null,
-  };
-};
 export const useEndpoints = () => [];
 export const setTargetTrackEncoding = emptyPromise;
 export const useCamera = () => {