[Question]

[vipansh]

Cant increase camera height qr border is not visible

import { Html5Qrcode } from "html5-qrcode";
import { ChangeEvent, useEffect, useRef, useState } from "react";

// assuming this is the correct path

type QrScannerConfig = {
  fps: number;
  qrbox: { width: number; height: number };
  aspectRatio: number;
};

type QrScannerErrorCallback = (errorMessage: string) => void;
type QrScannerSuccessCallback = (decodedText: string, result?: any) => void;

const useQrScanner = (
  config: QrScannerConfig,
  qrCodeSuccessCallback: QrScannerSuccessCallback,
  qrCodeErrorCallback?: QrScannerErrorCallback
) => {
  const [error, setError] = useState<string | null>(null);
  const previewRef = useRef<HTMLDivElement>(null);
  const html5QrCodeRef = useRef<Html5Qrcode | null>(null);

  useEffect(() => {
    if (!previewRef.current) return;

    html5QrCodeRef.current = new Html5Qrcode(previewRef.current.id);
    const html5QrCode = html5QrCodeRef.current;

    html5QrCode
      .start(
        { facingMode: "environment" },
        config,
        qrCodeSuccessCallback,
        (errorMessage: string) => {
          qrCodeErrorCallback?.(errorMessage);
          // setError(errorMessage);
        }
      )
      .catch((error) => {
        console.error("QR Scanner initialization failed:", error);
        setError(error.message);
      });

    return () => {
      if (html5QrCode.isScanning) {
        html5QrCode
          .stop()
          .then(() => {
            console.log("Scanner stopped successfully");
            html5QrCode.clear();
          })
          .catch((error) => {
            console.error("Error stopping scanner:", error);
          });
      } else {
        html5QrCode.clear();
      }
    };
  }, [config, qrCodeErrorCallback, qrCodeSuccessCallback]);

  const handleFileUpload = async (e: ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    console.log({ e, files });
    if (!previewRef.current || !files || !html5QrCodeRef.current) return;

    if (!files || files.length === 0) {
      console.error("No file selected for scanning");
      setError("No file selected for scanning");
      return;
    }

    const file = files[0]; // Get the first file

    if (!(file instanceof File)) {
      console.error("Selected item is not a file");
      setError("Selected item is not a file");
      return;
    }

    const html5QrCode = html5QrCodeRef.current;

    try {
      // Stop the ongoing scan if any
      if (html5QrCode.isScanning) {
        await html5QrCode.stop();
      }
      const decodedText = await html5QrCode.scanFile(file, true);
      console.log({ decodedText });
      qrCodeSuccessCallback(decodedText);
    } catch (err) {
      console.error(`Error scanning file. Reason: ${err}`, err);
      setError(`Error scanning file.`);
    } finally {
      setTimeout(async () => {
        html5QrCode.clear();
        try {
          await html5QrCode
            .start(
              { facingMode: "environment" },
              config,
              qrCodeSuccessCallback,
              (errorMessage: string) => {
                qrCodeErrorCallback?.(errorMessage);
                // setError(errorMessage);
              }
            )
            .catch((error) => {
              console.error("QR Scanner initialization failed:", error);
              setError(error.message);
            });
        } catch (err) {
          console.error(`Error restarting scanner. Reason: ${err}`);
        }
      }, 1000);
    }
  };

  return { previewRef, handleFileUpload, error };
};

export default useQrScanner;

import { Box, Stack, Typography } from "@mui/material";
import React from "react";

import { BackButton, UploadFile } from "shared/components";
import { getIcon } from "shared/icons";

import useQrScanner from "./hooks/useQrScanner";

const Cross = getIcon("close");

const config = {
  fps: 10,
  qrbox: { width: 250, height: 250 },
  aspectRatio: 1.7777,
};

type Props = {
  qrCodeSuccessCallback: (decodedText: string, result?: any) => void;
  goBack: () => void;
};

const UpiQrScannermodule = ({ goBack, qrCodeSuccessCallback }: Props) => {
  const { previewRef, handleFileUpload, error } = useQrScanner(
    config,
    qrCodeSuccessCallback
  );

  const close = () => {
    goBack();
  };

  return (
    <Box
      sx={{
        width: "100%",
        maxWidth: 400,
        height: "100%",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "flex-start",
        margin: "0 auto",
        padding: 2,
      }}
    >
      <Stack
        width={"100%"}
        alignItems={"center"}
        direction={"row"}
        justifyContent={"space-between"}
      >
        <Stack>
          <BackButton handleClick={close} size="small" />
        </Stack>
        <Typography variant="h6" sx={{ color: "gray.700", flex: 1 }}>
          Scan QR code
        </Typography>
      </Stack>
      <Box
        id="qrScanner"
        ref={previewRef}
        sx={{
          width: "100%",
          border: "1px solid",
          borderColor: "grey.300",
          borderRadius: 1,
        }}
      >
        {/* <video muted style={{ width: "100%", height: "100%" }} /> */}
      </Box>
      <Stack
        direction="column"
        justifyContent="center"
        alignItems="center"
        spacing={2}
        sx={{ width: "100%", mt: 2 }}
      >
        <UploadFile
          color="primary"
          handleFileUpload={handleFileUpload}
          label="Upload from gallery"
          acceptType=".pdf, .jpg, .jpeg, .png, .gif, .bmp, .tiff"
        />

        {error && (
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              backgroundColor: "error.light",
              color: "error.contrastText",
              maxWidth: "30rem",
              p: 2,
              borderRadius: 1,
            }}
          >
            <Cross />
            <Typography variant="body1" fontWeight={700} p={2}>
              {error}
            </Typography>
          </Box>
        )}
      </Stack>
    </Box>
  );
};

export default UpiQrScannermodule;

Optional, Environment (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.