getUserMedia detect front camera

Question

I'm using the 'facingMode' constrain in order to switch between the two cameras, but I'm not able to fully decided whether the user end has an 'environment' camera (back facing camera).. it's not enough to to count the 'videoinput' of the returned promise of enumerateDevices function.

I tried searching for it and all I found was to use the video MediaTrack label and search for containing "facing back" string, which doesnt seem to be constant in all browsers (IOS for instance).

I'm sure there must be a better way :)

Answer 1

A second answer here. The selection of front (facingMode:'user') and back (facingMode:'environment') cameras is an issue for something I'm working on.

It's possible to tell which camera you're using if you have an open .getUserMedia() stream to a camera. stream.getTracks[0].getCapabilities() gives back an object with either a facingMode:'user' or facingMode:'environment' field in it. But you already must have a stream open to the particular device to get this.

Here's what I have discovered using multiple devices in a mobile-device test farm. These are the order of the device entries yielded by .enumerateDevices().

tl;dr: On iOs devices, the front facing camera is the first videoinput device in the list, and the back-facing camera is the second one. On Android devices, the front facing camera or cameras have the string "front" in their device.label values and the back facing camra or cameras have the string "back".

iOS devices

1. iOS devices running Mobile Safari: the device.label items are all localized to the currently selected national language.
2. The devices always appear in this order in the device array, with the front camera always appearing as the first device in the array with device.kind:'videoinput'. Here is the list of devices labels I got from every iOS device I tried, auf Deutsch:
   • audioinput:iPhone Mikrofon
   • videoinput:Frontkamera
   • videoinput:Rückkamera
3. Some iPhones have multiple camera lenses on the back. Nevertheless, the MediaStream APIs in Mobile Safari only show one camera.

You can tell you’re on an iPhone when

navigator.userAgent.indexOf(' iPhone ') >= 0  

You can tell you’re on an iPad when

    typeof navigator.maxTouchPoints === 'number' 
 && navigator.maxTouchPoints > 2
 && typeof navigator.vendor === 'string'
 && navigator.vendor.indexOf('Apple') >= 0

Notice that iPad Safari now lies and claims it's an Intel Mac. It presents this User-Agent string:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.1 Safari/605.1.15

Android devices

1. Android devices: the `device.label' items are not localized.

2. The devices I looked at had different device.label lists. But the cameras I found all had either the string front or back in the device.label.

3. A Pixel 3A running Android 11 has this list of devices.

   • audioinput:Standard
   • audioinput:Speakerphone
   • audioinput:Headset earpiece
   • videoinput:camera2 1, facing front
   • videoinput:camera2 0, facing back
   • audiooutput:Standard

4. A Samsung SM-A205F running Android 9 has these devices in order.

   • audioinput:Default
   • audioinput:Speakerphone
   • audioinput:Headset earpiece
   • videoinput:camera2 1, facing front
   • videoinput:camera2 2, facing front
   • videoinput:camera2 0, facing back
   • audiooutput:Default

   This one enumerates two different front-facing selfiecams. The first one offers higher resolution than the second one.

5. A Samsung SM-G925I running Android 6.0.1

   • audioinput:Default
   • audioinput:Speakerphone
   • audioinput:Headset earpiece
   • videoinput:camera2 1, facing front
   • videoinput:camera2 0, facing back
   • audiooutput:Default

And, by the way, the results of .getSupportedConstraints() don't help much: both iOS and Android give facingMode:true.