search

nimiq / qr-scanner

Lightweight Javascript QR Code Scanner
https://nimiq.github.io/qr-scanner/demo
MIT License
2.41k stars 524 forks source link

when using `const qrScanner = new QrScanner(video)` the image is reversed horizontally #128

Open samuelcolvin opened 2 years ago

samuelcolvin commented 2 years ago

Hi thanks for qr-scanner it's working wonderfully, the only reliable way I can find to recognize QR codes.

I have a problem where using the following

    const qrScanner = new QrScanner(
      video,
      async (result) => {
        ...
      },
    )

    qrScanner.start()

The video image shown on screen is horizontally reversed when using my desktop, when using mobile (and therefore having an "environment facing" camera, it's not reversed.

If I simply use:

video.srcObject = await navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: 'environment'}})
video.play()

The video is not reversed, any idea how I can fix this?

nansouille commented 2 years ago

hello same problem here, but only when I use "show scan region" in your demo page thanks for your help.

resolved with a bit of css

     -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
danimoh commented 2 years ago

Hello, for user facing cameras, the video is mirrored, see https://github.com/nimiq/qr-scanner/blob/8bb46c3cbc6e6b1c256a7ef6abc866d734493f36/src/qr-scanner.ts#L901-L905 This is on purpose to make positioning the QR code in front of the webcam more intuitive, i.e. a movement to the left should also correspond to a movement to the left on the screen. This is on a best effort basis though as we can't always tell a camera's facing mode, see https://github.com/nimiq/qr-scanner/blob/8bb46c3cbc6e6b1c256a7ef6abc866d734493f36/src/qr-scanner.ts#L907-L916

The image you're seeing via the "show scan region" debug feature on the demo page is based on the original, unmodified video orientation.

As @nansouille said, you can overwrite this behavior by setting the video's transform via CSS manually, e.g. transform:none !important;. But note that this will disable the mirroring, which I believe is nice for most users.

If the facing mode is not correctly detected for your camera, it would be kind if you could post your camera's label (videoStream.getVideoTracks()[0].label) to see whether there's a way to detect it from that. Also, what phone or device and what browser are you using?