Update: facingMode can now be found in Chrome for Android thanks to the adapter.js polyfill!

facingMode is currently not supported in Chrome for Android, but it works smoothly in Firefox for Android.

When implementing constraints, make sure to adhere to the standard guidelines: (you can use this https fiddle for Chrome):

var gum = mode => 
  navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: mode}}})
  .then(stream => (video.srcObject = stream))
  .catch(e => log(e));

var stop = () => video.srcObject && video.srcObject.getTracks().forEach(t => t.stop());

var log = msg => div.innerHTML += msg + "<br>";

<button onclick="stop();gum('user')">Front</button>
<button onclick="stop();gum('environment')">Back</button>
<div id="div"></div><br>
<video id="video" height="320" autoplay></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

The { exact: } notation indicates that the constraint is mandatory, and failure may occur if the user lacks the appropriate camera. Omitting it makes the constraint optional, which in Firefox for Android only alters the default choice in the camera selection during permission prompts.

After studying Peter's code () closely, I devised a solution to access the rear camera:

function handleSuccess(stream) {
  window.stream = stream; // allowing access to browser console
  video.srcObject = stream;
}

function handleError(error) {
  console.log('navigator.getUserMedia error: ', error);
}

var DEVICES = [];
var final = null;
navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {

        var arrayLength = devices.length;
        for (var i = 0; i < arrayLength; i++)
        {
            var tempDevice = devices[i];
            
            // Picking only video input devices (cameras) and checking if they match the desired facing mode
            // Assigning device found to "final"
            if (tempDevice.kind == "videoinput")
            {
                DEVICES.push(tempDevice);
                if(tempDevice.facingMode == "environment" ||tempDevice.label.indexOf("facing back")>=0 )
                    {final = tempDevice;}
            }
        }

        var totalCameras = DEVICES.length;
        
        // If no suitable camera is found, select the last one by default
        if(final == null)
        {
            //console.log("no suitable camera, getting the last one");
            final = DEVICES[totalCameras-1];
        };

        // Defining constraints and calling getUserMedia with the final selected device
        var constraints = {
        audio: false, 
        video: {
            deviceId: {exact: final.deviceId}
            }
        };

        navigator.mediaDevices.getUserMedia(constraints).
        then(handleSuccess).catch(handleError);

    })
    .catch(function(err) {
        console.log(err.name + ": " + err.message);
});

When deploying our web application to Android using Cordova, I encountered various challenges in accessing the rear camera. After trying multiple solutions, I finally found success with the following code snippet:

constraints = {
    audio: false,
    video: {
        width: 400,
        height: 300,
        deviceId: deviceId ? {exact: deviceId} : undefined
    }
};

To retrieve the deviceId, I utilized the following method:

navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {
        // devices is an array of available audio and video inputs. The deviceId property was crucial for switching cameras.
    })
    .catch(function(err) {
        console.log(err.name + ": " + error.message);
});

I made a conscious decision not to rely on a Cordova plugin so that transitioning away from Cordova in the future would be less burdensome.

Here's a nifty code snippet that might come in handy:

let isFront = false;
document.getElementById('toggle-button').onclick = function() { isFront = !isFront; };
let videoOptions = { facingMode: (isFront ? "user" : "environment") };

This should do the trick for you.

After updating to Chrome version 52, I encountered issues with the adapter.js solutions not working as expected. To solve this problem, I decided to enumerate devices first and came up with a solution that involves flipping the camera and displaying the video on the screen. Although there may be alternative methods to achieve this, I found it necessary to stop the track and obtain a new stream in my implementation.

let Video = function() {
    let cameras = [];
    let currCameraIndex = 0;
    let constraints = {
        audio: true,
        video: {
          deviceId: { exact: "" }
        }
      };
    let videoCanvas = $('video#gum');


    this.initialize = function() {
      return enumerateDevices()
        .then(startVideo);
    };

    this.flipCamera = function() {
      currCameraIndex += 1; 
      if (currCameraIndex >= cameras.length) {
        currCameraIndex = 0;
      }

      if (window.stream) {
        window.stream.getVideoTracks()[0].stop();
      }
      return startVideo();
    };

    function enumerateDevices() {
      return navigator.mediaDevices.enumerateDevices()
        .then(function(devices) {
          devices.forEach(function(device) {
            console.log(device);
            if (device.kind === "videoinput") {
              cameras.push(device.deviceId);
            }
          });
          console.log(cameras);
        });
    }

    function startVideo() {
      constraints.video.deviceId.exact = cameras[currCameraIndex];
      return navigator.mediaDevices.getUserMedia(constraints)
        .then(handleSuccess).catch(handleError);
    }

    function handleSuccess(stream) {
      videoCanvas[0].srcObject = stream;
      window.stream = stream;
    }

    function handleError(error) {
      alert(error);
    }
};

For optimal rear camera functionality:

navigator.mediaDevices.getUserMedia({
video: {facingMode: "environment",
 height:{<heightValueHere>},
 width : {<widthValueHere>} 
}
})
.then(function(stream){
window.stream = stream;
video.srcObject = stream;

})