working without permission issues

app/manifest.json

@@ -76,6 +76,5 @@
     "ids": [
       "*"
     ]
-  },
+  }
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
 }

package-lock.json

@@ -1623,6 +1623,15 @@
                 "@types/react": "*"
             }
         },
+        "@zxing/library": {
+            "version": "0.7.0",
+            "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.7.0.tgz",
+            "integrity": "sha512-VJ1cJaCWVF8MspnuyaZKGKlrSQLqQ5usgSap8uuCAvWGQ6W6OwN1NeGvnjhT+9hmnwkHK8XjaflvzaDBC7nKnw==",
+            "requires": {
+                "text-encoding": "^0.6.4",
+                "ts-custom-error": "^2.2.1"
+            }
+        },
         "JSONStream": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.2.tgz",
@@ -30207,8 +30216,7 @@
         "text-encoding": {
             "version": "0.6.4",
             "resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.6.4.tgz",
-            "integrity": "sha1-45mpgiV6J22uQou5KEXLcb3CbRk=",
+            "integrity": "sha1-45mpgiV6J22uQou5KEXLcb3CbRk="
-            "dev": true
         },
         "text-table": {
             "version": "0.2.0",
@@ -30668,6 +30676,11 @@
             "resolved": "https://registry.npmjs.org/try-require/-/try-require-1.2.1.tgz",
             "integrity": "sha1-NEiaLKwMCcHMEO2RugEVlNQzO+I="
         },
+        "ts-custom-error": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-2.2.1.tgz",
+            "integrity": "sha512-lHKZtU+PXkVuap6nlFZybIAFLUO8B3jbCs1VynBL8AUSAHfeG6HpztcBTDRp5I+fN5820N9kGg+eTIvr+le2yg=="
+        },
         "tslib": {
             "version": "1.9.2",
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",

package.json

@@ -65,6 +65,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^1.0.0",
+    "@zxing/library": "^0.7.0",
     "abi-decoder": "^1.0.9",
     "asmcrypto.js": "0.22.0",
     "async": "^2.5.0",
@@ -94,6 +95,7 @@
     "eslint-plugin-react": "^7.4.0",
     "eth-bin-to-ops": "^1.0.1",
     "eth-contract-metadata": "github:MetaMask/eth-contract-metadata#master",
+    "eth-ens-namehash": "^2.0.8",
     "eth-hd-keyring": "^2.0.0",
     "eth-json-rpc-filters": "^1.2.6",
     "eth-json-rpc-infura": "^3.0.0",
@@ -142,6 +144,7 @@
     "metamascara": "^2.0.0",
     "metamask-logo": "^2.1.4",
     "mkdirp": "^0.5.1",
+    "multihashes": "^0.4.12",
     "multiplex": "^6.7.0",
     "number-to-bn": "^1.7.0",
     "obj-multiplex": "^1.0.0",
@@ -195,9 +198,7 @@
     "web3": "^0.20.1",
     "web3-provider-engine": "^14.0.5",
     "web3-stream-provider": "^3.0.1",
-    "xtend": "^4.0.1",
+    "xtend": "^4.0.1"
-    "multihashes": "^0.4.12",
-    "eth-ens-namehash": "^2.0.8"
   },
   "devDependencies": {
     "@sentry/cli": "^1.30.3",
@@ -257,7 +258,6 @@
     "gulp-watch": "^5.0.0",
     "gulp-zip": "^4.0.0",
     "http-server": "^0.11.1",
-    "instascan": "github:brunobar79/instascan#141f7b2aa12c9e833de41ba3daf37a1c1b7c070e",
     "image-size": "^0.6.2",
     "isomorphic-fetch": "^2.2.1",
     "jsdoc": "^3.5.5",

ui/app/components/qr-scanner/qr-scanner.component.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import { hideQrScanner, qrCodeDetected} from '../../actions'
-import Instascan from 'instascan'
 import Spinner from '../spinner'
+import { BrowserQRCodeReader } from '@zxing/library'
 
 class QrScanner extends Component {
   static propTypes = {
@@ -18,18 +18,36 @@ class QrScanner extends Component {
       msg: 'Accesing your camera...',
     }
     this.scanning = false
+    this.codeReader = null
   }
 
   componentDidUpdate () {
     if (this.props.visible && this.camera && !this.scanning) {
-      this.scanner = new Instascan.Scanner({
+      this.scanning = true
-        video: this.camera,
+      this.initCamera()
-        backgroundScan: false,
+    }
-        continuous: true,
+  }
-      })
+
-      this.scanner.addListener('scan', (content) => {
+  initCamera () {
-        this.scanner.stop().then(_ => {
+    console.log('QR-SCANNER: initCamera ')
-          const result = this.parseContent(content)
+    this.codeReader = new BrowserQRCodeReader()
+    this.codeReader.getVideoInputDevices()
+      .then(videoInputDevices => {
+        console.log('QR-SCANNER: getVideoInputDevices ', videoInputDevices)
+        setTimeout(_ => {
+          this.setState({
+            ready: true,
+            msg: 'Place the QR code in front of your camera so we can read it...'})
+            console.log('QR-SCANNER: this.state.ready = true')
+        }, 2000)
+
+        console.log('QR-SCANNER: started scanning...')
+        this.codeReader.decodeFromInputVideoDevice(videoInputDevices[0].deviceId, 'video')
+        .then(content => {
+          console.log('QR-SCANNER: content found!', content)
+          this.codeReader.reset()
+          console.log('QR-SCANNER: stopped scanning...')
+          const result = this.parseContent(content.text)
           if (result.type !== 'unknown') {
             console.log('QR-SCANNER: CODE DETECTED', result)
             this.props.qrCodeDetected(result)
@@ -37,27 +55,15 @@ class QrScanner extends Component {
             this.setState({ ready: false })
           } else {
             this.setState({msg: 'Error: We couldn\'t identify that QR code'})
+            console.log('QR-SCANNER: Unknown code')
           }
-          this.scanning = false
         })
+        .catch(err => {
+          console.log('QR-SCANNER: decodeFromInputVideoDevice threw an exception: ', err)
+        })
+      }).catch(err => {
+        console.log('QR-SCANNER: getVideoInputDevices threw an exception: ', err)
       })
-      Instascan.Camera.getCameras().then((cameras) => {
-        if (cameras.length > 0) {
-          this.scanner.start(cameras[0])
-          setTimeout(_ => {
-            this.setState({
-              ready: true,
-              msg: 'Place the QR code in front of your camera so we can read it...'})
-          }, 2000)
-          console.log('QR-SCANNER: started scanning with camera', cameras[0])
-        } else {
-          this.setState({ msg: 'No camera found :('})
-        }
-      }).catch(function (e) {
-        console.error(e)
-      })
-      this.scanning = true
-    }
   }
 
   parseContent (content) {
@@ -76,11 +82,11 @@ class QrScanner extends Component {
 
 
   stopAndClose = () => {
-    this.scanner.stop().then(_ => {
+    console.log('QR-SCANNER: stopping scanner...')
-      this.scanning = false
+    this.codeReader.reset()
-      this.props.hideQrScanner()
+    this.scanning = false
-      this.setState({ ready: false })
+    this.props.hideQrScanner()
-    })
+    this.setState({ ready: false })
   }
 
   render () {
@@ -126,11 +132,13 @@ class QrScanner extends Component {
                 justifyContent: 'center',
               }}>
               <video
+                id="video"
                 style={{
-                  width: 'auto',
+                   width: 'auto',
-                  height: '275px',
+                   height: '275px',
-                  marginLeft: '-15%',
+                   marginLeft: '-15%',
-                  display: this.state.ready ? 'block' : 'none',
+                   display: this.state.ready ? 'block' : 'none',
+                   transform: 'scaleX(-1)',
                 }}
                 ref={(cam) => {
                   this.camera = cam