Styling issue

[ladderschool]

I have a lot of issues with the scanner component properly taking width and height. What are best practices in making this work? Mine looks like this. I upgraded to 2.0.8 as well. It looks fine on mobile devices when opened on my website, but on the desktop browser where I'm using OBS as a virtual camera it looks like below.. is OBS as a virtual cam not supported?

      <div id="qr-scanner">
        <Scanner
          onScan={(result) => handleScan(result)}
          onError={(error: string) => setScanErrorMessage(error)}
          allowMultiple={false}
          constraints={{
            advanced: [{ facingMode: 'environment' }],
          }}
          components={{
            finder: true,
            audio: false,
          }}
          /*
          styles={{
            container: {
              width: '100%',
              margin: '0',
              padding: '0',
            },
          }}
          */
        />
      </div>

[ladderschool]

It's the finder that doesn't adhere to the container width and height. If I set width and height to 100% the container shows the video correctly, but the finder as you can see in the screenshot just overflows.

I don't understand how to style the finder?

[martinmorenoc]

is there a way to style the finder and component buttons?

[MrLightful]

Yeah same issue. classNames and styles don't help.

[ksdme]

Just had this issue. For me, it was because the scanner window is a square but the scanner element wasn't. I fixed it by

.scanner {
  aspect-ratio: 1;
}

.scanner video {
  object-fit: cover;
}

.scanner svg {
  max-width: 100%;
  max-height: 100%;
}

classNames={{
  container: "scanner",
}}

[maxbraeutigam]

Hi @ksdme – Thank you very much for the fix. For me, this was not the 100% solution since the height of the container was larger than the finder. So I was setting everything to fixed width and height. Here is the minimal example using your styles.

"use client";

import { Container } from "@mui/material";
import { IScannerStyles, Scanner } from "@yudiel/react-qr-scanner";
import { useState } from "react";
import "./styles.css";

export function ScannerClient() {
  const [width, setWidth] = useState(window.innerWidth);
  const [code, setCode] = useState("");

  window.addEventListener("resize", () => {
    setWidth(window.innerWidth);
  });

  const style: IScannerStyles = {
    container: {
      width: width,
      height: width,
    },
  };

  return (
    <>
      <Container sx={{ p: 2 }}>
        <pre>{code}</pre>
      </Container>
      <Scanner
        onScan={(result) => {
          if (result[0]?.rawValue) setCode(result[0]?.rawValue);
        }}
        classNames={{
          container: "scanner",
        }}
        formats={["qr_code"]}
        styles={style}
      />
    </>
  );
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.