aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorbrunobar79 <brunobar79@gmail.com>2018-07-27 08:24:39 +0800
committerbrunobar79 <brunobar79@gmail.com>2018-07-27 08:24:39 +0800
commit6cd4bc9f4ecb2c4a066da0aceb36d1a24bbe33e2 (patch)
tree776ae0fc685062e9a3b365dd3782106a43d52d87 /ui
parent4759915856440028186df56d4646565dc5c4a5d6 (diff)
downloadtangerine-wallet-browser-6cd4bc9f4ecb2c4a066da0aceb36d1a24bbe33e2.tar
tangerine-wallet-browser-6cd4bc9f4ecb2c4a066da0aceb36d1a24bbe33e2.tar.gz
tangerine-wallet-browser-6cd4bc9f4ecb2c4a066da0aceb36d1a24bbe33e2.tar.bz2
tangerine-wallet-browser-6cd4bc9f4ecb2c4a066da0aceb36d1a24bbe33e2.tar.lz
tangerine-wallet-browser-6cd4bc9f4ecb2c4a066da0aceb36d1a24bbe33e2.tar.xz
tangerine-wallet-browser-6cd4bc9f4ecb2c4a066da0aceb36d1a24bbe33e2.tar.zst
tangerine-wallet-browser-6cd4bc9f4ecb2c4a066da0aceb36d1a24bbe33e2.zip
working without permission issues
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/qr-scanner/qr-scanner.component.js80
1 files changed, 44 insertions, 36 deletions
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',
}}>
<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