How to fit a high resolution livestream on a small screen?

[tergytrg]

Hi,

I'm trying to make a barcode scanner for my phone. If I make the scanner-container wider than 360px, then it won't fit on my phone. But it's very bad at scanning smaller barcodes with such a small resolution. Scanning those barcodes with a width of 1920 works perfectly fine, but it doesn't fit on my screen.

In the demo, you can select a high resolution and it still fits. How is this possible?

Thanks in advance,

Tergy

I'm changing the size in this part of the code:

inputStream: { name: "Live", type: "LiveStream", target: document.querySelector('#scanner-container'), constraints: { width: 640, height: 480, facingMode: "environment" }, }

[ericblade]

i'm.. not following? even the smallest of modern devices typically have screens with much wider resolution than 360, i think even the Palm devices are wider than that (excluding the old webOS palm devices, which wouldn't support media capture via modern api anyway) ...

I think on Android, if you ask for a camera at 1920x1080, but you only provide a viewable area of half that, it'll rescale the image down to fit the given area. Or maybe that's on desktop Chrome, not mobile Chrome, it's been quite a while since I've fiddled with that.

The camera resolution is definitely independent of the viewport size, even if your browser does try to rescale the camera to fit the viewport size. I know in some places it does, and some places it doesn't, I just don't remember exactly which is where.

[tergytrg]

For some reason, the screen-size increased when i increased the resolution. I kinda fixed this by using <meta name='viewport' content='width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0' > to zoom out the entire site, and then making everything bigger and thus increasing the resolution.

[tergytrg]

Edit: by using <meta name='viewport' content='width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0' >