Open ashvejnov opened 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
@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 @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.
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
reduce your fps to 8 or 10
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,
],
};
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((