How to determine which cameras are front and back facing when using HTML5 getUserMedia and enumerateDevices APIs?

Question

When accessing the camera using HTML5 getUserMedia APIs, you can either:

1. Request an unspecified "user" facing camera
2. Request an unspecified "environment" facing camera (optionally left or right)
3. Request a list of cameras available

Originally we used the "facing" constraint to choose the camera. If the camera faces the "user" we show it mirror image as is the convention.

We run into problems, however, when a user does not have exactly 1 user-facing and 1 environment-facing camera. They might be missing one of these, or have multiple. This can result in the wrong camera being used, or the camera not being mirrored appropriately.

So we are looking at enumerating the devices. However, I have not found a way to determine whether a video device is "user facing" and should be mirrored.

Is there any API available to determine whether a video input is "user" facing the in these APIs?

question from:https://stackoverflow.com/questions/65931096/how-to-determine-which-cameras-are-front-and-back-facing-when-using-html5-getuse

Answer 1

When you enumerate devices, devices that are an input may have a method called getCapabilities(). If this method is available you may call it to get a MediaTrackCapabilities object. This object has a field called facingMode which lists the valid facingMode options for that device.

For me this was empty on the PC but on my Android device it populated correctly.

Here's a jsfiddle you can use to check this on your own devices: https://jsfiddle.net/juk61c07/4/

Thanks to the comment from O. Jones for setting me in the right direction.