search

ericblade / quagga2

An advanced barcode-scanner written in Javascript and TypeScript - Continuation from https://github.com/serratus/quaggajs
MIT License
766 stars 85 forks source link

Width and height constraints swapped in mobile devices #488

Open lampsbr opened 1 year ago

lampsbr commented 1 year ago

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

github-actions[bot] commented 1 year ago

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

Davidas-98 commented 1 year ago

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

ericblade commented 1 year ago

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.