Avoid permissions API on Android WebView (#5888)

Author: JamesBurnside

change-beta/@azure-communication-react-59be0ba8-2007-4ade-bf4f-6edeb0f7ce4c.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Improve device permission checks on Android WebViews",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-59be0ba8-2007-4ade-bf4f-6edeb0f7ce4c.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Improve device permission checks on Android WebViews",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/calling-stateful-client/src/DeviceManagerDeclarative.ts

@@ -179,8 +179,11 @@ class ProxyDeviceManager implements ProxyHandler<DeviceManager> {
           navigator.permissions.query({ name: 'microphone' as PermissionName })
         ]);
 
-        hasCameraPermission = cameraPermissions.state === 'granted';
-        hasMicPermission = micPermissions.state === 'granted';
+        // Use logical OR to combine the SDK state with the Permissions API state.
+        // This way we can get a more accurate picture of the device permission state.
+        // If the SDK state is 'granted', we don't need to check the Permissions API state.
+        hasCameraPermission ||= cameraPermissions.state === 'granted';
+        hasMicPermission ||= micPermissions.state === 'granted';
       } catch (e) {
         console.info('Permissions API is not supported by browser', e);
       }

packages/react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx

@@ -1,8 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useCallback, useMemo, useRef } from 'react';
-import { useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { useEffect } from 'react';
 import { useAdaptedSelector } from '../hooks/useAdaptedSelector';
 import { useHandlers } from '../hooks/useHandlers';
 import { LocalDeviceSettings } from '../components/LocalDeviceSettings';
@@ -136,13 +137,14 @@ export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element =>
   const options = useAdaptedSelector(getCallingSelector(DevicesButton));
   const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);
   const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);
+  const environmentInfo = useSelector(getEnvironmentInfo);
   /* @conditional-compile-remove(call-readiness) */
   // use permission API to get video and audio permission state
   const [videoState, setVideoState] = useState<PermissionState | 'unsupported' | undefined>(undefined);
   /* @conditional-compile-remove(call-readiness) */
   const [audioState, setAudioState] = useState<PermissionState | 'unsupported' | undefined>(undefined);
   /* @conditional-compile-remove(call-readiness) */
-  getDevicePermissionState(setVideoState, setAudioState);
+  getDevicePermissionState(environmentInfo, setVideoState, setAudioState, videoState, audioState);
 
   const configContainerRef = useRef<HTMLDivElement>(null);
 
@@ -155,7 +157,6 @@ export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element =>
   const stackConfig = !!configWidth && configWidth < 450;
   const errorBarProps = usePropsFor(ErrorBar);
   const microphones = useSelector(getMicrophones);
-  const environmentInfo = useSelector(getEnvironmentInfo);
 
   let disableStartCallButton =
     (!microphonePermissionGranted || microphones?.length === 0) &&
@@ -253,29 +254,33 @@ export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element =>
   const permissionsState: {
     camera: PermissionState;
     microphone: PermissionState;
-  } = {
-    // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported
-    camera:
-      videoState && videoState !== 'unsupported'
-        ? cameraPermissionGranted !== false
-          ? videoState
-          : 'denied'
-        : cameraPermissionGranted !== false
-          ? cameraPermissionGranted
-            ? 'granted'
-            : 'prompt'
-          : 'denied',
-    microphone:
-      audioState && audioState !== 'unsupported'
-        ? microphonePermissionGranted !== false
-          ? audioState
-          : 'denied'
-        : microphonePermissionGranted !== false
-          ? microphonePermissionGranted
-            ? 'granted'
-            : 'prompt'
-          : 'denied'
-  };
+  } = useMemo(
+    () => ({
+      // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported
+      camera:
+        videoState && videoState !== 'unsupported'
+          ? cameraPermissionGranted !== false
+            ? videoState
+            : 'denied'
+          : cameraPermissionGranted !== false
+            ? cameraPermissionGranted
+              ? 'granted'
+              : 'prompt'
+            : 'denied',
+      microphone:
+        audioState && audioState !== 'unsupported'
+          ? microphonePermissionGranted !== false
+            ? audioState
+            : 'denied'
+          : microphonePermissionGranted !== false
+            ? microphonePermissionGranted
+              ? 'granted'
+              : 'prompt'
+            : 'denied'
+    }),
+    [videoState, audioState, cameraPermissionGranted, microphonePermissionGranted]
+  );
+
   /* @conditional-compile-remove(call-readiness) */
   const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');
 
@@ -287,9 +292,11 @@ export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element =>
   /* @conditional-compile-remove(call-readiness) */
   const [minimumFallbackTimerElapsed, setMinimumFallbackTimerElapsed] = useState(false);
   /* @conditional-compile-remove(call-readiness) */
-  setTimeout(() => {
-    setMinimumFallbackTimerElapsed(true);
-  }, 2000);
+  useEffect(() => {
+    setTimeout(() => {
+      setMinimumFallbackTimerElapsed(true);
+    }, 2000);
+  }, []);
   /* @conditional-compile-remove(call-readiness) */
   const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;
 

packages/react-composites/src/composites/CallComposite/utils/Utils.ts

@@ -430,15 +430,32 @@ export const isDisabled = (option: boolean | { disabled: boolean } | undefined):
   return option.disabled;
 };
 
+/* @conditional-compile-remove(call-readiness) */
+const isAndroidWebView = (environmentInfo?: EnvironmentInfo): boolean => {
+  const ua = navigator.userAgent || '';
+  return (
+    environmentInfo?.environment?.browser?.toLowerCase() === 'chrome webview' ||
+    (/Android/.test(ua) && /Version\/[\d.]+/.test(ua) && /wv/.test(ua))
+  );
+};
+
 /* @conditional-compile-remove(call-readiness) */
 /**
  * @returns Permissions state for the camera.
  */
-const queryCameraPermissionFromPermissionsAPI = async (): Promise<PermissionState | 'unsupported'> => {
+const queryCameraPermissionFromPermissionsAPI = async (
+  environmentInfo?: EnvironmentInfo
+): Promise<PermissionState | 'unsupported'> => {
+  // Android WebView does not support permissions API, nor does it throw an error when trying to access it,
+  // in actuality the API always returns 'prompt' which is not correct.
+  if (isAndroidWebView(environmentInfo)) {
+    return 'unsupported';
+  }
+
   try {
     return (await navigator.permissions.query({ name: 'camera' as PermissionName })).state;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (e) {
-    console.info('permissions API is not supported by browser', e);
     return 'unsupported';
   }
 };
@@ -447,11 +464,19 @@ const queryCameraPermissionFromPermissionsAPI = async (): Promise<PermissionStat
 /**
  * @returns Permissions state for the microphone.
  */
-const queryMicrophonePermissionFromPermissionsAPI = async (): Promise<PermissionState | 'unsupported'> => {
+const queryMicrophonePermissionFromPermissionsAPI = async (
+  environmentInfo?: EnvironmentInfo
+): Promise<PermissionState | 'unsupported'> => {
+  // Android WebView does not support permissions API, nor does it throw an error when trying to access it,
+  // in actuality the API always returns 'prompt' which is not correct.
+  if (isAndroidWebView(environmentInfo)) {
+    return 'unsupported';
+  }
+
   try {
     return (await navigator.permissions.query({ name: 'microphone' as PermissionName })).state;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (e) {
-    console.info('permissions API is not supported by browser', e);
     return 'unsupported';
   }
 };
@@ -465,15 +490,24 @@ const queryMicrophonePermissionFromPermissionsAPI = async (): Promise<Permission
  * @private
  */
 export const getDevicePermissionState = async (
+  environmentInfo: undefined | EnvironmentInfo,
   setVideoState: (state: PermissionState | 'unsupported') => void,
-  setAudioState: (state: PermissionState | 'unsupported') => void
+  setAudioState: (state: PermissionState | 'unsupported') => void,
+  previousVideoState: PermissionState | 'unsupported' | undefined,
+  previousAudioState: PermissionState | 'unsupported' | undefined
 ): Promise<void> => {
   const [cameraResult, microphoneResult] = await Promise.all([
-    queryCameraPermissionFromPermissionsAPI(),
-    queryMicrophonePermissionFromPermissionsAPI()
+    queryCameraPermissionFromPermissionsAPI(environmentInfo),
+    queryMicrophonePermissionFromPermissionsAPI(environmentInfo)
   ]);
-  setVideoState(cameraResult);
-  setAudioState(microphoneResult);
+
+  if (cameraResult !== previousVideoState) {
+    setVideoState(cameraResult);
+  }
+
+  if (microphoneResult !== previousAudioState) {
+    setAudioState(microphoneResult);
+  }
 };
 /* @conditional-compile-remove(unsupported-browser) */
 const isUnsupportedEnvironment = (

samples/CallWithChat/src/app/utils/localStorage.ts

@@ -12,22 +12,22 @@ export enum LocalStorageKeys {
  * Get display name from local storage.
  */
 export const getDisplayNameFromLocalStorage = (): string | null =>
-  window.localStorage.getItem(LocalStorageKeys.DisplayName);
+  window.localStorage?.getItem(LocalStorageKeys.DisplayName);
 
 /**
  * Save display name into local storage.
  */
 export const saveDisplayNameToLocalStorage = (displayName: string): void =>
-  window.localStorage.setItem(LocalStorageKeys.DisplayName, displayName);
+  window.localStorage?.setItem(LocalStorageKeys.DisplayName, displayName);
 
 /**
  * Get theme from local storage.
  */
 export const getThemeFromLocalStorage = (scopeId: string): string | null =>
-  window.localStorage.getItem(LocalStorageKeys.Theme + '_' + scopeId);
+  window.localStorage?.getItem(LocalStorageKeys.Theme + '_' + scopeId);
 
 /**
  * Save theme into local storage.
  */
 export const saveThemeToLocalStorage = (theme: string, scopeId: string): void =>
-  window.localStorage.setItem(LocalStorageKeys.Theme + '_' + scopeId, theme);
+  window.localStorage?.setItem(LocalStorageKeys.Theme + '_' + scopeId, theme);

samples/Calling/src/app/utils/localStorage.ts

@@ -12,22 +12,22 @@ export enum LocalStorageKeys {
  * Get display name from local storage.
  */
 export const getDisplayNameFromLocalStorage = (): string | null =>
-  window.localStorage.getItem(LocalStorageKeys.DisplayName);
+  window.localStorage?.getItem(LocalStorageKeys.DisplayName);
 
 /**
  * Save display name into local storage.
  */
 export const saveDisplayNameToLocalStorage = (displayName: string): void =>
-  window.localStorage.setItem(LocalStorageKeys.DisplayName, displayName);
+  window.localStorage?.setItem(LocalStorageKeys.DisplayName, displayName);
 
 /**
  * Get theme from local storage.
  */
 export const getThemeFromLocalStorage = (scopeId: string): string | null =>
-  window.localStorage.getItem(LocalStorageKeys.Theme + '_' + scopeId);
+  window.localStorage?.getItem(LocalStorageKeys.Theme + '_' + scopeId);
 
 /**
  * Save theme into local storage.
  */
 export const saveThemeToLocalStorage = (theme: string, scopeId: string): void =>
-  window.localStorage.setItem(LocalStorageKeys.Theme + '_' + scopeId, theme);
+  window.localStorage?.setItem(LocalStorageKeys.Theme + '_' + scopeId, theme);

samples/Chat/src/app/utils/localStorage.ts

@@ -12,22 +12,22 @@ export enum LocalStorageKeys {
  * Get display name from local storage.
  */
 export const getDisplayNameFromLocalStorage = (): string | null =>
-  window.localStorage.getItem(LocalStorageKeys.DisplayName);
+  window.localStorage?.getItem(LocalStorageKeys.DisplayName);
 
 /**
  * Save display name into local storage.
  */
 export const saveDisplayNameToLocalStorage = (displayName: string): void =>
-  window.localStorage.setItem(LocalStorageKeys.DisplayName, displayName);
+  window.localStorage?.setItem(LocalStorageKeys.DisplayName, displayName);
 
 /**
  * Get theme from local storage.
  */
 export const getThemeFromLocalStorage = (scopeId: string): string | null =>
-  window.localStorage.getItem(LocalStorageKeys.Theme + '_' + scopeId);
+  window.localStorage?.getItem(LocalStorageKeys.Theme + '_' + scopeId);
 
 /**
  * Save theme into local storage.
  */
 export const saveThemeToLocalStorage = (theme: string, scopeId: string): void =>
-  window.localStorage.setItem(LocalStorageKeys.Theme + '_' + scopeId, theme);
+  window.localStorage?.setItem(LocalStorageKeys.Theme + '_' + scopeId, theme);