@monkvision/camera-web 5.3.1 → 5.3.4

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, previewDimensions = _f.previewDimensions, error = _f.error, retry = _f.retry, isPreviewLoading = _f.isLoading, availableCameraDevices = _f.availableCameraDevices, selectedCameraDeviceId = _f.selectedCameraDeviceId;
+    }), videoRef = _f.ref, streamDimensions = _f.streamDimensions, 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: previewDimensions,
+        streamDimensions: streamDimensions,
         allowImageUpscaling: allowImageUpscaling,
     }), canvasRef = _g.ref, canvasDimensions = _g.dimensions;
     var takeScreenshot = (0, hooks_1.useCameraScreenshot)({

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

@@ -7,7 +7,11 @@ import { UserMediaResult } from './useUserMedia';
  */
 export interface CameraPreviewHandle extends UserMediaResult {
     /**
-     * The effective pixel dimensions of the video stream on the client screen.
+     * The actual dimensions of the camera stream (full resolution).
+     */
+    streamDimensions: PixelDimensions | null;
+    /**
+     * The effective pixel dimensions of the video stream on the client screen (scaled for display).
      */
     previewDimensions: PixelDimensions | null;
     /**

package/lib/Camera/hooks/useCameraPreview.js

@@ -17,9 +17,21 @@ 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 height = refVideo.videoHeight;
-    var width = refVideo.videoWidth;
+function getStreamDimensionsFromVideo(videoElement, stream) {
+    var _a = (0, useUserMedia_1.getStreamVideoTrackSettings)(stream), width = _a.width, height = _a.height;
+    if (!height || !width) {
+        throw new useUserMedia_1.InvalidStreamError('Unable to set up the Monk camera screenshoter because the video stream does not have the properties width and height defined.', useUserMedia_1.InvalidStreamErrorName.NO_DIMENSIONS);
+    }
+    var videoIsLandscape = videoElement.videoWidth > videoElement.videoHeight;
+    var maxDimension = Math.max(width, height);
+    var minDimension = Math.min(width, height);
+    return videoIsLandscape
+        ? { width: maxDimension, height: minDimension }
+        : { width: minDimension, height: maxDimension };
+}
+function getPreviewDimensions(videoElement, windowDimensions) {
+    var height = videoElement.videoHeight;
+    var width = videoElement.videoWidth;
     if (!windowDimensions || !height || !width) {
         return null;
     }
@@ -41,7 +53,8 @@ function getPreviewDimensions(refVideo, windowDimensions) {
  */
 function useCameraPreview(config) {
     var ref = (0, react_1.useRef)(null);
-    var _a = (0, react_1.useState)(null), previewDimensions = _a[0], setPreviewDimensions = _a[1];
+    var _a = (0, react_1.useState)(null), streamDimensions = _a[0], setStreamDimensions = _a[1];
+    var _b = (0, react_1.useState)(null), previewDimensions = _b[0], setPreviewDimensions = _b[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);
@@ -49,16 +62,22 @@ function useCameraPreview(config) {
         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);
-                if (currentRef) {
+            var updateDimensions_1 = function () {
+                if (!currentRef || !userMediaResult.stream) {
+                    return;
+                }
+                var streamDims = getStreamDimensionsFromVideo(currentRef, userMediaResult.stream);
+                if (streamDims && windowDimensions) {
+                    setStreamDimensions(streamDims);
                     setPreviewDimensions(getPreviewDimensions(currentRef, windowDimensions));
                 }
             };
+            var handleMetadata = function () {
+                currentRef === null || currentRef === void 0 ? void 0 : currentRef.play().catch(handleError);
+                updateDimensions_1();
+            };
             var handleResize = function () {
-                if (currentRef) {
-                    setPreviewDimensions(getPreviewDimensions(currentRef, windowDimensions));
-                }
+                updateDimensions_1();
             };
             currentRef.onloadedmetadata = handleMetadata;
             currentRef.onresize = handleResize;
@@ -70,5 +89,5 @@ function useCameraPreview(config) {
             }
         };
     }, [windowDimensions, userMediaResult.stream, handleError]);
-    return (0, react_1.useMemo)(function () { return (__assign({ ref: ref, previewDimensions: previewDimensions }, userMediaResult)); }, [previewDimensions, userMediaResult]);
+    return (0, react_1.useMemo)(function () { return (__assign({ ref: ref, streamDimensions: streamDimensions, previewDimensions: previewDimensions }, userMediaResult)); }, [streamDimensions, previewDimensions, userMediaResult]);
 }

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

@@ -10,7 +10,19 @@ export declare enum InvalidStreamErrorName {
     /**
      * The stream had too many video tracks (more than one).
      */
-    TOO_MANY_VIDEO_TRACKS = "TooManyVideoTracks"
+    TOO_MANY_VIDEO_TRACKS = "TooManyVideoTracks",
+    /**
+     * The stream's video track had no dimensions.
+     */
+    NO_DIMENSIONS = "NoDimensions"
+}
+/**
+ * Custom error class used to throw errors related to invalid MediaStreams.
+ *
+ * @see InvalidStreamErrorName for the different types of invalid stream errors that can be thrown.
+ */
+export declare class InvalidStreamError extends Error {
+    constructor(message: string, name: InvalidStreamErrorName);
 }
 /**
  * The type of errors that the `useUserMedia` hook can return.
@@ -108,6 +120,11 @@ export interface UserMediaResult {
      */
     selectedCameraDeviceId: string | null;
 }
+/**
+ * Gets the video track settings of a MediaStream.
+ * This function also checks if the stream is valid and otherwise throws an error.
+ */
+export declare function getStreamVideoTrackSettings(stream: MediaStream): MediaTrackSettings;
 /**
  * React hook that wraps the `navigator.mediaDevices.getUserMedia` browser function in order to add React logic layers
  * and utility tools :

package/lib/Camera/hooks/useUserMedia.js

@@ -65,7 +65,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserMediaErrorType = exports.InvalidStreamErrorName = void 0;
+exports.UserMediaErrorType = exports.InvalidStreamError = exports.InvalidStreamErrorName = void 0;
+exports.getStreamVideoTrackSettings = getStreamVideoTrackSettings;
 exports.useUserMedia = useUserMedia;
 var monitoring_1 = require("@monkvision/monitoring");
 var fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
@@ -85,7 +86,16 @@ 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 = InvalidStreamErrorName = {}));
+/**
+ * Custom error class used to throw errors related to invalid MediaStreams.
+ *
+ * @see InvalidStreamErrorName for the different types of invalid stream errors that can be thrown.
+ */
 var InvalidStreamError = /** @class */ (function (_super) {
     __extends(InvalidStreamError, _super);
     function InvalidStreamError(message, name) {
@@ -95,6 +105,7 @@ var InvalidStreamError = /** @class */ (function (_super) {
     }
     return InvalidStreamError;
 }(Error));
+exports.InvalidStreamError = InvalidStreamError;
 /**
  * The type of errors that the `useUserMedia` hook can return.
  *
@@ -139,6 +150,10 @@ var UserMediaErrorType;
      */
     UserMediaErrorType["OTHER"] = "other";
 })(UserMediaErrorType || (exports.UserMediaErrorType = UserMediaErrorType = {}));
+/**
+ * Gets the video track settings of a MediaStream.
+ * This function also checks if the stream is valid and otherwise throws an error.
+ */
 function getStreamVideoTrackSettings(stream) {
     var videoTracks = stream.getVideoTracks();
     if (videoTracks.length === 0) {

package/lib/i18n.js

@@ -6,6 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.i18nCamera = void 0;
 var common_1 = require("@monkvision/common");
 var en_json_1 = __importDefault(require("./translations/en.json"));
+var ro_json_1 = __importDefault(require("./translations/ro.json"));
+var pl_json_1 = __importDefault(require("./translations/pl.json"));
+var da_json_1 = __importDefault(require("./translations/da.json"));
+var sv_json_1 = __importDefault(require("./translations/sv.json"));
+var es_json_1 = __importDefault(require("./translations/es.json"));
+var pt_json_1 = __importDefault(require("./translations/pt.json"));
 var fr_json_1 = __importDefault(require("./translations/fr.json"));
 var de_json_1 = __importDefault(require("./translations/de.json"));
 var nl_json_1 = __importDefault(require("./translations/nl.json"));
@@ -21,5 +27,11 @@ exports.i18nCamera = (0, common_1.i18nCreateSDKInstance)({
         de: { translation: de_json_1.default },
         nl: { translation: nl_json_1.default },
         it: { translation: it_json_1.default },
+        pt: { translation: pt_json_1.default },
+        es: { translation: es_json_1.default },
+        sv: { translation: sv_json_1.default },
+        da: { translation: da_json_1.default },
+        pl: { translation: pl_json_1.default },
+        ro: { translation: ro_json_1.default },
     },
 });

package/lib/translations/da.json

@@ -0,0 +1,3 @@
+{
+    "retry": "Prøv igen"
+}

package/lib/translations/es.json

@@ -0,0 +1,3 @@
+{
+    "retry": "Reintentar"
+}

package/lib/translations/pl.json

@@ -0,0 +1,3 @@
+{
+    "retry": "Ponów próbę"
+}

package/lib/translations/pt.json

@@ -0,0 +1,3 @@
+{
+    "retry": "Tentar novamente"
+}

package/lib/translations/ro.json

@@ -0,0 +1,3 @@
+{
+    "retry": "Reîncearcă"
+}

package/lib/translations/sv.json

@@ -0,0 +1,3 @@
+{
+    "retry": "Försök igen"
+}

package/lib/utils/errors.utils.js

@@ -11,6 +11,12 @@ function getCameraErrorLabel(error) {
         case Camera_1.UserMediaErrorType.NOT_ALLOWED:
             return {
                 en: 'Camera preview unavailable because camera access was not granted to the page.',
+                ro: 'Previzualizarea camerei nu este disponibilă deoarece accesul la cameră nu a fost acordat paginii.',
+                pl: 'Podgląd kamery jest niedostępny, ponieważ strona nie otrzymała uprawnień dostępu do kamery.',
+                da: 'Kameraforhåndsvisning er ikke tilgængelig, fordi kameraadgang ikke blev givet til siden.',
+                sv: 'Kameraview är inte tillgänglig eftersom sidan inte har tillgång till kameran.',
+                es: 'La vista previa de la cámara no está disponible porque no se concedió permiso de acceso a la cámara a la página.',
+                pt: 'A visualização da câmera não está disponível porque o acesso à câmera não foi concedido à página.',
                 fr: "L'apperçu de la caméra n'est pas disponible car l'accès à la caméra n'est pas autorisé.",
                 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.',
@@ -19,6 +25,12 @@ function getCameraErrorLabel(error) {
         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.',
+                ro: 'Nu s-a putut accesa camera. Asigurați-vă că apăsați „Permite” când vi se solicită să acordați permisiunea de utilizare a camerei pentru această pagină web.',
+                pl: 'Nie można uzyskać dostępu do kamery. Upewnij się, że klikniesz „Zezwól”, gdy zostaniesz poproszony o udzielenie uprawnień dostępu do kamery dla tej strony internetowej.',
+                da: 'Kunne ikke få adgang til kameraet. Sørg for at trykke på “Tillad”, når du bliver bedt om at give tilladelse til kameraadgang for denne webside.',
+                sv: 'Kunde inte få åtkomst till kameran. Se till att du trycker på ”Tillåt” när du blir ombedd att ge kameratillstånd för den här webbsidan.”',
+                es: 'No se pudo acceder a la cámara. Asegúrese de presionar “Permitir” cuando se le solicite conceder permiso de cámara para esta página web.',
+                pt: 'Não foi possível obter acesso à câmera. Certifique-se de pressionar “Permitir” quando solicitado a conceder permissão para a câmera nesta página.',
                 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.',
@@ -27,6 +39,12 @@ function getCameraErrorLabel(error) {
         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.",
+                ro: 'Nu s-a putut accesa camera. Asigurați-vă că ați acordat permisiunea de acces la cameră pentru browserul dvs. în setările dispozitivului.',
+                pl: 'Nie można uzyskać dostępu do kamery. Upewnij się, że w ustawieniach urządzenia przyznałeś dostęp do kamery dla używanej przeglądarki internetowej.',
+                da: 'Kunne ikke få adgang til kameraet. Sørg for at give kameraadgang til din aktuelle webbrowser i dine enhedsindstillinger.',
+                sv: 'Kunde inte få åtkomst till kameran. Se till att du har tillåtit kameraåtkomst för din webbläsare i enheten.',
+                es: 'No se pudo acceder a la cámara. Asegúrese de otorgar permisos de cámara a su navegador web actual en la configuración de su dispositivo.',
+                pt: 'Não foi possível obter acesso à câmera. Certifique-se de conceder acesso à câmera ao seu navegador atual nas configurações do dispositivo.',
                 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.',
@@ -35,6 +53,12 @@ function getCameraErrorLabel(error) {
         case Camera_1.UserMediaErrorType.STREAM_INACTIVE:
             return {
                 en: 'The camera video stream was closed unexpectedly.',
+                ro: 'Fluxul video al camerei a fost închis neașteptat.',
+                pl: 'Strumień wideo z kamery został nieoczekiwanie przerwany.',
+                da: 'Kameraets videostream blev uventet lukket.',
+                sv: 'Kamerans videoström stängdes oväntat.',
+                es: 'La transmisión de video de la cámara se cerró inesperadamente.',
+                pt: 'O stream de vídeo da câmera foi encerrado inesperadamente.',
                 fr: 'Le flux vidéo de la caméra a été coupé de manière inattendue.',
                 de: 'Der Video-Stream der Kamera wurde unerwartet geschlossen.',
                 nl: 'De videostream van de camera is onverwacht gesloten.',
@@ -43,6 +67,12 @@ function getCameraErrorLabel(error) {
         case Camera_1.UserMediaErrorType.INVALID_STREAM:
             return {
                 en: 'Unable to process the camera video stream.',
+                ro: 'Nu se poate procesa fluxul video al camerei.',
+                pl: 'Nie można przetworzyć strumienia wideo z kamery.',
+                da: 'Kunne ikke behandle videostrømmen fra kameraet.',
+                sv: 'Kunde inte bearbeta kamerans videoström.',
+                es: 'No se puede procesar la transmisión de video de la cámara.',
+                pt: 'Não foi possível processar o stream de vídeo da câmera.',
                 fr: 'Impossible de traiter le flux vidéo de la caméra.',
                 de: 'Der Videostrom der Kamera kann nicht verarbeitet werden.',
                 nl: 'De videostream van de camera kan niet worden verwerkt.',
@@ -51,6 +81,12 @@ function getCameraErrorLabel(error) {
         default:
             return {
                 en: 'An unexpected error occurred when fetching the camera video stream.',
+                ro: 'A apărut o eroare neașteptată la preluarea fluxului video de la cameră.',
+                pl: 'Wystąpił nieoczekiwany błąd podczas pobierania strumienia wideo z kamery.',
+                da: 'Der opstod en uventet fejl under hentning af kameravideostrømmen.',
+                sv: 'Ett oväntat fel uppstod när kamerans videoström hämtades.',
+                es: 'Se produjo un error inesperado al obtener la transmisión de video de la cámara.',
+                pt: 'Ocorreu um erro inesperado ao obter o stream de vídeo da câmera.',
                 fr: 'Une erreur inattendue est survenue lors de la récupération du flux vidéo de la caméra.',
                 de: 'Beim Abrufen des Kamera-Videostreams ist ein unerwarteter Fehler aufgetreten.',
                 nl: 'Er is een onverwachte fout opgetreden bij het ophalen van de videostream van de camera.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monkvision/camera-web",
-  "version": "5.3.1",
+  "version": "5.3.4",
   "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.3.1",
-    "@monkvision/common-ui-web": "5.3.1",
-    "@monkvision/monitoring": "5.3.1",
+    "@monkvision/common": "5.3.4",
+    "@monkvision/common-ui-web": "5.3.4",
+    "@monkvision/monitoring": "5.3.4",
     "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.3.1",
-    "@monkvision/eslint-config-typescript": "5.3.1",
-    "@monkvision/eslint-config-typescript-react": "5.3.1",
-    "@monkvision/jest-config": "5.3.1",
-    "@monkvision/prettier-config": "5.3.1",
-    "@monkvision/test-utils": "5.3.1",
-    "@monkvision/typescript-config": "5.3.1",
+    "@monkvision/eslint-config-base": "5.3.4",
+    "@monkvision/eslint-config-typescript": "5.3.4",
+    "@monkvision/eslint-config-typescript-react": "5.3.4",
+    "@monkvision/jest-config": "5.3.4",
+    "@monkvision/prettier-config": "5.3.4",
+    "@monkvision/test-utils": "5.3.4",
+    "@monkvision/typescript-config": "5.3.4",
     "@testing-library/react": "^16.3.0",
     "@types/fscreen": "^1.0.1",
     "@types/jest": "^30",
@@ -89,5 +89,5 @@
     "url": "https://github.com/monkvision/monkjs/issues"
   },
   "homepage": "https://github.com/monkvision/monkjs",
-  "gitHead": "859c252dd8e45c5aa4755f28f90fd4163e6cb8f6"
+  "gitHead": "5b46d87e58706a101dfde74d52c697f3fc4e1970"
 }