Selecting camera based on facingMode; Relates to #128

example/live_w_locator.js

@@ -97,9 +97,9 @@ $(function() {
                 constraints: function(value){
                     var values = value.split('x');
                     return {
-                        width: parseInt(values[0]),
-                        height: parseInt(values[1])
-                    }
+                        width: {min: parseInt(values[0])},
+                        height: {min: parseInt(values[1])}
+                    };
                 }
             },
             numOfWorkers: function(value) {
@@ -128,9 +128,10 @@ $(function() {
             inputStream: {
                 type : "LiveStream",
                 constraints: {
-                    width: 640,
-                    height: 480,
-                    facingMode: "environment"
+                    width: {min: 640},
+                    height: {min: 480},
+                    facingMode: "environment",
+                    aspectRatio: {min: 1, max: 2}
                 }
             },
             locator: {

src/input/camera_access.js

@@ -1,4 +1,9 @@
-import {merge, pick} from 'lodash';
+import {omit, pick} from 'lodash';
+
+const facingMatching = {
+    "user": /front/i,
+    "environment": /back/i
+};
 
 var streamRef;
 
@@ -68,16 +73,50 @@ function deprecatedConstraints(videoConstraints) {
     return normalized;
 }
 
+function pickDevice(constraints) {
+    const desiredFacing = constraints.video.facingMode,
+        facingMatch = facingMatching[desiredFacing];
+
+    if (!facingMatch) {
+        return Promise.resolve(constraints);
+    }
+    return navigator.mediaDevices.enumerateDevices()
+    .then(devices => {
+        const selectedDeviceId = devices
+            .filter(device => device.kind === 'videoinput' && facingMatch.test(device.label))
+            .map(facingDevice => facingDevice.deviceId)[0];
+        if (selectedDeviceId) {
+            constraints = {
+                ...constraints,
+                video: {
+                    ...omit(constraints.video, ["facingMode"]),
+                    deviceId: selectedDeviceId,
+                }
+            };
+        }
+        return Promise.resolve(constraints);
+    });
+}
+
 function pickConstraints(videoConstraints) {
-    return {
+    const normalizedConstraints = {
         audio: false,
         video: deprecatedConstraints(videoConstraints)
     };
+
+    if (!normalizedConstraints.video.deviceId) {
+        if (typeof normalizedConstraints.video.facingMode === 'string'
+                && normalizedConstraints.video.facingMode.length > 0) {
+            return pickDevice(normalizedConstraints);
+        }
+    }
+    return Promise.resolve(normalizedConstraints);
 }
 
 export default {
     request: function(video, videoConstraints) {
-        return initCamera(video, pickConstraints(videoConstraints));
+        return pickConstraints(videoConstraints)
+            .then(initCamera.bind(null, video));
     },
     release: function() {
         var tracks = streamRef && streamRef.getVideoTracks();