navigator.mediaDevices.getUserMedia - Reverse camera list order / show only rear cameras in HTML5 QR JS Code Scanner

Question

I'm using the following QR Code scanner for a PHP application to scan QR codes

Link to HTML5 JS QR Code Scanner

The JS file in question for which I have a local copy of referenced in my HTML file in my case

However when selecting cameras on both Android and iOS the list is ordered front cameras first, back cameras last. I am sure this may vary by device, however is there a way to either

A) open rear camera automatically

B) only allow access to back cameras

C) reverse the order of returned cameras so that the bottom comes back at the top of the list, thus putting rear cameras above front cameras in the list

Thanks

Answer 1

This is unreasonably messy, sad to say. (Why? Apple is dragging their feet on providing first-class support for getUserMedia(), I suppose because web apps don't have to go through the app store.)

You will have to write a bit of code to use .enumerateDevices() to look for the video device you want. In Android devices, the device's .label property contains the string back for the camera you want.

In iOS devices, the front camera is the first one in the result list from .enumerateDevices(). It's hard to use the .label property because it's localized to the iOS user's own language. (Android doesn't localize those labels.)

If you'll provide a picklist simply sort it so the back camera is first before you present it.

Here's my research on the topic.

getUserMedia detect front camera