@monkvision/camera-web 5.2.0 → 5.2.2

package/lib/Camera/Camera.js

@@ -34,10 +34,10 @@ function Camera(_a) {
     var _f = (0, hooks_1.useCameraPreview)({
         resolution: previewResolution,
         facingMode: hooks_1.CameraFacingMode.ENVIRONMENT,
-    }), videoRef = _f.ref, streamDimensions = _f.dimensions, previewDimensions = _f.previewDimensions, error = _f.error, retry = _f.retry, isPreviewLoading = _f.isLoading, availableCameraDevices = _f.availableCameraDevices, selectedCameraDeviceId = _f.selectedCameraDeviceId;
+    }), videoRef = _f.ref, previewDimensions = _f.previewDimensions, error = _f.error, retry = _f.retry, isPreviewLoading = _f.isLoading, availableCameraDevices = _f.availableCameraDevices, selectedCameraDeviceId = _f.selectedCameraDeviceId;
     var _g = (0, hooks_1.useCameraCanvas)({
         resolution: resolution,
-        streamDimensions: streamDimensions,
+        streamDimensions: previewDimensions,
         allowImageUpscaling: allowImageUpscaling,
     }), canvasRef = _g.ref, canvasDimensions = _g.dimensions;
     var takeScreenshot = (0, hooks_1.useCameraScreenshot)({
@@ -65,7 +65,7 @@ function Camera(_a) {
             error: error,
             retry: retry,
             isLoading: isLoading,
-            dimensions: streamDimensions,
+            dimensions: previewDimensions,
             previewDimensions: previewDimensions,
         }, cameraPreview: cameraPreview }, (hudProps !== null && hudProps !== void 0 ? hudProps : {})))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: cameraPreview }));
 }

package/lib/Camera/hooks/useCameraPreview.js

@@ -17,40 +17,56 @@ var react_1 = require("react");
 var common_1 = require("@monkvision/common");
 var utils_1 = require("./utils");
 var useUserMedia_1 = require("./useUserMedia");
+function getPreviewDimensions(refVideo, windowDimensions) {
+    var _a, _b;
+    var height = (_a = refVideo.current) === null || _a === void 0 ? void 0 : _a.videoHeight;
+    var width = (_b = refVideo.current) === null || _b === void 0 ? void 0 : _b.videoWidth;
+    if (!windowDimensions || !height || !width) {
+        return null;
+    }
+    var windowAspectRatio = windowDimensions.width / windowDimensions.height;
+    var streamAspectRatio = width / height;
+    return windowAspectRatio >= streamAspectRatio
+        ? {
+            width: windowDimensions.height * streamAspectRatio,
+            height: windowDimensions.height,
+        }
+        : {
+            width: windowDimensions.width,
+            height: windowDimensions.width / streamAspectRatio,
+        };
+}
 /**
  * Custom hook used to initialize and handle the camera preview. It initializes the camera stream based on the given
  * configuration, and provides a handle to manage the camera such as the ref to the video element etc.
  */
 function useCameraPreview(config) {
     var ref = (0, react_1.useRef)(null);
+    var _a = (0, react_1.useState)(null), previewDimensions = _a[0], setPreviewDimensions = _a[1];
     var windowDimensions = (0, common_1.useWindowDimensions)();
     var handleError = (0, monitoring_1.useMonitoring)().handleError;
     var userMediaResult = (0, useUserMedia_1.useUserMedia)((0, utils_1.getMediaConstraints)(config), ref);
-    var previewDimensions = (0, react_1.useMemo)(function () {
-        if (!windowDimensions || !userMediaResult.dimensions) {
-            return null;
-        }
-        var windowAspectRatio = windowDimensions.width / windowDimensions.height;
-        var streamAspectRatio = userMediaResult.dimensions.width / userMediaResult.dimensions.height;
-        return windowAspectRatio >= streamAspectRatio
-            ? {
-                width: windowDimensions.height * streamAspectRatio,
-                height: windowDimensions.height,
-            }
-            : {
-                width: windowDimensions.width,
-                height: windowDimensions.width / streamAspectRatio,
-            };
-    }, [windowDimensions, userMediaResult.dimensions]);
     (0, react_1.useEffect)(function () {
-        if (userMediaResult.stream && ref.current) {
-            ref.current.srcObject = userMediaResult.stream;
-            ref.current.onloadedmetadata = function () {
-                var _a;
-                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.play().catch(handleError);
+        var currentRef = ref.current;
+        if (userMediaResult.stream && currentRef) {
+            currentRef.srcObject = userMediaResult.stream;
+            var handleMetadata = function () {
+                currentRef === null || currentRef === void 0 ? void 0 : currentRef.play().catch(handleError);
+                setPreviewDimensions(getPreviewDimensions(ref, windowDimensions));
+            };
+            var handleResize = function () {
+                setPreviewDimensions(getPreviewDimensions(ref, windowDimensions));
             };
+            currentRef.onloadedmetadata = handleMetadata;
+            currentRef.onresize = handleResize;
         }
-    }, [userMediaResult.stream]);
+        return function () {
+            if (currentRef) {
+                currentRef.onloadedmetadata = null;
+                currentRef.onresize = null;
+            }
+        };
+    }, [windowDimensions, userMediaResult.stream, handleError]);
     return (0, react_1.useMemo)(function () { return (__assign({ ref: ref, previewDimensions: previewDimensions }, userMediaResult)); }, [previewDimensions, userMediaResult]);
 }
 exports.useCameraPreview = useCameraPreview;

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

@@ -1,5 +1,4 @@
 import { RefObject } from 'react';
-import { PixelDimensions } from '@monkvision/types';
 /**
  * Enumeration of the different Native error names that can happen when a stream is invalid.
  */
@@ -11,11 +10,7 @@ export declare enum InvalidStreamErrorName {
     /**
      * The stream had too many video tracks (more than one).
      */
-    TOO_MANY_VIDEO_TRACKS = "TooManyVideoTracks",
-    /**
-     * The stream's video track had no dimensions.
-     */
-    NO_DIMENSIONS = "NoDimensions"
+    TOO_MANY_VIDEO_TRACKS = "TooManyVideoTracks"
 }
 /**
  * The type of errors that the `useUserMedia` hook can return.
@@ -90,11 +85,6 @@ export interface UserMediaResult {
      * The resulting video stream. The stream can be null when not initialized or in case of an error.
      */
     stream: MediaStream | null;
-    /**
-     * The dimensions of the resulting camera stream. Note that these dimensions can differ from the ones given in the
-     * stream constraints if they are not supported or available on the current device.
-     */
-    dimensions: PixelDimensions | null;
     /**
      * The error details. If no error has occurred, this object will be null.
      */

package/lib/Camera/hooks/useUserMedia.js

@@ -84,10 +84,6 @@ var InvalidStreamErrorName;
      * The stream had too many video tracks (more than one).
      */
     InvalidStreamErrorName["TOO_MANY_VIDEO_TRACKS"] = "TooManyVideoTracks";
-    /**
-     * The stream's video track had no dimensions.
-     */
-    InvalidStreamErrorName["NO_DIMENSIONS"] = "NoDimensions";
 })(InvalidStreamErrorName = exports.InvalidStreamErrorName || (exports.InvalidStreamErrorName = {}));
 var InvalidStreamError = /** @class */ (function (_super) {
     __extends(InvalidStreamError, _super);
@@ -157,25 +153,6 @@ function getStreamDeviceId(stream) {
     var settings = getStreamVideoTrackSettings(stream);
     return (_a = settings.deviceId) !== null && _a !== void 0 ? _a : null;
 }
-function swapDimensions(dimensions) {
-    return {
-        width: dimensions.height,
-        height: dimensions.width,
-    };
-}
-function getStreamDimensions(stream, checkOrientation) {
-    var _a = getStreamVideoTrackSettings(stream), width = _a.width, height = _a.height;
-    if (!width || !height) {
-        throw new InvalidStreamError('Unable to set up the Monk camera screenshoter because the video stream does not have the properties width and height defined.', InvalidStreamErrorName.NO_DIMENSIONS);
-    }
-    var dimensions = { width: width, height: height };
-    if (!(0, common_1.isMobileDevice)() || !checkOrientation) {
-        return dimensions;
-    }
-    var isStreamInPortrait = width < height;
-    var isDeviceInPortrait = window.matchMedia('(orientation: portrait)').matches;
-    return isStreamInPortrait !== isDeviceInPortrait ? swapDimensions(dimensions) : dimensions;
-}
 /**
  * React hook that wraps the `navigator.mediaDevices.getUserMedia` browser function in order to add React logic layers
  * and utility tools :
@@ -198,12 +175,11 @@ function useUserMedia(constraints, videoRef) {
     var _this = this;
     var streamRef = (0, react_1.useRef)(null);
     var _a = (0, react_1.useState)(null), stream = _a[0], setStream = _a[1];
-    var _b = (0, react_1.useState)(null), dimensions = _b[0], setDimensions = _b[1];
-    var _c = (0, react_1.useState)(false), isLoading = _c[0], setIsLoading = _c[1];
-    var _d = (0, react_1.useState)(null), error = _d[0], setError = _d[1];
-    var _e = (0, react_1.useState)([]), availableCameraDevices = _e[0], setAvailableCameraDevices = _e[1];
-    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 _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = (0, react_1.useState)(null), error = _c[0], setError = _c[1];
+    var _d = (0, react_1.useState)([]), availableCameraDevices = _d[0], setAvailableCameraDevices = _d[1];
+    var _e = (0, react_1.useState)(null), selectedCameraDeviceId = _e[0], setSelectedCameraDeviceId = _e[1];
+    var _f = (0, react_1.useState)(null), lastConstraintsApplied = _f[0], setLastConstraintsApplied = _f[1];
     var lastGetUserMediaTimeRef = (0, react_1.useRef)(null);
     var handleError = (0, monitoring_1.useMonitoring)().handleError;
     var isMounted = (0, common_1.useIsMounted)();
@@ -267,10 +243,9 @@ function useUserMedia(constraints, videoRef) {
                     if (isMounted()) {
                         setStream(str);
                         streamRef.current = str;
-                        setDimensions(getStreamDimensions(str, true));
-                        setIsLoading(false);
-                        setAvailableCameraDevices(deviceDetails.availableDevices);
                         setSelectedCameraDeviceId(getStreamDeviceId(str));
+                        setAvailableCameraDevices(deviceDetails.availableDevices);
+                        setIsLoading(false);
                     }
                     return [2 /*return*/, str];
             }
@@ -335,16 +310,6 @@ function useUserMedia(constraints, videoRef) {
             effect().catch(handleError);
         }
     }, [constraints, stream, error, isLoading, lastConstraintsApplied, getUserMedia, videoRef]);
-    (0, react_1.useEffect)(function () {
-        if (stream && videoRef && videoRef.current) {
-            // eslint-disable-next-line no-param-reassign
-            videoRef.current.onresize = function () {
-                if (isMounted()) {
-                    setDimensions(getStreamDimensions(stream, false));
-                }
-            };
-        }
-    }, [stream, videoRef]);
     (0, react_1.useEffect)(function () {
         return function () {
             var _a;
@@ -356,7 +321,6 @@ function useUserMedia(constraints, videoRef) {
     return (0, common_1.useObjectMemo)({
         getUserMedia: getUserMedia,
         stream: stream,
-        dimensions: dimensions,
         error: error,
         retry: retry,
         isLoading: isLoading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monkvision/camera-web",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "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": "5.2.0",
-    "@monkvision/common-ui-web": "5.2.0",
-    "@monkvision/monitoring": "5.2.0",
+    "@monkvision/common": "5.2.2",
+    "@monkvision/common-ui-web": "5.2.2",
+    "@monkvision/monitoring": "5.2.2",
     "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": "5.2.0",
-    "@monkvision/eslint-config-typescript": "5.2.0",
-    "@monkvision/eslint-config-typescript-react": "5.2.0",
-    "@monkvision/jest-config": "5.2.0",
-    "@monkvision/prettier-config": "5.2.0",
-    "@monkvision/test-utils": "5.2.0",
-    "@monkvision/typescript-config": "5.2.0",
+    "@monkvision/eslint-config-base": "5.2.2",
+    "@monkvision/eslint-config-typescript": "5.2.2",
+    "@monkvision/eslint-config-typescript-react": "5.2.2",
+    "@monkvision/jest-config": "5.2.2",
+    "@monkvision/prettier-config": "5.2.2",
+    "@monkvision/test-utils": "5.2.2",
+    "@monkvision/typescript-config": "5.2.2",
     "@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": "5380665942c8c075485142183e431996657e70d1"
+  "gitHead": "f05ba32932398b3f01ba46e1569d336c78c62738"
 }