html5-qrcode
html5-qrcode copied to clipboard
mebjas
Default to Back Camera (if available) when using the Html5QrcodeScanner instead of Html5Qrcode
There is no option to default to the back camera option when using the Html5QrcodeScanner class. If there is an option. Please let me know how to use it.
I've modified html5-qrcode-scanner.js to achieve this goal. The idea is:
- Use an array to keep the camera ids on calling Html5Qrcode.getCameras()
- Use an integer to keep the index of current camera id, initialize it to the last one (If there is only one camera, set index to 0; if there are two ,set index to 1)
- Pass the selected camera id (Not the index) on calling html5Qrcode.start()
- Add a button to switch camera, change the index and recall html5Qrcode.stop() & html5Qrcode.start() when clicked
Per APIs there is no reliable way to determine which camera Id is back and which is front. In the past versions the support for facingMode was added to Html5Qrcode (not Html5QrcodeScanner class). Here's a demo for that - link to demo
While I do see benefits to adding this to Html5QrcodeScanner directly, the problem is this is not scalable across mobile and desktops as the facing mode aren't supported first class on desktop/laptop environment. I can expose this as a configuration to developers to choose (i.e. cameraId model or facing mode model in Html5QrcodeScanner) but I'd need some feedbacks for the same on how you'd prefer it.
@imSurya-georgian @georgewei - based on the scenarios / use-cases you are using this library how'd you like this issue be solved cross platform?
Another direction would be to try to detect if the browser is from a mobile or non mobile browser and show the selection accordingly.
Ideas are welcome, happy to implement this.
Detecting the brower type is not reliable for some mobile browers can run in 'desktop' mode. I prefer to expose the camera info (id, name, etc.) and let the developer to choose which is the default one.
@mebjas Sorry for the late response. I am using Html5QrcodeScanner render function to give UI to the 'div' element. This is already implemented. Now that I want the Rendered UI to use the back camera by default whenever it is available and if not use the only available camera (Front Camera).
Hello did we find a solution to default load which camera to use on load?
listen the selectbox with video devices and use localstorage to save it.
For my use case, I would love to ignore the front facing camera if the back facing one exist. I would prefer not to give the user the choice and directly start scanning using the back one.
With the current version the user has to clock on dropdown, change and click to start scanning which is very poor UX IMO.
@yelhouti your case is a special one that you must develop yourself, nothing to do with the UX