Refresh the page and take a look at the drop down select next to the button. If you’re on Android, or using Chrome or Firefox, you will see the name of the cameras you have available.

On an iPhone however, you will see the generically named “Camera 1” and “Camera 2” from our function. On iOS you will not get the labels of the cameras until you have granted permission for the site to use at least one of the cameras. This makes our interface less useful for selecting a camera as, even though you do get the ID of the devices, you can’t tell which camera is which.

We have not yet hooked up the drop down select to change the camera. Before we do, let’s look at another way we can influence which camera we want to select.

Facing mode

An alternative approach that we can use to select a camera is the facingMode constraint. This is a less exact way of picking a camera than getting its ID from the enumerateDevices function, but works really well for mobile devices. There are four options you can use for the constraint: user , environment , left and right . The constraints are explained in the MDN documentation, for the purposes of this post we’re going to use user and environment as they map nicely to front facing and back facing cameras on a mobile device.