working without permission issues
This commit is contained in:
brunobar79
parent
4759915856
commit
6cd4bc9f4e
|
|
@ -76,6 +76,5 @@
|
|||
"ids": [
|
||||
"*"
|
||||
]
|
||||
},
|
||||
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
}}>
|
||||
<video
|
||||
id="video"
|
||||
style={{
|
||||
width: 'auto',
|
||||
height: '275px',
|
||||
marginLeft: '-15%',
|
||||
display: this.state.ready ? 'block' : 'none',
|
||||
width: 'auto',
|
||||
height: '275px',
|
||||
marginLeft: '-15%',
|
||||
display: this.state.ready ? 'block' : 'none',
|
||||
transform: 'scaleX(-1)',
|
||||
}}
|
||||
ref={(cam) => {
|
||||
this.camera = cam
|
||||
|
|
|
|||
Loading…
Reference in New Issue