Only mirror video when device is detected as user facing #46

Author: JodusNodus

lib/getDeviceId.js

@@ -7,13 +7,17 @@ function defaultDeviceIdChooser(filteredDevices, videoDevices, facingMode) {
   if (filteredDevices.length > 0) {
     return filteredDevices[0].deviceId;
   }
-  if (videoDevices.length == 1 || facingMode == 'front') {
+  if (videoDevices.length == 1 || facingMode == 'user') {
     return videoDevices[0].deviceId;
   }
   return videoDevices[1].deviceId;
 }
 
-module.exports = function getDeviceId(facingMode) {
+var getFacingModePattern = function getFacingModePattern(facingMode) {
+  return facingMode == 'environment' ? /rear|back|environment/ig : /front|user|face/ig;
+};
+
+function getDeviceId(facingMode) {
   var chooseDeviceId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDeviceIdChooser;
 
   // Get manual deviceId from available devices.
@@ -35,7 +39,7 @@ module.exports = function getDeviceId(facingMode) {
         return;
       }
 
-      var pattern = facingMode == 'rear' ? /rear|back|environment/ig : /front|user|face/ig;
+      var pattern = getFacingModePattern(facingMode);
 
       // Filter out video devices without the pattern
       var filteredDevices = videoDevices.filter(function (_ref) {
@@ -46,4 +50,6 @@ module.exports = function getDeviceId(facingMode) {
       resolve(chooseDeviceId(filteredDevices, videoDevices, facingMode));
     });
   });
-};
+}
+
+module.exports = { getDeviceId: getDeviceId, getFacingModePattern: getFacingModePattern };

lib/index.js

@@ -4,6 +4,7 @@
   "description": "A react component for reading QR codes from the webcam.",
   "main": "./lib/index.js",
   "scripts": {
+    "start": "concurrently --kill-others \"npm run build:watch\" \"npm run storybook\"",
     "storybook": "start-storybook -p 9001",
     "build": "gulp",
     "build:watch": "gulp watch",
@@ -32,6 +33,7 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.5.0",
+    "concurrently": "^3.5.0",
     "del": "^2.2.2",
     "eslint": "^2.13.1",
     "eslint-plugin-react": "^5.2.2",

package-lock.json

@@ -4,13 +4,17 @@ function defaultDeviceIdChooser(filteredDevices, videoDevices, facingMode) {
   if(filteredDevices.length > 0){
     return filteredDevices[0].deviceId
   }
-  if(videoDevices.length == 1 || facingMode == 'front'){
+  if(videoDevices.length == 1 || facingMode == 'user'){
     return videoDevices[0].deviceId
   }
   return videoDevices[1].deviceId
 }
 
-module.exports = function getDeviceId(facingMode, chooseDeviceId = defaultDeviceIdChooser) {
+const getFacingModePattern = (facingMode) => facingMode == 'environment'
+  ? /rear|back|environment/ig
+  : /front|user|face/ig
+
+function getDeviceId(facingMode, chooseDeviceId = defaultDeviceIdChooser) {
   // Get manual deviceId from available devices.
   return new Promise((resolve, reject) => {
     let enumerateDevices
@@ -30,9 +34,7 @@ module.exports = function getDeviceId(facingMode, chooseDeviceId = defaultDevice
         return
       }
 
-      const pattern = facingMode == 'rear'
-        ? /rear|back|environment/ig
-        : /front|user|face/ig
+      const pattern = getFacingModePattern(facingMode)
 
       // Filter out video devices without the pattern
       const filteredDevices = videoDevices.filter(({ label }) =>
@@ -42,3 +44,5 @@ module.exports = function getDeviceId(facingMode, chooseDeviceId = defaultDevice
     })
   })
 }
+
+module.exports = { getDeviceId, getFacingModePattern }

package.json

@@ -1,7 +1,7 @@
 const React = require('react')
 const { Component } = React
 const PropTypes = require('prop-types')
-const getDeviceId = require('./getDeviceId')
+const { getDeviceId, getFacingModePattern } = require('./getDeviceId')
 const havePropsChanged = require('./havePropsChanged')
 
 // Require adapter to support older browser implementations
@@ -31,20 +31,24 @@ module.exports = class Reader extends Component {
     resolution: PropTypes.number,
     showViewFinder: PropTypes.bool,
     style: PropTypes.any,
-    className: PropTypes.string
+    className: PropTypes.string,
   };
   static defaultProps = {
     delay: 500,
     resolution: 600,
     facingMode: 'environment',
-    showViewFinder: true
+    showViewFinder: true,
   };
 
   els = {};
 
   constructor(props) {
     super(props)
 
+    this.state = {
+      mirrorVideo: false,
+    }
+
     // Bind function to the class
     this.initiate = this.initiate.bind(this)
     this.initiateLegacyMode = this.initiateLegacyMode.bind(this)
@@ -97,7 +101,11 @@ module.exports = class Reader extends Component {
       }
     }
   }
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps, nextState) {
+    if(nextState !== this.state){
+      return true
+    }
+
     // Only render when the `propsKeys` have changed.
     const changedProps = havePropsChanged(this.props, nextProps, propsKeys)
     return changedProps.length > 0
@@ -127,7 +135,7 @@ module.exports = class Reader extends Component {
     }
   }
   initiate(props = this.props) {
-    const { onError, facingMode, resolution } = props
+    const { onError, facingMode } = props
 
     // Check browser facingMode constraint support
     // Firefox ignores facingMode or deviceId constraints
@@ -178,6 +186,10 @@ module.exports = class Reader extends Component {
     this.stopCamera = streamTrack.stop.bind(streamTrack)
 
     preview.addEventListener('loadstart', this.handleLoadStart)
+
+    const facingUserPattern = getFacingModePattern('user')
+    const isUserFacing = facingUserPattern.test(streamTrack.label)
+    this.setState({ mirrorVideo: isUserFacing })
   }
   handleLoadStart() {
     const { delay, onLoad } = this.props
@@ -317,7 +329,7 @@ module.exports = class Reader extends Component {
     const videoPreviewStyle = {
       ...previewStyle,
       objectFit: 'cover',
-      transform: facingMode == 'user' ? 'scaleX(-1)' : undefined,
+      transform: this.state.mirrorVideo ? 'scaleX(-1)' : undefined,
     }
     const imgPreviewStyle = {
       ...previewStyle,