@monkvision/camera-web 4.5.6 → 5.0.0

package/README.md

@@ -172,11 +172,26 @@ Main component exported by this package, displays a Camera preview and the given
 Object passed to Camera HUD components that is used to control the camera
 
 ### Properties
-| Prop              | Type                        | Description                                                                                              |
-|-------------------|-----------------------------|----------------------------------------------------------------------------------------------------------|
-| takePicture       | () => Promise<MonkPicture>  | A function that you can call to ask the camera to take a picture.                                        |
-| error             | UserMediaError &#124; null  | The error details if there has been an error when fetching the camera stream.                            |
-| isLoading         | boolean                     | Boolean indicating if the camera preview is loading.                                                     |
-| retry             | () => void                  | A function to retry the camera stream fetching in case of error.                                         |
-| dimensions        | PixelDimensions &#124; null | The Camera stream dimensions (`null` if there is no stream).                                             |
-| previewDimensions | PixelDimensions &#124; null | The effective video dimensions of the Camera stream on the client screen (`null` if there is no stream). |
+| Prop              | Type                                       | Description                                                                                                                                                                                |
+|-------------------|--------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| takePicture       | () => Promise<MonkPicture>                 | A function that you can call to ask the camera to take a picture.                                                                                                                          |
+| getImageData      | () => ImageData                            | Function used to take a raw screenshot of the camera stream for manual image processing. Performance tracking is disabled for this method (only available using the `takePicture` method). |
+| compressImage     | (image: ImageData) => Promise<MonkPicture> | Function used to compress raw image data into a MonkPicture object. Performance tracking is disabled for this method (only available using the `takePicture` method).                      |
+| error             | UserMediaError &#124; null                 | The error details if there has been an error when fetching the camera stream.                                                                                                              |
+| isLoading         | boolean                                    | Boolean indicating if the camera preview is loading.                                                                                                                                       |
+| retry             | () => void                                 | A function to retry the camera stream fetching in case of error.                                                                                                                           |
+| dimensions        | PixelDimensions &#124; null                | The Camera stream dimensions (`null` if there is no stream).                                                                                                                               |
+| previewDimensions | PixelDimensions &#124; null                | The effective video dimensions of the Camera stream on the client screen (`null` if there is no stream).                                                                                   |
+
+
+## Hooks
+### useCameraPermission
+```tsx
+import { useCameraPermission } from '@monkvision/camera-web';
+
+function TestComponent() {
+  const { requestCameraPermission } = useCameraPermission();
+  return <button onClick={useCameraPermission}>Request Camera Permissions</button>;
+}
+```
+Custom hook that can be used to request the camera permissions on the current device.

package/lib/Camera/Camera.js

@@ -56,8 +56,12 @@ function Camera(_a) {
     }), takePicture = _h.takePicture, isTakePictureLoading = _h.isLoading;
     var isLoading = isPreviewLoading || isTakePictureLoading;
     var cameraPreview = (0, react_1.useMemo)(function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: Camera_styles_1.styles['container'] }, { children: [(0, jsx_runtime_1.jsx)("video", { style: Camera_styles_1.styles['cameraPreview'], ref: videoRef, autoPlay: true, playsInline: true, controls: false, muted: true, "data-testid": 'camera-video-preview' }), (0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, style: Camera_styles_1.styles['cameraCanvas'], "data-testid": 'camera-canvas' })] }))); }, []);
+    var getImageData = (0, react_1.useCallback)(function () { return takeScreenshot(); }, [takeScreenshot]);
+    var compressImage = (0, react_1.useCallback)(function (image) { return compress(image); }, [compress]);
     return HUDComponent ? ((0, jsx_runtime_1.jsx)(HUDComponent, __assign({ handle: {
             takePicture: takePicture,
+            getImageData: getImageData,
+            compressImage: compressImage,
             error: error,
             retry: retry,
             isLoading: isLoading,

package/lib/Camera/CameraHUD.types.d.ts

@@ -9,6 +9,25 @@ export interface CameraHandle {
      * A function that you can call to ask the camera to take a picture.
      */
     takePicture: () => Promise<MonkPicture>;
+    /**
+     * A function that you can call to get the current raw image data displayed on the camera stream. You can use this
+     * function if you need to apply a custom procesing to the image pixels and don't want the automatic compression logic
+     * of the Camera component. You can use the `handle.compressImage` method to compress the raw image data using the
+     * Camera component's compression configuration. If you just want to take a picture normally, use the
+     * `handle.takePicture` method.
+     *
+     * Note: This method does NOT use any monitoring tracking. The only way to enable monitoring is by taking pictures via
+     * the `handle.takePicture` method.
+     */
+    getImageData: () => ImageData;
+    /**
+     * A function that you can call to compress a raw ImageData (taken using the `handle.compressImage` function) into a
+     * MonkPicture object. This function will use the compression options passed as parameters to the Camera component.
+     *
+     * Note: This method does NOT use any monitoring tracking. The only way to enable monitoring is by taking pictures via
+     * the `handle.takePicture` method.
+     */
+    compressImage: (image: ImageData) => Promise<MonkPicture>;
     /**
      * The error details if there has been an error when fetching the camera stream.
      */

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

@@ -23,7 +23,7 @@ export interface CameraScreenshotConfig {
  *
  * @return A ImageData object that contains the raw pixel's data.
  */
-export type TakeScreenshotFunction = (monitoring: InternalCameraMonitoringConfig) => ImageData;
+export type TakeScreenshotFunction = (monitoring?: InternalCameraMonitoringConfig) => ImageData;
 /**
  * Custom hook used to take screenshots of a video element. This hook is aimed to be used in pair with a `<canvas>`
  * element referenced by the returned ref.

package/lib/Camera/hooks/useCameraScreenshot.js

@@ -16,10 +16,10 @@ var react_1 = require("react");
 var monitoring_1 = require("@monkvision/monitoring");
 var monitoring_2 = require("../monitoring");
 var utils_1 = require("./utils");
-function startScreenshotMeasurement(monitoring, dimensions) {
+function startScreenshotMeasurement(dimensions, monitoring) {
     var _a;
     var _b, _c;
-    (_b = monitoring.transaction) === null || _b === void 0 ? void 0 : _b.startMeasurement(monitoring_2.ScreenshotMeasurement.operation, {
+    (_b = monitoring === null || monitoring === void 0 ? void 0 : monitoring.transaction) === null || _b === void 0 ? void 0 : _b.startMeasurement(monitoring_2.ScreenshotMeasurement.operation, {
         data: monitoring.data,
         tags: __assign((_a = {}, _a[monitoring_2.ScreenshotMeasurement.outputResolutionTagName] = dimensions
             ? "".concat(dimensions.width, "x").concat(dimensions.height)
@@ -27,14 +27,14 @@ function startScreenshotMeasurement(monitoring, dimensions) {
         description: monitoring_2.ScreenshotMeasurement.description,
     });
 }
-function stopScreenshotMeasurement(monitoringConfig, status) {
+function stopScreenshotMeasurement(status, monitoring) {
     var _a;
-    (_a = monitoringConfig.transaction) === null || _a === void 0 ? void 0 : _a.stopMeasurement(monitoring_2.ScreenshotMeasurement.operation, status);
+    (_a = monitoring === null || monitoring === void 0 ? void 0 : monitoring.transaction) === null || _a === void 0 ? void 0 : _a.stopMeasurement(monitoring_2.ScreenshotMeasurement.operation, status);
 }
-function setScreeshotSizeMeasurement(monitoring, image) {
+function setScreeshotSizeMeasurement(image, monitoring) {
     var _a;
     var imageSizeBytes = image.data.length;
-    (_a = monitoring.transaction) === null || _a === void 0 ? void 0 : _a.setMeasurement(monitoring_2.ScreenshotSizeMeasurement.name, imageSizeBytes, 'byte');
+    (_a = monitoring === null || monitoring === void 0 ? void 0 : monitoring.transaction) === null || _a === void 0 ? void 0 : _a.setMeasurement(monitoring_2.ScreenshotSizeMeasurement.name, imageSizeBytes, 'byte');
 }
 /**
  * Custom hook used to take screenshots of a video element. This hook is aimed to be used in pair with a `<canvas>`
@@ -43,22 +43,22 @@ function setScreeshotSizeMeasurement(monitoring, image) {
 function useCameraScreenshot(_a) {
     var videoRef = _a.videoRef, canvasRef = _a.canvasRef, dimensions = _a.dimensions;
     return (0, react_1.useCallback)(function (monitoring) {
-        startScreenshotMeasurement(monitoring, dimensions);
+        startScreenshotMeasurement(dimensions, monitoring);
         var context = (0, utils_1.getCanvasHandle)(canvasRef, function () {
-            return stopScreenshotMeasurement(monitoring, monitoring_1.TransactionStatus.UNKNOWN_ERROR);
+            return stopScreenshotMeasurement(monitoring_1.TransactionStatus.UNKNOWN_ERROR, monitoring);
         }).context;
         if (!dimensions) {
-            stopScreenshotMeasurement(monitoring, monitoring_1.TransactionStatus.UNKNOWN_ERROR);
+            stopScreenshotMeasurement(monitoring_1.TransactionStatus.UNKNOWN_ERROR, monitoring);
             throw new Error('Unable to take a picture because the video stream has no dimension.');
         }
         if (!videoRef.current) {
-            stopScreenshotMeasurement(monitoring, monitoring_1.TransactionStatus.UNKNOWN_ERROR);
+            stopScreenshotMeasurement(monitoring_1.TransactionStatus.UNKNOWN_ERROR, monitoring);
             throw new Error('Unable to take a picture because the video element is null.');
         }
         context.drawImage(videoRef.current, 0, 0, dimensions.width, dimensions.height);
         var imageData = context.getImageData(0, 0, dimensions.width, dimensions.height);
-        setScreeshotSizeMeasurement(monitoring, imageData);
-        stopScreenshotMeasurement(monitoring, monitoring_1.TransactionStatus.OK);
+        setScreeshotSizeMeasurement(imageData, monitoring);
+        stopScreenshotMeasurement(monitoring_1.TransactionStatus.OK, monitoring);
         return imageData;
     }, [dimensions]);
 }

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

@@ -17,7 +17,7 @@ export interface UseCompressionParams {
 /**
  * Function used to compress images and create DataURI objects.
  */
-export type CompressFunction = (image: ImageData, monitoring: InternalCameraMonitoringConfig) => Promise<MonkPicture>;
+export type CompressFunction = (image: ImageData, monitoring?: InternalCameraMonitoringConfig) => Promise<MonkPicture>;
 /**
  * Custom hook used to manage the camera <canvas> element used to take video screenshots and encode images.
  */

package/lib/Camera/hooks/useCompression.js

@@ -52,25 +52,25 @@ var monitoring_1 = require("@monkvision/monitoring");
 var react_1 = require("react");
 var monitoring_2 = require("../monitoring");
 var utils_1 = require("./utils");
-function startCompressionMeasurement(monitoring, options, image) {
+function startCompressionMeasurement(options, image, monitoring) {
     var _a;
     var _b, _c;
-    (_b = monitoring.transaction) === null || _b === void 0 ? void 0 : _b.startMeasurement(monitoring_2.CompressionMeasurement.operation, {
-        data: monitoring.data,
-        tags: __assign((_a = {}, _a[monitoring_2.CompressionMeasurement.formatTagName] = options.format, _a[monitoring_2.CompressionMeasurement.qualityTagName] = options.quality, _a[monitoring_2.CompressionMeasurement.dimensionsTagName] = "".concat(image.width, "x").concat(image.height), _a), ((_c = monitoring.tags) !== null && _c !== void 0 ? _c : {})),
+    (_b = monitoring === null || monitoring === void 0 ? void 0 : monitoring.transaction) === null || _b === void 0 ? void 0 : _b.startMeasurement(monitoring_2.CompressionMeasurement.operation, {
+        data: monitoring === null || monitoring === void 0 ? void 0 : monitoring.data,
+        tags: __assign((_a = {}, _a[monitoring_2.CompressionMeasurement.formatTagName] = options.format, _a[monitoring_2.CompressionMeasurement.qualityTagName] = options.quality, _a[monitoring_2.CompressionMeasurement.dimensionsTagName] = "".concat(image.width, "x").concat(image.height), _a), ((_c = monitoring === null || monitoring === void 0 ? void 0 : monitoring.tags) !== null && _c !== void 0 ? _c : {})),
         description: monitoring_2.CompressionMeasurement.description,
     });
 }
-function stopCompressionMeasurement(monitoring, status) {
+function stopCompressionMeasurement(status, monitoring) {
     var _a;
-    (_a = monitoring.transaction) === null || _a === void 0 ? void 0 : _a.stopMeasurement(monitoring_2.CompressionMeasurement.operation, status);
+    (_a = monitoring === null || monitoring === void 0 ? void 0 : monitoring.transaction) === null || _a === void 0 ? void 0 : _a.stopMeasurement(monitoring_2.CompressionMeasurement.operation, status);
 }
-function setCustomMeasurements(monitoring, image, picture) {
+function setCustomMeasurements(image, picture, monitoring) {
     var _a, _b;
     var imageSizeBytes = image.data.length;
     var pictureSizeBytes = picture.blob.size;
-    (_a = monitoring.transaction) === null || _a === void 0 ? void 0 : _a.setMeasurement(monitoring_2.CompressionSizeRatioMeasurement.name, pictureSizeBytes / imageSizeBytes, 'ratio');
-    (_b = monitoring.transaction) === null || _b === void 0 ? void 0 : _b.setMeasurement(monitoring_2.PictureSizeMeasurement.name, pictureSizeBytes, 'byte');
+    (_a = monitoring === null || monitoring === void 0 ? void 0 : monitoring.transaction) === null || _a === void 0 ? void 0 : _a.setMeasurement(monitoring_2.CompressionSizeRatioMeasurement.name, pictureSizeBytes / imageSizeBytes, 'ratio');
+    (_b = monitoring === null || monitoring === void 0 ? void 0 : monitoring.transaction) === null || _b === void 0 ? void 0 : _b.setMeasurement(monitoring_2.PictureSizeMeasurement.name, pictureSizeBytes, 'byte');
 }
 function compressUsingBrowser(image, canvasRef, options) {
     var _a = (0, utils_1.getCanvasHandle)(canvasRef), canvas = _a.canvas, context = _a.context;
@@ -103,19 +103,19 @@ function useCompression(_a) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    startCompressionMeasurement(monitoring, options, image);
+                    startCompressionMeasurement(options, image, monitoring);
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
                     return [4 /*yield*/, compressUsingBrowser(image, canvasRef, options)];
                 case 2:
                     picture = _a.sent();
-                    setCustomMeasurements(monitoring, image, picture);
-                    stopCompressionMeasurement(monitoring, monitoring_1.TransactionStatus.OK);
+                    setCustomMeasurements(image, picture, monitoring);
+                    stopCompressionMeasurement(monitoring_1.TransactionStatus.OK, monitoring);
                     return [2 /*return*/, picture];
                 case 3:
                     err_1 = _a.sent();
-                    stopCompressionMeasurement(monitoring, monitoring_1.TransactionStatus.UNKNOWN_ERROR);
+                    stopCompressionMeasurement(monitoring_1.TransactionStatus.UNKNOWN_ERROR, monitoring);
                     throw err_1;
                 case 4: return [2 /*return*/];
             }

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

@@ -82,6 +82,10 @@ export interface UserMediaError {
  * @see useUserMedia
  */
 export interface UserMediaResult {
+    /**
+     * The getUserMedia function that can be used to fetch the stream data manually if no videoRef is passed.
+     */
+    getUserMedia: () => Promise<MediaStream>;
     /**
      * The resulting video stream. The stream can be null when not initialized or in case of an error.
      */
@@ -117,17 +121,19 @@ export interface UserMediaResult {
 /**
  * React hook that wraps the `navigator.mediaDevices.getUserMedia` browser function in order to add React logic layers
  * and utility tools :
- * - Creates an effect for `getUserMedia` that will be run everytime some state parameters are updated.
+ * - Creates an effect for `getUserMedia` that will be run everytime some state parameters are updated (the effect is
+ * run only if the videoRef is passed, if not, the `getUserMedia` function must be called manually).
  * - Will call `track.applyConstraints` when the video contstraints are updated in order to update the video stream.
  * - Makes sure that the `getUserMedia` is only called when it needs to be using memoized state.
  * - Provides various utilities such as error catching, loading information and a retry on failure feature.
  *
  * @param constraints The same media constraints you would pass to the `getUserMedia` function. Note that this hook has
  * been designed for video only, so audio constraints could provoke unexpected behaviour.
- * @param videoRef The ref to the video element displaying the camera preview stream.
+ * @param videoRef The ref to the video element displaying the camera preview stream. If the ref is not passed, the
+ * effect will not automatically be called.
  * @return The result of this hook contains the resulting video stream, an error object if there has been an error, a
  * loading indicator and a retry function that tries to get a camera stream again. See the `UserMediaResult` interface
  * for more information.
  * @see UserMediaResult
  */
-export declare function useUserMedia(constraints: MediaStreamConstraints, videoRef: RefObject<HTMLVideoElement>): UserMediaResult;
+export declare function useUserMedia(constraints: MediaStreamConstraints, videoRef: RefObject<HTMLVideoElement> | null): UserMediaResult;

package/lib/Camera/hooks/useUserMedia.js

@@ -179,14 +179,16 @@ function getStreamDimensions(stream, checkOrientation) {
 /**
  * React hook that wraps the `navigator.mediaDevices.getUserMedia` browser function in order to add React logic layers
  * and utility tools :
- * - Creates an effect for `getUserMedia` that will be run everytime some state parameters are updated.
+ * - Creates an effect for `getUserMedia` that will be run everytime some state parameters are updated (the effect is
+ * run only if the videoRef is passed, if not, the `getUserMedia` function must be called manually).
  * - Will call `track.applyConstraints` when the video contstraints are updated in order to update the video stream.
  * - Makes sure that the `getUserMedia` is only called when it needs to be using memoized state.
  * - Provides various utilities such as error catching, loading information and a retry on failure feature.
  *
  * @param constraints The same media constraints you would pass to the `getUserMedia` function. Note that this hook has
  * been designed for video only, so audio constraints could provoke unexpected behaviour.
- * @param videoRef The ref to the video element displaying the camera preview stream.
+ * @param videoRef The ref to the video element displaying the camera preview stream. If the ref is not passed, the
+ * effect will not automatically be called.
  * @return The result of this hook contains the resulting video stream, an error object if there has been an error, a
  * loading indicator and a retry function that tries to get a camera stream again. See the `UserMediaResult` interface
  * for more information.
@@ -202,17 +204,11 @@ function useUserMedia(constraints, videoRef) {
     var _f = (0, react_1.useState)(null), selectedCameraDeviceId = _f[0], setSelectedCameraDeviceId = _f[1];
     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;
-        };
-    }, []);
-    var handleGetUserMediaError = function (err) {
+    var isMounted = (0, common_1.useIsMounted)();
+    var handleGetUserMediaError = function (err, permissionState) {
         var type = UserMediaErrorType.OTHER;
         if (err instanceof Error && err.name === 'NotAllowedError') {
-            switch (cameraPermissionState) {
+            switch (permissionState) {
                 case 'denied':
                     type = UserMediaErrorType.WEBPAGE_NOT_ALLOWED;
                     break;
@@ -232,11 +228,13 @@ function useUserMedia(constraints, videoRef) {
         setIsLoading(false);
     };
     var onStreamInactive = function () {
-        setError({
-            type: UserMediaErrorType.STREAM_INACTIVE,
-            nativeError: new Error('The camera stream was closed.'),
-        });
-        setIsLoading(false);
+        if (isMounted()) {
+            setError({
+                type: UserMediaErrorType.STREAM_INACTIVE,
+                nativeError: new Error('The camera stream was closed.'),
+            });
+            setIsLoading(false);
+        }
     };
     var retry = (0, react_1.useCallback)(function () {
         if (error && !isLoading) {
@@ -246,89 +244,98 @@ function useUserMedia(constraints, videoRef) {
             setLastConstraintsApplied(null);
         }
     }, [error, isLoading]);
-    (0, react_1.useEffect)(function () {
-        if (error || isLoading || (0, fast_deep_equal_1.default)(lastConstraintsApplied, constraints)) {
-            return;
-        }
-        setLastConstraintsApplied(constraints);
-        var getUserMedia = function () { return __awaiter(_this, void 0, void 0, function () {
-            var deviceDetails, updatedConstraints, str;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        setIsLoading(true);
-                        if (stream) {
-                            stream.removeEventListener('inactive', onStreamInactive);
-                            stream.getTracks().forEach(function (track) { return track.stop(); });
-                        }
-                        return [4 /*yield*/, (0, utils_1.analyzeCameraDevices)(constraints)];
-                    case 1:
-                        deviceDetails = _a.sent();
-                        updatedConstraints = __assign(__assign({}, constraints), { video: __assign(__assign({}, (constraints ? constraints.video : {})), { deviceId: { exact: deviceDetails.validDeviceIds } }) });
-                        return [4 /*yield*/, navigator.mediaDevices.getUserMedia(updatedConstraints)];
-                    case 2:
-                        str = _a.sent();
-                        str === null || str === void 0 ? void 0 : str.addEventListener('inactive', onStreamInactive);
-                        if (isActive.current) {
-                            setStream(str);
-                            setDimensions(getStreamDimensions(str, true));
-                            setIsLoading(false);
-                            setAvailableCameraDevices(deviceDetails.availableDevices);
-                            setSelectedCameraDeviceId(getStreamDeviceId(str));
-                        }
-                        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();
-                        return [2 /*return*/, null];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); };
-        getUserMedia()
-            .catch(function (err) {
-            return Promise.all([err, getCameraPermissionState()]);
-        })
-            .then(function (result) {
-            if (!result) {
-                return Promise.all([null, getCameraPermissionState()]);
+    var getUserMedia = (0, react_1.useCallback)(function () { return __awaiter(_this, void 0, void 0, function () {
+        var deviceDetails, updatedConstraints, str;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    if (stream) {
+                        stream.removeEventListener('inactive', onStreamInactive);
+                        stream.getTracks().forEach(function (track) { return track.stop(); });
+                    }
+                    return [4 /*yield*/, (0, utils_1.analyzeCameraDevices)(constraints)];
+                case 1:
+                    deviceDetails = _a.sent();
+                    updatedConstraints = __assign(__assign({}, constraints), { video: __assign(__assign({}, (constraints ? constraints.video : {})), { deviceId: { exact: deviceDetails.validDeviceIds } }) });
+                    return [4 /*yield*/, navigator.mediaDevices.getUserMedia(updatedConstraints)];
+                case 2:
+                    str = _a.sent();
+                    str === null || str === void 0 ? void 0 : str.addEventListener('inactive', onStreamInactive);
+                    if (isMounted()) {
+                        setStream(str);
+                        setDimensions(getStreamDimensions(str, true));
+                        setIsLoading(false);
+                        setAvailableCameraDevices(deviceDetails.availableDevices);
+                        setSelectedCameraDeviceId(getStreamDeviceId(str));
+                    }
+                    return [2 /*return*/, str];
+            }
+        });
+    }); }, [stream, constraints]);
+    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();
+                    return [2 /*return*/, null];
+                case 3: return [2 /*return*/];
             }
-            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;
+        });
+    }); };
+    (0, react_1.useEffect)(function () {
+        if (videoRef) {
+            if (error || isLoading || (0, fast_deep_equal_1.default)(lastConstraintsApplied, constraints)) {
+                return;
             }
-        })
-            .catch(handleError);
-    }, [constraints, stream, error, isLoading, lastConstraintsApplied]);
+            setLastConstraintsApplied(constraints);
+            var effect = function () { return __awaiter(_this, void 0, void 0, function () {
+                var err_2, permissionState;
+                var _a, _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            _c.trys.push([0, 2, , 4]);
+                            return [4 /*yield*/, getUserMedia()];
+                        case 1:
+                            _c.sent();
+                            return [3 /*break*/, 4];
+                        case 2:
+                            err_2 = _c.sent();
+                            return [4 /*yield*/, getCameraPermissionState()];
+                        case 3:
+                            permissionState = (_b = (_a = (_c.sent())) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : null;
+                            if (err_2 && isMounted()) {
+                                handleGetUserMediaError(err_2, permissionState);
+                                throw err_2;
+                            }
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            }); };
+            effect().catch(handleError);
+        }
+    }, [constraints, stream, error, isLoading, lastConstraintsApplied, getUserMedia, videoRef]);
     (0, react_1.useEffect)(function () {
-        if (stream && videoRef.current) {
+        if (stream && videoRef && videoRef.current) {
             // eslint-disable-next-line no-param-reassign
             videoRef.current.onresize = function () {
-                if (isActive.current) {
+                if (isMounted()) {
                     setDimensions(getStreamDimensions(stream, false));
                 }
             };
         }
-    }, [stream]);
+    }, [stream, videoRef]);
     return (0, common_1.useObjectMemo)({
+        getUserMedia: getUserMedia,
         stream: stream,
         dimensions: dimensions,
         error: error,

package/lib/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useCameraPermission';

package/lib/hooks/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useCameraPermission"), exports);

package/lib/hooks/useCameraPermission.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Handle used to request camera permission on the user device.
+ */
+export interface CameraPermissionHandle {
+    /**
+     * Callback that can be used to request the camera permission on the current device.
+     */
+    requestCameraPermission: () => Promise<void>;
+}
+/**
+ * Custom hook that can be used to request the camera permissions on the current device.
+ */
+export declare function useCameraPermission(): CameraPermissionHandle;

package/lib/hooks/useCameraPermission.js

@@ -0,0 +1,72 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCameraPermission = void 0;
+var react_1 = require("react");
+var common_1 = require("@monkvision/common");
+var types_1 = require("@monkvision/types");
+var Camera_1 = require("../Camera");
+var utils_1 = require("../Camera/hooks/utils");
+var hooks_1 = require("../Camera/hooks");
+/**
+ * Custom hook that can be used to request the camera permissions on the current device.
+ */
+function useCameraPermission() {
+    var _this = this;
+    var contraints = (0, react_1.useMemo)(function () {
+        return (0, utils_1.getMediaConstraints)({
+            resolution: (0, common_1.isMobileDevice)() ? types_1.CameraResolution.UHD_4K : types_1.CameraResolution.FHD_1080P,
+            facingMode: Camera_1.CameraFacingMode.ENVIRONMENT,
+        });
+    }, []);
+    var getUserMedia = (0, hooks_1.useUserMedia)(contraints, null).getUserMedia;
+    var requestCameraPermission = (0, react_1.useCallback)(function () { return __awaiter(_this, void 0, void 0, function () {
+        var stream;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getUserMedia()];
+                case 1:
+                    stream = _a.sent();
+                    stream.getTracks().forEach(function (track) { return track.stop(); });
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [getUserMedia]);
+    return (0, common_1.useObjectMemo)({ requestCameraPermission: requestCameraPermission });
+}
+exports.useCameraPermission = useCameraPermission;

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Camera';
 export * from './SimpleCameraHUD';
+export * from './hooks';
 export * from './utils';
 export * from './i18n';

package/lib/index.js

@@ -16,5 +16,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Camera"), exports);
 __exportStar(require("./SimpleCameraHUD"), exports);
+__exportStar(require("./hooks"), exports);
 __exportStar(require("./utils"), exports);
 __exportStar(require("./i18n"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monkvision/camera-web",
-  "version": "4.5.6",
+  "version": "5.0.0",
   "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.5.6",
-    "@monkvision/common-ui-web": "4.5.6",
-    "@monkvision/monitoring": "4.5.6",
+    "@monkvision/common": "5.0.0",
+    "@monkvision/common-ui-web": "5.0.0",
+    "@monkvision/monitoring": "5.0.0",
     "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.5.6",
-    "@monkvision/eslint-config-typescript": "4.5.6",
-    "@monkvision/eslint-config-typescript-react": "4.5.6",
-    "@monkvision/jest-config": "4.5.6",
-    "@monkvision/prettier-config": "4.5.6",
-    "@monkvision/test-utils": "4.5.6",
-    "@monkvision/typescript-config": "4.5.6",
+    "@monkvision/eslint-config-base": "5.0.0",
+    "@monkvision/eslint-config-typescript": "5.0.0",
+    "@monkvision/eslint-config-typescript-react": "5.0.0",
+    "@monkvision/jest-config": "5.0.0",
+    "@monkvision/prettier-config": "5.0.0",
+    "@monkvision/test-utils": "5.0.0",
+    "@monkvision/typescript-config": "5.0.0",
     "@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": "c12e283e4abf1f810fdbc924a2d199652b92db30"
+  "gitHead": "6426efb1b64fde310666b5556fc76aeb7c8f2584"
 }