Allow custom device id chooser function to be provided as prop

When zero devices matches the wanted `facingMode`, the first video device
found is chosen. That might not always be the wanted behaviour.

These changes allows a custom function to be provided in the `chooseDeviceId`
prop on the `<QrReader>` component. That function will allowed to choose
which device should be used of the possibly matched video devices or all the
video devices discovered.

The default behaviour stays as before, so this has no effect on projects
that doesn't provide the `chooseDeviceId` prop.

Author: phillipj

README.md

@@ -123,6 +123,12 @@ Type: `string`, Optional
 
 ClassName for the container element.
 
+**chooseDeviceId**
+
+Type: `function`, Optional, Arguments: (1) video devices matching `facingMode`, (2) all video devices
+
+Called when choosing which device to use for scanning. By default chooses the first video device matching `facingMode`, if no devices match the first video device found is choosen.
+
 ## Dev
 
 ### Install dependencies

lib/getDeviceId.js

@@ -3,7 +3,15 @@
 var _require = require('./errors'),
     NoVideoInputDevicesError = _require.NoVideoInputDevicesError;
 
+function defaultDeviceIdChooser(filteredDevices, videoDevices) {
+  return filteredDevices.length > 0 ? filteredDevices[0].deviceId
+  // No device found with the pattern thus use another video device
+  : videoDevices[0].deviceId;
+}
+
 module.exports = function getDeviceId(facingMode) {
+  var chooseDeviceId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDeviceIdChooser;
+
   // Get manual deviceId from available devices.
   return new Promise(function (resolve, reject) {
     var enumerateDevices = void 0;
@@ -35,12 +43,7 @@ module.exports = function getDeviceId(facingMode) {
         return pattern.test(label);
       });
 
-      if (filteredDevices.length > 0) {
-        resolve(filteredDevices[0].deviceId);
-      } else {
-        // No device found with the pattern thus use another video device
-        resolve(videoDevices[0].deviceId);
-      }
+      resolve(chooseDeviceId(filteredDevices, videoDevices));
     });
   });
 };

lib/index.js

@@ -1,6 +1,13 @@
 const { NoVideoInputDevicesError } = require('./errors')
 
-module.exports = function getDeviceId(facingMode) {
+function defaultDeviceIdChooser(filteredDevices, videoDevices) {
+  return (filteredDevices.length > 0)
+    ? filteredDevices[0].deviceId
+    // No device found with the pattern thus use another video device
+    : videoDevices[0].deviceId
+}
+
+module.exports = function getDeviceId(facingMode, chooseDeviceId = defaultDeviceIdChooser) {
   // Get manual deviceId from available devices.
   return new Promise((resolve, reject) => {
     let enumerateDevices
@@ -32,12 +39,7 @@ module.exports = function getDeviceId(facingMode) {
       const filteredDevices = videoDevices.filter(({ label }) =>
         pattern.test(label))
 
-      if (filteredDevices.length > 0) {
-        resolve(filteredDevices[0].deviceId)
-      } else {
-        // No device found with the pattern thus use another video device
-        resolve(videoDevices[0].deviceId)
-      }
+      resolve(chooseDeviceId(filteredDevices, videoDevices))
     })
   })
 }

src/getDeviceId.js

@@ -27,6 +27,7 @@ module.exports = class Reader extends Component {
     maxImageSize: PropTypes.number,
     style: PropTypes.object,
     className: PropTypes.string,
+    chooseDeviceId: PropTypes.func,
   };
   static defaultProps = { delay: 500, style: {}, maxImageSize: 1000 };
 
@@ -117,9 +118,9 @@ module.exports = class Reader extends Component {
     }
   }
   initiate(props = this.props) {
-    const { onError, facingMode } = props
+    const { onError, facingMode, chooseDeviceId } = props
 
-    getDeviceId(facingMode)
+    getDeviceId(facingMode, chooseDeviceId)
       .then(deviceId => {
         return navigator.mediaDevices.getUserMedia({
           video: {