0

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

dropdown with 1st option selected

list of cameras order

Henry Aspden
  • 1,863
  • 3
  • 23
  • 45
  • I looked into adding ```facingMode: "environment"``` however that was already set, so i tried ```facingMode: { exact: "environment" }``` however this also didn't work – Henry Aspden May 14 '21 at 18:15
  • Does this answer your question? [getUserMedia detect front camera](https://stackoverflow.com/questions/65485170/getusermedia-detect-front-camera) – O. Jones May 15 '21 at 10:42
  • JSfiddle added here for reference - https://jsfiddle.net/haspden/yecxnbLr/ – Henry Aspden May 15 '21 at 19:26

1 Answers1

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

O. Jones
  • 103,626
  • 17
  • 118
  • 172
  • thanks for the information, not a solution as such, but useful regardless... thank you – Henry Aspden May 15 '21 at 12:32
  • If you come up with a better way of handling this, please let us know. This stuff is a hairball. – O. Jones May 15 '21 at 12:57
  • according to the API documentation on this specific example it is possible, have you looked through the attachment? This is for a QR code scanner but perhaps the same logic could be applied? https://github.com/mebjas/html5-qrcode – Henry Aspden May 15 '21 at 18:35