From e8ce6c64ec2adb4a56756457bd8aa9362afe7fc1 Mon Sep 17 00:00:00 2001
From: Milosz Filimowski <milosz.filimowski@swmansion.com>
Date: Tue, 24 Feb 2026 13:55:10 +0100
Subject: [PATCH 1/7] add permissions polyfill

---
 .../mobile-client/src/hooks/usePermissions.ts | 25 +++++++++++++++++++
 packages/mobile-client/src/index.ts           |  1 +
 .../src/overrides/getUserMedia.ts             | 25 +++++++++++++++++++
 packages/mobile-client/src/webrtc-polyfill.ts |  2 ++
 4 files changed, 53 insertions(+)
 create mode 100644 packages/mobile-client/src/hooks/usePermissions.ts
 create mode 100644 packages/mobile-client/src/overrides/getUserMedia.ts

diff --git a/packages/mobile-client/src/hooks/usePermissions.ts b/packages/mobile-client/src/hooks/usePermissions.ts
new file mode 100644
index 00000000..88d7761e
--- /dev/null
+++ b/packages/mobile-client/src/hooks/usePermissions.ts
@@ -0,0 +1,25 @@
+import { permissions } from '@fishjam-cloud/react-native-webrtc';
+import { useCallback } from 'react';
+
+type PermissionStatus = 'granted' | 'denied' | 'prompt';
+
+function usePermission(name: 'camera' | 'microphone') {
+  const query = useCallback(async (): Promise<PermissionStatus> => {
+    return (await permissions.query({ name })) as PermissionStatus;
+  }, [name]);
+
+  const request = useCallback(async (): Promise<PermissionStatus> => {
+    await permissions.request({ name });
+    return (await permissions.query({ name })) as PermissionStatus;
+  }, [name]);
+
+  return { query, request };
+}
+
+export function useCameraPermissions() {
+  return usePermission('camera');
+}
+
+export function useMicrophonePermissions() {
+  return usePermission('microphone');
+}
diff --git a/packages/mobile-client/src/index.ts b/packages/mobile-client/src/index.ts
index e6920ec9..41e8bc38 100644
--- a/packages/mobile-client/src/index.ts
+++ b/packages/mobile-client/src/index.ts
@@ -25,6 +25,7 @@ export {
 export type { CallKitAction, CallKitConfig, MediaStream } from '@fishjam-cloud/react-native-webrtc';
 
 export { useForegroundService, type ForegroundServiceConfig } from './useForegroundService';
+export { useCameraPermissions, useMicrophonePermissions } from './hooks/usePermissions';
 
 export {
   useCamera,
diff --git a/packages/mobile-client/src/overrides/getUserMedia.ts b/packages/mobile-client/src/overrides/getUserMedia.ts
new file mode 100644
index 00000000..4809aeb5
--- /dev/null
+++ b/packages/mobile-client/src/overrides/getUserMedia.ts
@@ -0,0 +1,25 @@
+import { permissions } from '@fishjam-cloud/react-native-webrtc';
+
+export const patchGetUserMediaWithPermissionWarnings = () => {
+  const original = globalThis.navigator.mediaDevices.getUserMedia.bind(globalThis.navigator.mediaDevices);
+
+  globalThis.navigator.mediaDevices.getUserMedia = async (constraints?: MediaStreamConstraints) => {
+    try {
+      const [cameraStatus, micStatus] = await Promise.all([
+        constraints?.video ? permissions.query({ name: 'camera' }) : null,
+        constraints?.audio ? permissions.query({ name: 'microphone' }) : null,
+      ]);
+
+      if (cameraStatus && cameraStatus !== 'granted') {
+        console.warn(`Attempting to access camera with permission status: "${cameraStatus}".`);
+      }
+      if (micStatus && micStatus !== 'granted') {
+        console.warn(`Attempting to access microphone with permission status: "${micStatus}".`);
+      }
+    } catch (error) {
+      console.warn('Failed to check permissions before getUserMedia', error);
+    }
+
+    return original(constraints);
+  };
+};
diff --git a/packages/mobile-client/src/webrtc-polyfill.ts b/packages/mobile-client/src/webrtc-polyfill.ts
index 4310fada..71196e0d 100644
--- a/packages/mobile-client/src/webrtc-polyfill.ts
+++ b/packages/mobile-client/src/webrtc-polyfill.ts
@@ -5,6 +5,7 @@ import { registerGlobals } from '@fishjam-cloud/react-native-webrtc';
 // @ts-ignore - event-target-shim types not properly exported via package.json exports
 import { EventTarget } from 'event-target-shim';
 
+import { patchGetUserMediaWithPermissionWarnings } from './overrides/getUserMedia';
 import { RTCPeerConnection } from './overrides/RTCPeerConnection';
 import { LocalStoragePolyfill } from './polyfills/local-storage';
 
@@ -14,6 +15,7 @@ const registerGlobalsPolyfill = () => {
   registerGlobals();
   // Custom overrides
   (globalThis.RTCPeerConnection as unknown as typeof RTCPeerConnection) = RTCPeerConnection;
+  patchGetUserMediaWithPermissionWarnings();
 };
 
 registerGlobalsPolyfill();

From 35f951a65e9d05f364c580e218c1ed973c48003b Mon Sep 17 00:00:00 2001
From: Milosz Filimowski <milosz.filimowski@swmansion.com>
Date: Tue, 24 Feb 2026 14:27:24 +0100
Subject: [PATCH 2/7] update example with the new hook

---
 .../fishjam-chat/app/room/preview.tsx         | 31 ++++++++++++++-----
 .../fishjam-chat/hooks/useMediaPermissions.ts | 28 +++++++++++++++++
 2 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts

diff --git a/examples/mobile-client/fishjam-chat/app/room/preview.tsx b/examples/mobile-client/fishjam-chat/app/room/preview.tsx
index 82b5c47c..38a7706a 100644
--- a/examples/mobile-client/fishjam-chat/app/room/preview.tsx
+++ b/examples/mobile-client/fishjam-chat/app/room/preview.tsx
@@ -12,6 +12,7 @@ import {
 } from "@fishjam-cloud/react-native-client";
 
 import { Button, InCallButton, NoCameraView } from "../../components";
+import { useMediaPermissions } from "../../hooks/useMediaPermissions";
 import { BrandColors } from "../../utils/Colors";
 
 export default function PreviewScreen() {
@@ -29,6 +30,8 @@ export default function PreviewScreen() {
     useMicrophone();
   const { joinRoom, leaveRoom } = useConnection();
 
+  const { granted: permissionsGranted, openSettings } = useMediaPermissions();
+
   const [isInitialized, setIsInitialized] = useState(false);
   const [isJoining, setIsJoining] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -36,6 +39,8 @@ export default function PreviewScreen() {
   const hasJoinedRef = useRef(false);
 
   useEffect(() => {
+    if (!permissionsGranted) return;
+
     const setup = async () => {
       try {
         await initializeDevices({ enableVideo: true, enableAudio: true });
@@ -61,7 +66,7 @@ export default function PreviewScreen() {
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [permissionsGranted]);
 
   const handleJoinRoom = useCallback(async () => {
     try {
@@ -102,7 +107,11 @@ export default function PreviewScreen() {
         {!isInitialized ? (
           <View style={styles.loadingContainer}>
             <ActivityIndicator size="large" color={BrandColors.darkBlue100} />
-            <Text style={styles.loadingText}>Initializing camera...</Text>
+            <Text style={styles.loadingText}>
+              {!permissionsGranted
+                ? "Requesting permissions..."
+                : "Initializing camera..."}
+            </Text>
           </View>
         ) : cameraStream ? (
           <RTCView
@@ -130,11 +139,19 @@ export default function PreviewScreen() {
       </View>
 
       <View style={styles.joinButton}>
-        <Button
-          title={isJoining ? "Joining..." : "Join Room"}
-          onPress={handleJoinRoom}
-          disabled={!isInitialized || isJoining}
-        />
+        {permissionsGranted === false ? (
+          <Button
+            title="Open Settings"
+            type="secondary"
+            onPress={openSettings}
+          />
+        ) : (
+          <Button
+            title={isJoining ? "Joining..." : "Join Room"}
+            onPress={handleJoinRoom}
+            disabled={!isInitialized || isJoining}
+          />
+        )}
       </View>
     </SafeAreaView>
   );
diff --git a/examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts b/examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts
new file mode 100644
index 00000000..57a409e6
--- /dev/null
+++ b/examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts
@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from "react";
+import { Linking } from "react-native";
+import {
+  useCameraPermissions,
+  useMicrophonePermissions,
+} from "@fishjam-cloud/react-native-client";
+
+export function useMediaPermissions() {
+  const camera = useCameraPermissions();
+  const microphone = useMicrophonePermissions();
+  const [granted, setGranted] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      let cam = await camera.query();
+      let mic = await microphone.query();
+
+      if (cam !== "granted") cam = await camera.request();
+      if (mic !== "granted") mic = await microphone.request();
+
+      setGranted(cam === "granted" && mic === "granted");
+    })();
+  }, [camera, microphone]);
+
+  const openSettings = useCallback(() => Linking.openSettings(), []);
+
+  return { granted, openSettings };
+}

From aac49d545e973d1c96ca60acbd07ac7c7366567d Mon Sep 17 00:00:00 2001
From: Milosz Filimowski <milosz.filimowski@swmansion.com>
Date: Tue, 24 Feb 2026 14:39:12 +0100
Subject: [PATCH 3/7] implement copilot suggestions

---
 .../fishjam-chat/app/room/preview.tsx         | 24 ++++++++---
 .../fishjam-chat/hooks/useMediaPermissions.ts | 41 +++++++++++++------
 .../mobile-client/src/hooks/usePermissions.ts |  6 ++-
 3 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/examples/mobile-client/fishjam-chat/app/room/preview.tsx b/examples/mobile-client/fishjam-chat/app/room/preview.tsx
index 38a7706a..2699a370 100644
--- a/examples/mobile-client/fishjam-chat/app/room/preview.tsx
+++ b/examples/mobile-client/fishjam-chat/app/room/preview.tsx
@@ -106,12 +106,24 @@ export default function PreviewScreen() {
       <View style={styles.cameraPreview}>
         {!isInitialized ? (
           <View style={styles.loadingContainer}>
-            <ActivityIndicator size="large" color={BrandColors.darkBlue100} />
-            <Text style={styles.loadingText}>
-              {!permissionsGranted
-                ? "Requesting permissions..."
-                : "Initializing camera..."}
-            </Text>
+            {permissionsGranted === false ? (
+              <Text style={styles.loadingText}>
+                Permissions denied. Please grant camera and microphone access in
+                settings.
+              </Text>
+            ) : (
+              <>
+                <ActivityIndicator
+                  size="large"
+                  color={BrandColors.darkBlue100}
+                />
+                <Text style={styles.loadingText}>
+                  {permissionsGranted === null
+                    ? "Requesting permissions..."
+                    : "Initializing camera..."}
+                </Text>
+              </>
+            )}
           </View>
         ) : cameraStream ? (
           <RTCView
diff --git a/examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts b/examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts
index 57a409e6..6cc644a7 100644
--- a/examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts
+++ b/examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts
@@ -1,26 +1,41 @@
-import { useCallback, useEffect, useState } from "react";
-import { Linking } from "react-native";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AppState, Linking } from "react-native";
 import {
   useCameraPermissions,
   useMicrophonePermissions,
 } from "@fishjam-cloud/react-native-client";
 
 export function useMediaPermissions() {
-  const camera = useCameraPermissions();
-  const microphone = useMicrophonePermissions();
+  const [queryCamera, requestCamera] = useCameraPermissions();
+  const [queryMicrophone, requestMicrophone] = useMicrophonePermissions();
   const [granted, setGranted] = useState<boolean | null>(null);
+  const hasRequested = useRef(false);
 
-  useEffect(() => {
-    (async () => {
-      let cam = await camera.query();
-      let mic = await microphone.query();
+  const checkPermissions = useCallback(async () => {
+    let cam = await queryCamera();
+    let mic = await queryMicrophone();
+
+    if (!hasRequested.current) {
+      hasRequested.current = true;
+      if (cam !== "granted") cam = await requestCamera();
+      if (mic !== "granted") mic = await requestMicrophone();
+    }
 
-      if (cam !== "granted") cam = await camera.request();
-      if (mic !== "granted") mic = await microphone.request();
+    setGranted(cam === "granted" && mic === "granted");
+  }, [queryCamera, queryMicrophone, requestCamera, requestMicrophone]);
 
-      setGranted(cam === "granted" && mic === "granted");
-    })();
-  }, [camera, microphone]);
+  useEffect(() => {
+    checkPermissions();
+  }, [checkPermissions]);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state === "active") {
+        checkPermissions();
+      }
+    });
+    return () => subscription.remove();
+  }, [checkPermissions]);
 
   const openSettings = useCallback(() => Linking.openSettings(), []);
 
diff --git a/packages/mobile-client/src/hooks/usePermissions.ts b/packages/mobile-client/src/hooks/usePermissions.ts
index 88d7761e..886b1e35 100644
--- a/packages/mobile-client/src/hooks/usePermissions.ts
+++ b/packages/mobile-client/src/hooks/usePermissions.ts
@@ -3,7 +3,9 @@ import { useCallback } from 'react';
 
 type PermissionStatus = 'granted' | 'denied' | 'prompt';
 
-function usePermission(name: 'camera' | 'microphone') {
+function usePermission(
+  name: 'camera' | 'microphone',
+): [query: () => Promise<PermissionStatus>, request: () => Promise<PermissionStatus>] {
   const query = useCallback(async (): Promise<PermissionStatus> => {
     return (await permissions.query({ name })) as PermissionStatus;
   }, [name]);
@@ -13,7 +15,7 @@ function usePermission(name: 'camera' | 'microphone') {
     return (await permissions.query({ name })) as PermissionStatus;
   }, [name]);
 
-  return { query, request };
+  return [query, request];
 }
 
 export function useCameraPermissions() {

From a01bd3b1ef35a63d2d630f69948bc72d32a152ed Mon Sep 17 00:00:00 2001
From: Milosz Filimowski <milosz.filimowski@swmansion.com>
Date: Tue, 24 Feb 2026 14:41:07 +0100
Subject: [PATCH 4/7] fix docs

---
 packages/mobile-client/src/hooks/usePermissions.ts | 2 +-
 packages/mobile-client/src/index.ts                | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/mobile-client/src/hooks/usePermissions.ts b/packages/mobile-client/src/hooks/usePermissions.ts
index 886b1e35..e67c3f98 100644
--- a/packages/mobile-client/src/hooks/usePermissions.ts
+++ b/packages/mobile-client/src/hooks/usePermissions.ts
@@ -1,7 +1,7 @@
 import { permissions } from '@fishjam-cloud/react-native-webrtc';
 import { useCallback } from 'react';
 
-type PermissionStatus = 'granted' | 'denied' | 'prompt';
+export type PermissionStatus = 'granted' | 'denied' | 'prompt';
 
 function usePermission(
   name: 'camera' | 'microphone',
diff --git a/packages/mobile-client/src/index.ts b/packages/mobile-client/src/index.ts
index 41e8bc38..b1a4ebc2 100644
--- a/packages/mobile-client/src/index.ts
+++ b/packages/mobile-client/src/index.ts
@@ -25,7 +25,11 @@ export {
 export type { CallKitAction, CallKitConfig, MediaStream } from '@fishjam-cloud/react-native-webrtc';
 
 export { useForegroundService, type ForegroundServiceConfig } from './useForegroundService';
-export { useCameraPermissions, useMicrophonePermissions } from './hooks/usePermissions';
+export {
+  useCameraPermissions,
+  useMicrophonePermissions,
+  type PermissionStatus,
+} from './hooks/usePermissions';
 
 export {
   useCamera,

From d61043e04e31de94e421b10bf2b40a9333914911 Mon Sep 17 00:00:00 2001
From: Milosz Filimowski <milosz.filimowski@swmansion.com>
Date: Tue, 24 Feb 2026 14:51:52 +0100
Subject: [PATCH 5/7] add missing jsdoc

---
 .../mobile-client/src/hooks/usePermissions.ts | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/packages/mobile-client/src/hooks/usePermissions.ts b/packages/mobile-client/src/hooks/usePermissions.ts
index e67c3f98..916e59a5 100644
--- a/packages/mobile-client/src/hooks/usePermissions.ts
+++ b/packages/mobile-client/src/hooks/usePermissions.ts
@@ -1,6 +1,13 @@
 import { permissions } from '@fishjam-cloud/react-native-webrtc';
 import { useCallback } from 'react';
 
+/**
+ * The current status of a device permission.
+ *
+ * - `'granted'` – the user has granted the permission.
+ * - `'denied'` – the user has denied the permission.
+ * - `'prompt'` – the user has not yet been asked (or the permission can be requested again).
+ */
 export type PermissionStatus = 'granted' | 'denied' | 'prompt';
 
 function usePermission(
@@ -18,10 +25,44 @@ function usePermission(
   return [query, request];
 }
 
+/**
+ * Hook for querying and requesting camera permission on the device.
+ *
+ * @returns A tuple of `[query, request]`:
+ * - `query` – checks the current camera permission status without prompting the user.
+ * - `request` – triggers the native permission dialog and returns the resulting status.
+ *
+ * @example
+ * ```tsx
+ * const [queryCameraPermission, requestCameraPermission] = useCameraPermissions();
+ *
+ * const status = await queryCameraPermission();
+ * if (status !== 'granted') {
+ *   await requestCameraPermission();
+ * }
+ * ```
+ */
 export function useCameraPermissions() {
   return usePermission('camera');
 }
 
+/**
+ * Hook for querying and requesting microphone permission on the device.
+ *
+ * @returns A tuple of `[query, request]`:
+ * - `query` – checks the current microphone permission status without prompting the user.
+ * - `request` – triggers the native permission dialog and returns the resulting status.
+ *
+ * @example
+ * ```tsx
+ * const [queryMicPermission, requestMicPermission] = useMicrophonePermissions();
+ *
+ * const status = await queryMicPermission();
+ * if (status !== 'granted') {
+ *   await requestMicPermission();
+ * }
+ * ```
+ */
 export function useMicrophonePermissions() {
   return usePermission('microphone');
 }

From bc843a3bfa9ece537a10a0a0287f91c297e32e63 Mon Sep 17 00:00:00 2001
From: Milosz Filimowski <milosz.filimowski@swmansion.com>
Date: Tue, 24 Feb 2026 14:54:14 +0100
Subject: [PATCH 6/7] add checks

---
 packages/mobile-client/src/overrides/getUserMedia.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/mobile-client/src/overrides/getUserMedia.ts b/packages/mobile-client/src/overrides/getUserMedia.ts
index 4809aeb5..0662d4af 100644
--- a/packages/mobile-client/src/overrides/getUserMedia.ts
+++ b/packages/mobile-client/src/overrides/getUserMedia.ts
@@ -1,7 +1,10 @@
 import { permissions } from '@fishjam-cloud/react-native-webrtc';
 
 export const patchGetUserMediaWithPermissionWarnings = () => {
-  const original = globalThis.navigator.mediaDevices.getUserMedia.bind(globalThis.navigator.mediaDevices);
+  const original = globalThis.navigator?.mediaDevices?.getUserMedia;
+  if (!original) return;
+
+  const boundOriginal = original.bind(globalThis.navigator.mediaDevices);
 
   globalThis.navigator.mediaDevices.getUserMedia = async (constraints?: MediaStreamConstraints) => {
     try {
@@ -20,6 +23,6 @@ export const patchGetUserMediaWithPermissionWarnings = () => {
       console.warn('Failed to check permissions before getUserMedia', error);
     }
 
-    return original(constraints);
+    return boundOriginal(constraints);
   };
 };

From 15ec7fe2a5c632f6e9be0eb5d5b19bf99b103169 Mon Sep 17 00:00:00 2001
From: Milosz Filimowski <milosz.filimowski@swmansion.com>
Date: Thu, 26 Feb 2026 12:38:28 +0100
Subject: [PATCH 7/7] implement nitpick

---
 examples/mobile-client/fishjam-chat/app/room/preview.tsx  | 2 +-
 .../fishjam-chat/hooks/useMediaPermissions.ts             | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/examples/mobile-client/fishjam-chat/app/room/preview.tsx b/examples/mobile-client/fishjam-chat/app/room/preview.tsx
index 2699a370..59843de3 100644
--- a/examples/mobile-client/fishjam-chat/app/room/preview.tsx
+++ b/examples/mobile-client/fishjam-chat/app/room/preview.tsx
@@ -30,7 +30,7 @@ export default function PreviewScreen() {
     useMicrophone();
   const { joinRoom, leaveRoom } = useConnection();
 
-  const { granted: permissionsGranted, openSettings } = useMediaPermissions();
+  const { permissionsGranted, openSettings } = useMediaPermissions();
 
   const [isInitialized, setIsInitialized] = useState(false);
   const [isJoining, setIsJoining] = useState(false);
diff --git a/examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts b/examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts
index 6cc644a7..277b9b5b 100644
--- a/examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts
+++ b/examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts
@@ -8,7 +8,9 @@ import {
 export function useMediaPermissions() {
   const [queryCamera, requestCamera] = useCameraPermissions();
   const [queryMicrophone, requestMicrophone] = useMicrophonePermissions();
-  const [granted, setGranted] = useState<boolean | null>(null);
+  const [permissionsGranted, setPermissionsGranted] = useState<boolean | null>(
+    null
+  );
   const hasRequested = useRef(false);
 
   const checkPermissions = useCallback(async () => {
@@ -21,7 +23,7 @@ export function useMediaPermissions() {
       if (mic !== "granted") mic = await requestMicrophone();
     }
 
-    setGranted(cam === "granted" && mic === "granted");
+    setPermissionsGranted(cam === "granted" && mic === "granted");
   }, [queryCamera, queryMicrophone, requestCamera, requestMicrophone]);
 
   useEffect(() => {
@@ -39,5 +41,5 @@ export function useMediaPermissions() {
 
   const openSettings = useCallback(() => Linking.openSettings(), []);
 
-  return { granted, openSettings };
+  return { permissionsGranted, openSettings };
 }