@monkvision/camera-web 4.0.10 → 4.0.12

package/lib/Camera/hooks/useUserMedia.d.ts

@@ -26,6 +26,17 @@ export declare enum UserMediaErrorType {
     /**
      * The camera stream couldn't be fetched because the web page does not have the permissions to access the camera.
      */
+    WEBPAGE_NOT_ALLOWED = "webpage_not_allowed",
+    /**
+     * The camera stream couldn't be fetched because the camera permissions are not granted to the browser in the device
+     * settings.
+     */
+    BROWSER_NOT_ALLOWED = "browser_not_allowed",
+    /**
+     * The camera stream couldn't be fetched, but the app is unable to know if it is because of the website or
+     * the browser not being allowed to have camera permission access. This error is usually returned on Firefox and
+     * other similar browsers where `navigator.permissions.query` is not supported for videoinput devices.
+     */
     NOT_ALLOWED = "not_allowed",
     /**
      * The camera stream was successfully fetched, but it could be processed. This error can happen for the following

package/lib/Camera/hooks/useUserMedia.js

@@ -108,6 +108,17 @@ var UserMediaErrorType;
     /**
      * The camera stream couldn't be fetched because the web page does not have the permissions to access the camera.
      */
+    UserMediaErrorType["WEBPAGE_NOT_ALLOWED"] = "webpage_not_allowed";
+    /**
+     * The camera stream couldn't be fetched because the camera permissions are not granted to the browser in the device
+     * settings.
+     */
+    UserMediaErrorType["BROWSER_NOT_ALLOWED"] = "browser_not_allowed";
+    /**
+     * The camera stream couldn't be fetched, but the app is unable to know if it is because of the website or
+     * the browser not being allowed to have camera permission access. This error is usually returned on Firefox and
+     * other similar browsers where `navigator.permissions.query` is not supported for videoinput devices.
+     */
     UserMediaErrorType["NOT_ALLOWED"] = "not_allowed";
     /**
      * The camera stream was successfully fetched, but it could be processed. This error can happen for the following
@@ -192,6 +203,7 @@ function useUserMedia(constraints, videoRef) {
     var _g = (0, react_1.useState)(null), lastConstraintsApplied = _g[0], setLastConstraintsApplied = _g[1];
     var handleError = (0, monitoring_1.useMonitoring)().handleError;
     var isActive = (0, react_1.useRef)(true);
+    var cameraPermissionState = null;
     (0, react_1.useEffect)(function () {
         return function () {
             isActive.current = false;
@@ -200,7 +212,16 @@ function useUserMedia(constraints, videoRef) {
     var handleGetUserMediaError = function (err) {
         var type = UserMediaErrorType.OTHER;
         if (err instanceof Error && err.name === 'NotAllowedError') {
-            type = UserMediaErrorType.NOT_ALLOWED;
+            switch (cameraPermissionState) {
+                case 'denied':
+                    type = UserMediaErrorType.WEBPAGE_NOT_ALLOWED;
+                    break;
+                case 'granted':
+                    type = UserMediaErrorType.BROWSER_NOT_ALLOWED;
+                    break;
+                default:
+                    type = UserMediaErrorType.NOT_ALLOWED;
+            }
         }
         else if (err instanceof Error &&
             Object.values(InvalidStreamErrorName).includes(err.name)) {
@@ -231,11 +252,10 @@ function useUserMedia(constraints, videoRef) {
         }
         setLastConstraintsApplied(constraints);
         var getUserMedia = function () { return __awaiter(_this, void 0, void 0, function () {
-            var deviceDetails, updatedConstraints, str, err_1;
+            var deviceDetails, updatedConstraints, str;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 3, , 4]);
                         setIsLoading(true);
                         if (stream) {
                             stream.removeEventListener('inactive', onStreamInactive);
@@ -256,19 +276,47 @@ function useUserMedia(constraints, videoRef) {
                             setAvailableCameraDevices(deviceDetails.availableDevices);
                             setSelectedCameraDeviceId(getStreamDeviceId(str));
                         }
-                        return [3 /*break*/, 4];
-                    case 3:
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        var getCameraPermissionState = function () { return __awaiter(_this, void 0, void 0, function () {
+            var err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, navigator.permissions.query({
+                                name: 'camera',
+                            })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                    case 2:
                         err_1 = _a.sent();
-                        if (isActive.current) {
-                            handleGetUserMediaError(err_1);
-                            throw err_1;
-                        }
-                        return [3 /*break*/, 4];
-                    case 4: return [2 /*return*/];
+                        return [2 /*return*/, null];
+                    case 3: return [2 /*return*/];
                 }
             });
         }); };
-        getUserMedia().catch(handleError);
+        getUserMedia()
+            .catch(function (err) {
+            return Promise.all([err, getCameraPermissionState()]);
+        })
+            .then(function (result) {
+            if (!result) {
+                return Promise.all([null, getCameraPermissionState()]);
+            }
+            return result;
+        })
+            .then(function (_a) {
+            var _b;
+            var err = _a[0], cameraPermission = _a[1];
+            cameraPermissionState = (_b = cameraPermission === null || cameraPermission === void 0 ? void 0 : cameraPermission.state) !== null && _b !== void 0 ? _b : null;
+            if (err && isActive.current) {
+                handleGetUserMediaError(err);
+                throw err;
+            }
+        })
+            .catch(handleError);
     }, [constraints, stream, error, isLoading, lastConstraintsApplied]);
     (0, react_1.useEffect)(function () {
         if (stream && videoRef.current) {

package/lib/SimpleCameraHUD/SimpleCameraHUD.js

@@ -23,7 +23,7 @@ var utils_1 = require("../utils");
  * The basic Camera HUD provided by the Monk camera package. It displays a button to take pictures, as well as error
  * messages (and a retry button) in case of errors with the Camera stream.
  */
-exports.SimpleCameraHUD = (0, common_1.i18nWrap)(function (_a) {
+exports.SimpleCameraHUD = (0, common_1.i18nWrap)(function SimpleCameraHUD(_a) {
     var _b;
     var cameraPreview = _a.cameraPreview, handle = _a.handle, lang = _a.lang;
     (0, common_1.useI18nSync)(lang);

package/lib/utils/errors.utils.js

@@ -15,6 +15,20 @@ function getCameraErrorLabel(error) {
                 de: 'Die Kameravorschau ist nicht verfügbar, da für die Seite kein Kamerazugriff gewährt wurde.',
                 nl: 'De cameravoorbeeld is niet beschikbaar omdat er geen toegang tot de camera is verleend aan de pagina.',
             };
+        case Camera_1.UserMediaErrorType.WEBPAGE_NOT_ALLOWED:
+            return {
+                en: 'Unable to get camera access. Make sure to press “Allow” when asked to grant camera permission for this web page.',
+                fr: "Impossible d'accéder à la caméra. Veuillez vous assurer d'appuyer sur “Autoriser” lorsqu'on vous propose d'autoriser l'accès à la caméra pour cette page web.",
+                de: 'Die Kamera kann nicht zugelassen werden. Stellen Sie sicher, dass Sie auf „Zulassen“ drücken, wenn Sie aufgefordert werden, die Kamera für diese Webseite zuzulassen.',
+                nl: 'Kan geen toestemming krijgen voor de camera. Zorg ervoor dat u op “Toestaan” drukt wanneer u wordt gevraagd om toestemming te geven voor het gebruik van de camera op deze webpagina.',
+            };
+        case Camera_1.UserMediaErrorType.BROWSER_NOT_ALLOWED:
+            return {
+                en: "Unable to get camera access. Make sure to grant camera access to your current internet browser in your device's settings.",
+                fr: "Impossible d'accéder à la caméra. Veuillez vous assurer d'autoriser l'accès à la caméra pour ce navigateur internet dans les paramètres de votre téléphone.",
+                de: 'Der Zugriff auf die Kamera ist nicht möglich. Stellen Sie sicher, dass Sie in den Einstellungen Ihres Geräts den Kamerazugriff für Ihren aktuellen Internetbrowser zulassen.',
+                nl: 'Kan geen cameratoegang krijgen. Zorg ervoor dat u de camera toegang verleent tot uw huidige internet browser in de instellingen van uw apparaat.',
+            };
         case Camera_1.UserMediaErrorType.STREAM_INACTIVE:
             return {
                 en: 'The camera video stream was closed unexpectedly.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monkvision/camera-web",
-  "version": "4.0.10",
+  "version": "4.0.12",
   "license": "BSD-3-Clause-Clear",
   "packageManager": "yarn@3.2.4",
   "description": "MonkJs camera package for React (web) used to display a camera preview and take pictures",
@@ -28,9 +28,9 @@
     "lint:fix": "yarn run prettier:fix && yarn run eslint:fix"
   },
   "dependencies": {
-    "@monkvision/common": "4.0.10",
-    "@monkvision/common-ui-web": "4.0.10",
-    "@monkvision/monitoring": "4.0.10",
+    "@monkvision/common": "4.0.12",
+    "@monkvision/common-ui-web": "4.0.12",
+    "@monkvision/monitoring": "4.0.12",
     "fast-deep-equal": "^3.1.3",
     "i18next": "^23.4.5",
     "react-i18next": "^13.2.0"
@@ -42,13 +42,13 @@
     "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
-    "@monkvision/eslint-config-base": "4.0.10",
-    "@monkvision/eslint-config-typescript": "4.0.10",
-    "@monkvision/eslint-config-typescript-react": "4.0.10",
-    "@monkvision/jest-config": "4.0.10",
-    "@monkvision/prettier-config": "4.0.10",
-    "@monkvision/test-utils": "4.0.10",
-    "@monkvision/typescript-config": "4.0.10",
+    "@monkvision/eslint-config-base": "4.0.12",
+    "@monkvision/eslint-config-typescript": "4.0.12",
+    "@monkvision/eslint-config-typescript-react": "4.0.12",
+    "@monkvision/jest-config": "4.0.12",
+    "@monkvision/prettier-config": "4.0.12",
+    "@monkvision/test-utils": "4.0.12",
+    "@monkvision/typescript-config": "4.0.12",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/fscreen": "^1.0.1",
@@ -90,5 +90,5 @@
     "url": "https://github.com/monkvision/monkjs/issues"
   },
   "homepage": "https://github.com/monkvision/monkjs",
-  "gitHead": "e3e512ea9f21560bd9625c32749d5a56898bed72"
+  "gitHead": "ea97b32b05c280175bbeda6b6af10f1cf1a192bf"
 }