mebjas / html5-qrcode

A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org
https://qrcode.minhazav.dev
Apache License 2.0
4.86k stars 959 forks source link

Can't recognize long, but though standard Code-128 #770

Open ashvejnov opened 1 year ago

ashvejnov commented 1 year ago

Game changing solution, works perfectly. I'm stuck only with long C128 codes like this:

BJ0WX0E9500V1NAQ0186

try to code into Code-128 barcode - this barcode can't be recognized, however barcode scanning iOS/Android apps regognize it well((

image

ashvejnov commented 1 year ago

UPDATE: Fixed this issue by enlarging video box size in capturing UI... yeah) but still, it seems to be weird a bit, that decoding is so depending on UI video frame/box size.

P.S. Also created bug report in 3rd party hub: https://github.com/zxing-js/library/issues/564

alejandrovasquezoviedo commented 1 year ago

@ashvejnov @mebjas Is there any parameter to define the video frame/box size? I keep trying setting values higher than fps:50/qrbox:250 and it is not working at all. Thanks in advance tho

ashvejnov commented 1 year ago

@ashvejnov @mebjas Is there any parameter to define the video frame/box size? I keep trying setting values higher than fps:50/qrbox:250 and it is not working at all. Thanks in advance tho

Any qrbox size will work untill it's lower than your container div's width is. This is also what was "surprising" to me, but at least I saw proper warning in console when I firstly tried to increase qrbox param value simply. So, then I have enlarged the width of parent container (div) and it worked. But I also find this a bit weird :)

So, if you are using on mobile, you should set initial scale in viwport meta tag to 0.8 at least, that's what I did. By this, I've got basic window width on mobile at least 500+ px and I was able to enlarge video capture container to 450 px at least without horizontal scroll to appear.

alejandrovasquezoviedo commented 1 year ago

I was trying things out and i then at a phone it worked, changing parameters and resolution So i copy the resolution, set higher the values of qrbox, container and fps and it worked perfectly at any resolutions Waiting for a repo update but thanks for the solution :)

My settings are fps: 50 / qrbox: 350 / container: 600 px

ROBERT-MCDOWELL commented 1 year ago

reduce your fps to 8 or 10

siadou commented 1 year ago

set the container element scale to 0.5 and double the width of qrbox that works, but still very slow


.scannerWrap {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  z-index: 101;
  width: 200vw;
  height: 200%;
  scale: (0.5);
  transform-origin: 0 0 0;
  background-color: red;
}

      const config = {
        fps: 10,
        qrbox: document.body.clientWidth * 2,
        aspectRatio: document.body.clientHeight / document.body.clientWidth,
        formatsToSupport: [
          Html5QrcodeSupportedFormats.CODE_128,
          Html5QrcodeSupportedFormats.QR_CODE,
        ],
      };