FCE-2803: Add permissions helpers

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,13 +30,17 @@ export default function PreviewScreen() {
     useMicrophone();
   const { joinRoom, leaveRoom } = useConnection();
 
+  const { permissionsGranted, openSettings } = useMediaPermissions();
+
   const [isInitialized, setIsInitialized] = useState(false);
   const [isJoining, setIsJoining] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   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 {
@@ -101,8 +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}>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
@@ -130,11 +151,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>
   );

examples/mobile-client/fishjam-chat/hooks/useMediaPermissions.ts

@@ -0,0 +1,45 @@
+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 [queryCamera, requestCamera] = useCameraPermissions();
+  const [queryMicrophone, requestMicrophone] = useMicrophonePermissions();
+  const [permissionsGranted, setPermissionsGranted] = useState<boolean | null>(
+    null
+  );
+  const hasRequested = useRef(false);
+
+  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();
+    }
+
+    setPermissionsGranted(cam === "granted" && mic === "granted");
+  }, [queryCamera, queryMicrophone, requestCamera, requestMicrophone]);
+
+  useEffect(() => {
+    checkPermissions();
+  }, [checkPermissions]);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state === "active") {
+        checkPermissions();
+      }
+    });
+    return () => subscription.remove();
+  }, [checkPermissions]);
+
+  const openSettings = useCallback(() => Linking.openSettings(), []);
+
+  return { permissionsGranted, openSettings };
+}

packages/mobile-client/src/hooks/usePermissions.ts

@@ -0,0 +1,68 @@
+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(
+  name: 'camera' | 'microphone',
+): [query: () => Promise<PermissionStatus>, request: () => Promise<PermissionStatus>] {
+  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];
+}
+
+/**
+ * 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');
+}

packages/mobile-client/src/index.ts

@@ -25,6 +25,11 @@ export {
 export type { CallKitAction, CallKitConfig, MediaStream } from '@fishjam-cloud/react-native-webrtc';
 
 export { useForegroundService, type ForegroundServiceConfig } from './useForegroundService';
+export {
+  useCameraPermissions,
+  useMicrophonePermissions,
+  type PermissionStatus,
+} from './hooks/usePermissions';
 
 export {
   useCamera,

packages/mobile-client/src/overrides/getUserMedia.ts

@@ -0,0 +1,28 @@
+import { permissions } from '@fishjam-cloud/react-native-webrtc';
+
+export const patchGetUserMediaWithPermissionWarnings = () => {
+  const original = globalThis.navigator?.mediaDevices?.getUserMedia;
+  if (!original) return;
+
+  const boundOriginal = original.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 boundOriginal(constraints);
+  };
+};

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();