diff --git a/app/manifest.json b/app/manifest.json index 6933652e6..52256c5b7 100644 --- a/app/manifest.json +++ b/app/manifest.json @@ -76,6 +76,5 @@ "ids": [ "*" ] - }, - "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" + } } diff --git a/package-lock.json b/package-lock.json index 3e1b69db9..0fd733fa7 100644 --- a/package-lock.json +++ b/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=", - "dev": true + "integrity": "sha1-45mpgiV6J22uQou5KEXLcb3CbRk=" }, "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", diff --git a/package.json b/package.json index 168ab0171..1ab582428 100644 --- a/package.json +++ b/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", - "multihashes": "^0.4.12", - "eth-ens-namehash": "^2.0.8" + "xtend": "^4.0.1" }, "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", diff --git a/ui/app/components/qr-scanner/qr-scanner.component.js b/ui/app/components/qr-scanner/qr-scanner.component.js index fd3361cf2..e0b2c40d6 100644 --- a/ui/app/components/qr-scanner/qr-scanner.component.js +++ b/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({ - video: this.camera, - backgroundScan: false, - continuous: true, - }) - this.scanner.addListener('scan', (content) => { - this.scanner.stop().then(_ => { - const result = this.parseContent(content) + this.scanning = true + this.initCamera() + } + } + + initCamera () { + console.log('QR-SCANNER: initCamera ') + 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(_ => { - this.scanning = false - this.props.hideQrScanner() - this.setState({ ready: false }) - }) + console.log('QR-SCANNER: stopping scanner...') + this.codeReader.reset() + this.scanning = false + this.props.hideQrScanner() + this.setState({ ready: false }) } render () { @@ -126,11 +132,13 @@ class QrScanner extends Component { justifyContent: 'center', }}>