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

[ashvejnov]

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((

[ashvejnov]

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]

@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]

@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]

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]

reduce your fps to 8 or 10

[siadou]

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,
        ],
      };

[nicolidin]

We had the same issue I've done: width: 200vw and scale done the div like @siadou did, and it allow the scanner to works on way bigger barcode. My code:

.qrScannerWrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.qrContainerVideo {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 200vw; // Double viewport width for extended capture
  transform: scale(0.4); // Scale down to 40% for normal display
  transform-origin: 0 0 0; // Transform from top-left corner
}