How to select proper backfacing camera in Javascript?

Selecting the appropriate rear camera in JavaScript is commonly required when developing mobile or web applications, especially for features such as video calls or photo capture. This can be achieved by using the MediaDevices interface within Web APIs, specifically the getUserMedia() method. Below is a step-by-step guide on how to select the rear camera:

1. Check Browser Support

First, verify that the user's browser supports navigator.mediaDevices and navigator.mediaDevices.getUserMedia. This can be done with a simple conditional statement:

javascript
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
   // Browser supports getUserMedia
} else {
   console.log('Browser does not support getUserMedia');
}

2. Enumerate Devices

Use the navigator.mediaDevices.enumerateDevices() method to retrieve the device list and filter out video input devices (i.e., cameras).

javascript
async function getBackCamera() {
   try {
      const devices = await navigator.mediaDevices.enumerateDevices();
      const videoDevices = devices.filter(device => device.kind === 'videoinput');

      if(videoDevices.length === 0){
         throw 'No cameras found';
      }

      // Default to the first video device
      let backCamera = videoDevices[0];

      // Attempt to find the camera labeled as rear
      for (let device of videoDevices) {
         if (device.label.toLowerCase().includes('back')) {
            backCamera = device;
            break;
         }
      }
      
      return backCamera;
   } catch (e) {
      console.error('Error getting camera:', e);
      return null;
   }
}

3. Access the Camera

Once you have the camera's device ID, request access using the getUserMedia() method. Here, we specifically specify the deviceId to select the detected rear camera.

javascript
async function activateCamera(camera) {
   try {
      const stream = await navigator.mediaDevices.getUserMedia({
         video: { deviceId: { exact: camera.deviceId } }
      });
      // Bind the video stream to a video element
      const videoElement = document.querySelector('video');
      videoElement.srcObject = stream;
   } catch (e) {
      console.error('Unable to access camera', e);
   }
}

4. Implementation and Testing

Combine the above steps and call these functions to implement camera selection and video stream display.

javascript
async function setupCamera() {
   const backCamera = await getBackCamera();
   if(backCamera) {
      await activateCamera(backCamera);
   } else {
      console.log('No rear camera found');
   }
}

setupCamera();

Summary

This implementation ensures effective selection of the rear camera on supported browsers. In practical applications, you may need to handle additional edge cases, such as users denying permission requests or devices lacking cameras. Additionally, device labels can vary across different devices and browsers, so you may need more logic to accurately identify the rear camera.