Context
Throughout the javascript web application the camera of a mobile device needs to be accessed. Since the target audience are mostly non tech-savvy users the requirement is in place that the “normal” (meaning the camera you would access with your native camera app) environment facing camera should automatically be selected (via constraints for getUserMedia). In this reddit post someone did extensive testing to provide the anecdotal evidence that on most devices the “normal” environment facing camera is the last element of the array returned by enumerateDevices. That solution worked pretty well (given the fact that it is hacky AF) as a workaround in combination with applied constraints.
Problem Description
Recently through testing we found out that the new Apple iPhone 15 also grants access to several other back cameras by returning them as accessible devices. For a German iPhone 15 following array elements are returned by enumerateDevices:
- {“deviceId”:”8D21D61778225020553037D14D6C44D2B041F99A”,”kind”:”videoinput”,”label”:”Frontkamera”,”groupId”:”81D098407FCCC6C69127F43494E9B2581C6B81FD”},
- {“deviceId”:”E43D579003A2D5A39CCFB6EF11656E5914ADD4E9″,”kind”:”videoinput”,”label”:”Rückseitige Triple-Kamera”,”groupId”:”1106FFA6A7FFFAB5B741270DB84BC7198826B228″},
- {“deviceId”:”1D1327F1DEA455980AFB862399B57C57844ECC2E”,”kind”:”videoinput”,”label”:”Rückseitige Dual-Weitwinkelkamera”,”groupId”:”41F7F33ABF662222F6FBBDD70ADA801E3C2AF50D”},
- {“deviceId”:”3172EB6B58C8683B1C1FC354F4CFADFFC8B9839F”,”kind”:”videoinput”,”label”:”Rückseitige Ultra-Weitwinkelkamera”,”groupId”:”055FCD0ACABB7F3F4ED13AFEB2138F3B1AEE887F”},
- {“deviceId”:”E329BE6AA0EB623A15F1BE6B3AAAF931291F17F2″,”kind”:”videoinput”,”label”:”Rückseitige Dual-Kamera”,”groupId”:”531CDE3F025AC7D6223E12E2DCFD7783EE2BAE8E”},
- {“deviceId”:”4F79029F1E82C5056517E33ABB46D08DE7802797″,”kind”:”videoinput”,”label”:”Rückkamera”,”groupId”:”70E52D260482C77E282233BABD8D44E9CB4ECFDD”},
- {“deviceId”:”40617F7C1A24EA1DE17254A0B2FFECD5153E2590″,”kind”:”videoinput”,”label”:”Rückseitige Telefotokamera”,”groupId”:”A56CB1DCE257F675C03899C85A49E18FED0E7618″}]
There is a total of seven cameras, of which six are back cameras. Also important to notice is that the last element is “Rückseitige Telefotokamera”, while the second last element is the desired “Rückkamera”. Given this data the “workaround” mentioned in the context section is not working anymore. This leads to the behavior “Rückseitige Telefotokamera” is automatically selected. Since this camera has no auto-focus and is using a different “perspective” (please excuse my lack of proper terminology) the users are not able to properly perform their wanted actions.
Forcing non tech-savvy users to manually select out of six back cameras does not seem like a good idea from an UI/UX perspective.
Question
Is there any way to distinguish cameras with a special effect like fish-eye, telephoto etc. from “normal” cameras, which would allow us to identify and filter them out?
Prior Research
I did quite a bit of research and it seems like many other people also encounter this problem. There is a also a github request to extend the Media Captures and Stream Spec with a decent amount of upvotes. There have been other hacky workarounds that use certain language-specific keywords to filter out such cameras but since device labels do not follow any specification that might also break at any point.