quagga2 icon indicating copy to clipboard operation
quagga2 copied to clipboard

Width and height constraints swapped in mobile devices

Open lampsbr opened this issue 2 years ago • 3 comments

I'm new to Quagga2, just met the project and I'm already able to read some barcodes in my Vuejs 2 project. Thank you for this!

That said, I noticed that the init.inputStream.constraints might be swapped in some situations. Is this some noob mistake I'm making? I always initialize my inputStream.constraints width and height with the following values: this.$refs.innerCard.clientWidth - 40 and this.$refs.innerCard.clientHeight - 32. It means I grab the size of a wrapper, already rendered in my screen, and I put the Quagga live stream in there.

It runs perfectly in my desktops (all running ubuntu and chrome). But this week I started testing in a real android phone and in an emulated pixel phone, and the livestream is rendered with swapped dimensions! I mean, if my wrapper html component is 1920 x 1080 px (a fullhd landscape screen), the livestream gets rendered in a 1080 x 1920 px tag, breaking my poor layout apart.

So I tested the opposite, swapping width and height myself, and now the code runs fine in mobile devices, but broken in my desktops.

For now I'll add some check to see if I'm running in a mobile device, and choose if I swap the dimensions or not, but I would like to know if I'm doing something terribly wrong or if it's a current bug in the project. My package.json says I'm running version ^1.8.2

lampsbr avatar Feb 23 '23 21:02 lampsbr

Thank you for filing an issue! Please be patient. :-)

github-actions[bot] avatar Feb 23 '23 21:02 github-actions[bot]

I have the same issue in portrait on a mobile device, on landscape it works as expected.

Davidas-98 avatar Mar 01 '23 08:03 Davidas-98

I haven't currently classified this as a "bug" per se, more a "It's Chrome on Android acting stupid" problem. When I was messing with this (admittedly, a very long time ago now) previously, only Chrome on Android had this specific problem, and it acts opposite from Chrome on Desktop, even when emulating a phone.

I don't think the constraints are backwards (although i don't use constraints to attempt to select the camera) as that just tells the browser which camera device capabilities you need. My experimentation was that the Video tag in Android operates incorrectly, swapping height and width.

If we could narrow it down a little more as to exactly what the problem is, I could probably make an attempt to account for it, or at least document it.

Also, my apologies for not seeing this until now, I apparently missed several things github had sent me some months ago, and just came across it when digging through my notifications.

ericblade avatar Jul 08 '23 22:07 ericblade