add support for high resolution images in fileComp

Author: iamfaran

client/packages/lowcoder/src/comps/comps/fileComp/ImageCaptureModal.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useCallback, useEffect, useRef, useState } from "react";
+import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { default as Button } from "antd/es/button";
 import Dropdown from "antd/es/dropdown";
 import type { ItemType } from "antd/es/menu/interface";
@@ -8,6 +8,7 @@ import Flex from "antd/es/flex";
 import styled from "styled-components";
 import { trans } from "i18n";
 import { CustomModal } from "lowcoder-design";
+import { CaptureResolution, RESOLUTION_CONSTRAINTS } from "./fileComp";
 
 const CustomModalStyled = styled(CustomModal)`
   top: 10vh;
@@ -53,23 +54,32 @@ const ReactWebcam = React.lazy(() => import("react-webcam"));
 
 export const ImageCaptureModal = (props: {
   showModal: boolean;
+  captureResolution?: CaptureResolution;
   onModalClose: () => void;
   onImageCapture: (image: string) => void;
 }) => {
   const [errMessage, setErrMessage] = useState("");
-  const [videoConstraints, setVideoConstraints] = useState<MediaTrackConstraints>({
-    facingMode: "environment",
-  });
+  const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);
   const [modeList, setModeList] = useState<ItemType[]>([]);
   const [dropdownShow, setDropdownShow] = useState(false);
   const [imgSrc, setImgSrc] = useState<string>();
   const webcamRef = useRef<any>(null);
 
+  const resolution = props.captureResolution ?? "auto";
+  const resolutionSize = RESOLUTION_CONSTRAINTS[resolution] ?? {};
+
+  const videoConstraints = useMemo<MediaTrackConstraints>(() => {
+    const base: MediaTrackConstraints = selectedDeviceId
+      ? { deviceId: { exact: selectedDeviceId } }
+      : { facingMode: "environment" };
+    return { ...base, ...resolutionSize };
+  }, [selectedDeviceId, resolutionSize]);
+
   useEffect(() => {
     if (props.showModal) {
       setImgSrc("");
       setErrMessage("");
-      setVideoConstraints({ facingMode: "environment" });
+      setSelectedDeviceId(null);
       setDropdownShow(false);
     }
   }, [props.showModal]);
@@ -125,6 +135,8 @@ export const ImageCaptureModal = (props: {
                   ref={webcamRef}
                   onUserMediaError={handleMediaErr}
                   screenshotFormat="image/jpeg"
+                  screenshotQuality={1}
+                  forceScreenshotSourceSize
                   videoConstraints={videoConstraints}
                 />
               </Suspense>
@@ -172,7 +184,7 @@ export const ImageCaptureModal = (props: {
                     <Menu
                       items={modeList}
                       onClick={(value) => {
-                        setVideoConstraints({ deviceId: { exact: value.key } });
+                        setSelectedDeviceId(value.key);
                         setDropdownShow(false);
                       }}
                     />

client/packages/lowcoder/src/comps/comps/fileComp/draggerUpload.tsx

@@ -11,7 +11,7 @@ import {
   multiChangeAction,
 } from "lowcoder-core";
 import { hasIcon } from "comps/utils";
-import { resolveValue, resolveParsedValue, commonProps, validateFile } from "./fileComp";
+import { resolveValue, resolveParsedValue, commonProps, validateFile, CaptureResolution } from "./fileComp";
 import { FileStyleType, AnimationStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { ImageCaptureModal } from "./ImageCaptureModal";
 import { v4 as uuidv4 } from "uuid";
@@ -148,6 +148,7 @@ interface DraggerUploadProps {
   prefixIcon: any;
   suffixIcon: any;
   forceCapture: boolean;
+  captureResolution: CaptureResolution;
   minSize: number;
   maxSize: number;
   maxFiles: number;
@@ -291,6 +292,7 @@ export const DraggerUpload = (props: DraggerUploadProps) => {
 
       <ImageCaptureModal
         showModal={showModal}
+        captureResolution={props.captureResolution as CaptureResolution}
         onModalClose={() => setShowModal(false)}
         onImageCapture={async (image) => {
           setShowModal(false);

client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx

@@ -100,6 +100,22 @@ const validationChildren = {
   fileNamePattern: StringControl,
 };
 
+export type CaptureResolution = "auto" | "1080p" | "720p" | "480p";
+
+export const CaptureResolutionOptions = [
+  { label: trans("file.captureResolutionAuto"), value: "auto" },
+  { label: trans("file.captureResolution1080p"), value: "1080p" },
+  { label: trans("file.captureResolution720p"), value: "720p" },
+  { label: trans("file.captureResolution480p"), value: "480p" },
+] as const;
+
+export const RESOLUTION_CONSTRAINTS: Record<CaptureResolution, { width?: number; height?: number }> = {
+  auto: {},
+  "1080p": { width: 1920, height: 1080 },
+  "720p": { width: 1280, height: 720 },
+  "480p": { width: 640, height: 480 },
+};
+
 const commonChildren = {
   value: stateComp<Array<string | null>>([]),
   files: stateComp<JSONObject[]>([]),
@@ -114,6 +130,7 @@ const commonChildren = {
   prefixIcon: withDefault(IconControl, "/icon:solid/arrow-up-from-bracket"),
   suffixIcon: IconControl,
   forceCapture: BoolControl,
+  captureResolution: dropdownControl(CaptureResolutionOptions, "auto"),
   ...validationChildren,
 };
 
@@ -441,6 +458,7 @@ const Upload = (
 
       <ImageCaptureModal
         showModal={showModal}
+        captureResolution={props.captureResolution as CaptureResolution}
         onModalClose={() => setShowModal(false)}
         onImageCapture={async (image) => {
           setShowModal(false);
@@ -548,6 +566,10 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => {
               label: trans("file.forceCapture"),
               tooltip: trans("file.forceCaptureTooltip")
             })}
+            {children.forceCapture.getView() && children.captureResolution.propertyView({
+              label: trans("file.captureResolution"),
+              tooltip: trans("file.captureResolutionTooltip"),
+            })}
             {children.showUploadList.propertyView({ label: trans("file.showUploadList") })}
             {children.parseFiles.propertyView({
               label: trans("file.parseFiles"),

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1954,6 +1954,12 @@ export const en = {
     "fileNamePatternPlaceholder": "^[a-zA-Z0-9_-]+\\.[a-z]+$",
     "fileNamePatternErrorMsg": "Upload Failed. The File Name Does Not Match the Required Pattern.",
     "invalidFileNamePatternMsg": "Invalid File Name Pattern: {error}",
+    "captureResolution": "Capture Resolution",
+    "captureResolutionTooltip": "Set the camera resolution for image capture. Higher resolutions produce better quality but may not be supported by all cameras.",
+    "captureResolutionAuto": "Auto (Camera Default)",
+    "captureResolution1080p": "1080p",
+    "captureResolution720p": "720p",
+    "captureResolution480p": "480p",
   },
   "date": {
     "format": "Format",