Added a custom message when browser disabled camera

Author: dlymonkai

packages/camera-web/src/Camera/hooks/useUserMedia.ts

@@ -1,6 +1,6 @@
 import { useMonitoring } from '@monkvision/monitoring';
 import deepEqual from 'fast-deep-equal';
-import { RefObject, useCallback, useEffect, useState } from 'react';
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { PixelDimensions } from '@monkvision/types';
 import { isMobileDevice, useIsMounted, useObjectMemo } from '@monkvision/common';
 import { analyzeCameraDevices } from './utils';
@@ -211,17 +211,18 @@ export function useUserMedia(
   const [selectedCameraDeviceId, setSelectedCameraDeviceId] = useState<string | null>(null);
   const [lastConstraintsApplied, setLastConstraintsApplied] =
     useState<MediaStreamConstraints | null>(null);
+  const lastGetUserMediaTimeRef = useRef<number | null>(null);
   const { handleError } = useMonitoring();
   const isMounted = useIsMounted();
 
   const handleGetUserMediaError = (err: unknown, permissionState: PermissionState | null) => {
     let type = UserMediaErrorType.OTHER;
     if (err instanceof Error && err.name === 'NotAllowedError') {
       switch (permissionState) {
-        case 'denied':
+        case 'prompt':
           type = UserMediaErrorType.WEBPAGE_NOT_ALLOWED;
           break;
-        case 'granted':
+        case 'denied':
           type = UserMediaErrorType.BROWSER_NOT_ALLOWED;
           break;
         default:
@@ -302,9 +303,14 @@ export function useUserMedia(
 
       const effect = async () => {
         try {
+          lastGetUserMediaTimeRef.current = Date.now();
           await getUserMedia();
         } catch (err) {
-          const permissionState = (await getCameraPermissionState())?.state ?? null;
+          const isCameraPermissionDenied =
+            lastGetUserMediaTimeRef.current && Date.now() - lastGetUserMediaTimeRef.current < 100;
+          const permissionState = isCameraPermissionDenied
+            ? 'denied'
+            : (await getCameraPermissionState())?.state ?? null;
           if (err && isMounted()) {
             handleGetUserMediaError(err, permissionState);
             throw err;

packages/camera-web/test/Camera/hooks/useUserMedia.test.ts

@@ -149,11 +149,45 @@ describe('useUserMedia hook', () => {
     unmount();
   });
 
-  it('should return a NotAllowed error in case of camera permission error', async () => {
+  it('should return a UserMediaErrorType.BROWSER_NOT_ALLOWED error in case of immediate rejection', async () => {
     const videoRef = { current: {} } as RefObject<HTMLVideoElement>;
     const nativeError = new Error();
     nativeError.name = 'NotAllowedError';
     mockGetUserMedia({ createMock: () => jest.fn(() => Promise.reject(nativeError)) });
+    navigator.permissions.query = jest.fn(() =>
+      Promise.resolve({ state: 'denied' } as PermissionStatus),
+    );
+    const { result } = renderUseUserMedia({ constraints: {}, videoRef });
+    await waitFor(() => {
+      expect(result.current).toEqual({
+        getUserMedia: expect.any(Function),
+        stream: null,
+        dimensions: null,
+        error: {
+          type: UserMediaErrorType.BROWSER_NOT_ALLOWED,
+          nativeError,
+        },
+        isLoading: false,
+        retry: expect.any(Function),
+        availableCameraDevices: [],
+        selectedCameraDeviceId: null,
+      });
+    });
+  });
+
+  it('should return a UserMediaErrorType.NOT_ALLOWED error in case of camera permission error', async () => {
+    const videoRef = { current: {} } as RefObject<HTMLVideoElement>;
+    const nativeError = new Error();
+    nativeError.name = 'NotAllowedError';
+    mockGetUserMedia({
+      createMock: () =>
+        jest.fn(
+          () =>
+            new Promise((_resolve, reject) => {
+              setTimeout(() => reject(nativeError), 150);
+            }),
+        ),
+    });
     const { result, unmount } = renderUseUserMedia({ constraints: {}, videoRef });
     await waitFor(() => {
       expect(result.current).toEqual({
@@ -173,13 +207,21 @@ describe('useUserMedia hook', () => {
     unmount();
   });
 
-  it('should return a NotAllowed for webpage error in case of camera permission error', async () => {
+  it('should return a UserMediaErrorType.WEBPAGE_NOT_ALLOWED for webpage error in case of camera permission error', async () => {
     const videoRef = { current: {} } as RefObject<HTMLVideoElement>;
     const nativeError = new Error();
     nativeError.name = 'NotAllowedError';
-    mockGetUserMedia({ createMock: () => jest.fn(() => Promise.reject(nativeError)) });
+    mockGetUserMedia({
+      createMock: () =>
+        jest.fn(
+          () =>
+            new Promise((_resolve, reject) => {
+              setTimeout(() => reject(nativeError), 150);
+            }),
+        ),
+    });
     navigator.permissions.query = jest.fn(() =>
-      Promise.resolve({ state: 'granted' } as PermissionStatus),
+      Promise.resolve({ state: 'prompt' } as PermissionStatus),
     );
     const { result } = renderUseUserMedia({ constraints: {}, videoRef });
     await waitFor(() => {
@@ -188,7 +230,7 @@ describe('useUserMedia hook', () => {
         stream: null,
         dimensions: null,
         error: {
-          type: UserMediaErrorType.BROWSER_NOT_ALLOWED,
+          type: UserMediaErrorType.WEBPAGE_NOT_ALLOWED,
           nativeError,
         },
         isLoading: false,
@@ -199,11 +241,19 @@ describe('useUserMedia hook', () => {
     });
   });
 
-  it('should return a NotAllowed for browser error in case of camera permission error', async () => {
+  it('should return a UserMediaErrorType.BROWSER_NOT_ALLOWED for browser error in case of camera permission error', async () => {
     const videoRef = { current: {} } as RefObject<HTMLVideoElement>;
     const nativeError = new Error();
     nativeError.name = 'NotAllowedError';
-    mockGetUserMedia({ createMock: () => jest.fn(() => Promise.reject(nativeError)) });
+    mockGetUserMedia({
+      createMock: () =>
+        jest.fn(
+          () =>
+            new Promise((_resolve, reject) => {
+              setTimeout(() => reject(nativeError), 150);
+            }),
+        ),
+    });
     navigator.permissions.query = jest.fn(() =>
       Promise.resolve({ state: 'denied' } as PermissionStatus),
     );
@@ -214,7 +264,7 @@ describe('useUserMedia hook', () => {
         stream: null,
         dimensions: null,
         error: {
-          type: UserMediaErrorType.WEBPAGE_NOT_ALLOWED,
+          type: UserMediaErrorType.BROWSER_NOT_ALLOWED,
           nativeError,
         },
         isLoading: false,