BlackBoxVision / react-qr-reader

React component for QR Scanning on web using Zxing library
MIT License
56 stars 11 forks source link

Facing mode environment is only flipping the camera horizontally #49

Open andregoncalvesdev opened 2 years ago

andregoncalvesdev commented 2 years ago

Hello @JonatanSalas !

I´m trying to use the back camera of the phone to scan, and to do that i am changing the default constraints to { facingMode: 'environment' }.

The camera that is used is still the front one, and it only flips the video horizontally. I can reproduce this on my project aswell as on the demo of the package. Tried on different phones aswell.

I also tried { facingMode: { exact: 'environment' } } and { facingMode: { ideal: 'environment' } } but with no success.

AndreyPatseiko commented 2 years ago

I have the same problem. Tried { facingMode: "user" and "environment" } and got only horizontal flip. :(

gabrielbrrll commented 2 years ago

Same, I'm having this problem as well.

ralphievolt commented 2 years ago

Try this. Works for me!!

const qrStyle = {
  width: "80%",
  height: "60%",
  top: "0",
  left: "0",
  overflowY: "hidden",
  overflowX: "hidden",
  objectFit: "cover"
}
 <QrReader
            onResult={(result, error) => {
              if (!!result) {
                setData(result?.text);
              }

              if (!!error) {
                console.info(error);
              }
            }}

            videoContainerStyle={qrStyle}
            scanDelay={100}
            constraints={{ facingMode: facingMode }}
            className="flex align-items-center justify-content-center mt-2"
          />