jodusnodus / react-qr-reader Goto Github PK

First time a user opens the page with the qr-reader the front camera will be used instead of the rear camera. However on refresh and future visits the rear camera will be used.
Render code used:
<div className="QRScanner"> <QrReader delay={this.state.delay} style={previewStyle} onError={this.handleError} onScan={this.handleScan} facingMode="rear" /> <p>{this.state.result}</p> </div>

Hello !

is it possible to make it work on cordova ? Used the component in my app and didn't want to changed it

When going on the demo page with Android Chrome 51.0.2704.81, the front camera gets picked by default. There is no prompt for choosing the camera as there is on latest Android Firefox.
I'm using Android 4.2.2 on a FairPhone 1.

It seems it's possible to select the rear one, as I'm able to do it on https://webrtc.github.io/samples/src/content/devices/input-output/ through the select input.

As asked by @DannyLingard in #23.
A method doesn’t seem like the best way too me. Maybe an onImageLoad handler so you can just hide the element and show it again when a new image is loaded?

Tried to use the lib on OS X. I can see the camera video on Chrome but Im not getting any callbacks (onScan or onError). I see that there is a Chrome helper process running, using around 50% of my CPU when delay is set to 100 but thats it. I also tested your demo and it doesn't work on both (MacOS or Android 6.0). Video is visible but there is no result of scanning. Didn't test other devices. Legacy mode worked fine after providing an image of a QR code - I get callbacks every 'delay' ms.

When using Android Firefox 47.0 I got prompted to choose which camera I'd like to use, chose the rear camera, but then when I aim at any QrCode it seems it never get recognized as the "Decoded QR-Code:" output stays on "No result".

When trying with Android Chrome it works and displays the content of the QrCode (although I can't use the rear camera)

I'm using Android 4.2.2 on a FairPhone 1.

Anyway thanks a lot for sharing this component, it's so pleasant when it just (kind of) works.

I was able to get the QR reader using the ios11-fix branch but for some reason it's no longer working. ios11-fix gives me "undefined is not an object (evaluating navigator.mediaDevices.getSupportedConstraints()). On the newest version, I get the following error:

NoVideoInputDevicesError: No video input devices found.

iPhone X
iOS 11.1.2

I have this implemented as a ticket scanner for our event managment software platform. It would great and is super quick, but we've noticed over time the phone starts to get a little warm, we assume this is because of the always on nature of the qr scanner.

I would love a way to be able to stop the scanner after we've scanned something and start it back up when we're ready to scan the next ticket.

I was able to kind of get this working by wrapping the <QrReader /> in a conditional in my state and that seemed to work well enough, however I kept getting an error in the console that seemed like it wasn't liking the fact that I had it in a conditional

Specifically this error

TypeError: Cannot read property 'srcObject' of null
    at Reader.handleVideo (index.js:206)
    at <anonymous>

Is it possible to implement the possibility to set a different height & width ?

After that, the camera will take all the screen but the QR Reader will be only in a square in the middle of it ?

Great package! One issue, though, with regards to facingMode. On smartphones, facingMode flips between front and rear cameras. I figured that on desktops with just a single camera the facingMode flips between original and mirrored image. Is it possible to decouple these two features into separate properties? I tested with various people and a lot of them get confused when they see themselves mirrored and try to zoom in on the QR-part when using environment-facingMode. On smartphones everything is fine. But user-facingMode is not an option since it would activate the (often lower resolution) front camera on mobile devices. Thanks!

Running npm test always fails.

` FAIL src/App.test.js
● renders without crashing

ReferenceError: Worker is not defined
  
  at Reader.componentDidMount (node_modules/react-qr-reader/lib/index.js:61:25)
  at node_modules/react-dom/lib/ReactCompositeComponent.js:264:25
  at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
  at node_modules/react-dom/lib/ReactCompositeComponent.js:263:11
  at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
  at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
  at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
  at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
  at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
  at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:143:20)
  at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
  at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
  at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:319:18)
  at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
  at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
  at Object.<anonymous>.it (src/App.test.js:8:22)
      at Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

✕ renders without crashing (31ms)

Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 1.75s
Ran all test suites.
`

i want to save image to base64 when onScan found qr code for send to server.

how should i do?

thx for answer.

Example code:

class Test extends React.Component {
    state = { value: null }
    onValueScanned: function(data) {
        this.setState({ value: data });
    }
    render() {
         if (this.state.value) return <span>Scanned: {this.state.value}</span>
         return <ReactQrReader onScan={data=>this.onValueScanned} />
    }
}

Throws Cannot read property 'videoWidth' of null exception after successful scan.

Of course it can be fixed with simple workaround:

<ReactQrReader onScan={data=>setTimeout(()=>this.props.onValueScanned(data), 50)} />

But it would be better to check if component is still loaded after onScan callback invocation.

Hi Is there anywhere i can find an example on how to use the LegacyMode of this qr reader?

You’re the best developer ever, i love your work.

Is it possible to use the torch light ?

using facingMode you get the error overconstrainedError

<QrReader
handleError={this.handleError}
handleScan={this.handleScan}
facingMode={'rear'}
interval={2000} />}

I tried and it does not seem to work, but I haven't found any explicit reference in the documentation whether the Cordova platform is supported.

How do I remove the absolute positioning of the reader? Is there a way?

Hi,

It seems to be front facing only. I've tried using facingMode="environment" and facingMode="rear". Seems to only work in Android. Any ideas?

Specification:

• iPhone SE
• iOS 11.1.1
• Chrome 62.0.3202.70

Screen shot from iPhone

Screen shot from sentry report

Get out

Is it possible to have a class/className prop? This will tidy up layouts by reducing the need for a container

Hi,

I am trying to install the lib using npm install react-qr-reader, it start downloading then after just few second it stop and freeze.

Cheers for the work in regards to performance and speed improvements in the new version. Was wondering if there's any opportunities to reduce the bundle size as it's > 470KB (not
compressed or minified) in my webpack bundle?

Without knowing a lot about jsQR, does it provide the functionality to both encode and decode? If so, would it be feasible to spin off any unnecessary code not required in scanning/decoding of QR Codes into an additional package?

According to MDN, we can do something like:

var getUserMedia = (navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia);

to support some older browsers.

Would it be possible to add these?

ReferenceError: Blob is not defined at Object.<anonymous> (/Users/wiredots/Projects/new/reactproject/node_modules/react-qr-reader/lib/index.js:26:24) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.module.exports.Object.defineProperty.value

Is it possible to have a method made available while the Reader is loading/initializing? I assume it takes a bit to fire up WebRTC etc so just hoping to be able to mount a loading component in the interim. I'm Developing on a Dell Latitude E7470 (i7, 16GB RAM) and it takes the reader 20-50ms to load after mounting, so imagine it would possibly be longer on a phone. Thanks

I am unable to render my project server side because this module uses Blob.

I have found a work around, that doesn't work with webpack by doing the below.

if (typeof Blob !== 'undefined') {
  QrReader = require('react-qr-reader').reader();
} 

Has anyone else found a way to include this module in their project, or can we have a prop to give the component if the environment is the server so as to avoid trying to use Blob?

The front camera is always used, no matter how i set the facingMode. and this is how i render my component

Well, I do not sleep for several days. I tested several Qr readers and the only one I found interesting was this one, to perform a quick reading, it is necessary to decrease "delay", the same Qr is repeated several times.

The solution I found for not to repeat for a certain time:

bundle.js > add rows the top:

var arrayResult = [];
var timeoutResult;

function removeA(arr) {
    var what, a = arguments, L = a.length, ax;
    while (L > 1 && arr.length) {
        what = a[--L];
        while ((ax= arr.indexOf(what)) !== -1) {
            arr.splice(ax, 1);
        }
    }
    return arr;
}

function timeout(arrayResult, result) {
	timeoutResult = window.setTimeout(function(){ 
		removeA(arrayResult, result);
	}, 5000);
}

function clearResultTimeout() {
    clearTimeout(timeoutResult);
}

function insereValor(result) {
	
	if (arrayResult.indexOf(result) < 0){

		clearResultTimeout(); // delete timeout from (result) previous
		arrayResult.shift(); // remove lock (result) previous
		arrayResult.push(result); // add lock (result) current

		this.setState({ result: result }); // result
		
		timeout(arrayResult, result);  // setTimeout

	}else{
		//alert(result); // lockout timeout
	}
}

bundle.js > search by for lines:

	    value: function handleScan(result) {
			if (result) {
				this.setState({ result: result });
			}
	    }

bundle.js > change to:

	    value: function handleScan(result) {
			if (result) {
				insereValor(result);
			}
	    }

Is the reading happens faster and if the QR is repeated, it is discarded for 5 seconds.

[QUITE URGENT]

Hello,
I'm not able to use this library on the Facebook 'in-app' browser. This happens when I open the link from a chat in Messenger.

• Do you have an idea of ​​why?
• Do you know any workarounds in order to avoid this problem?

Thank you so much! 👍

The processing is blocking the DOM resulting in a bad user experience. Version 1.0.0 will contain an inline web worker to fix this issue. Web workers are supported in all modern browsers.

I just made our client test the other day with their iPhone and the QR Reader was working but with front camera.

We tried setting the facing mode to 'rear' but it was still using front camera

The iPhone was on iOS 11 and we tested both Safari and Chrome.

Any idea ?

I've tried passing interval={this.state.interval} to the component, it works in the initial constructor but not when state changes through handleScan(). I'm changing the interval to 10000 via setState but it's not re-rendering/updating based on the new interval.

I'm essentially trying to throttle (via 10000 ms) or preferably disable the scan after a successful scan. I'm deploying an overlay component via this.state.scanSuccess, which works fine, just hoping to disable/throttle the scanner without unmounting the component. A method to disable would be awesome :)

Thanks,
Danny

Hi

I tried enabling legacyMode = {true} on IOS Chrome browser. This causes the camera component to render differently to a play logo but the camera's view does not appear.

Any ideas how I can debug what's going wrong?

Many thanks

When I take a pic my smart phone and scan by zooming it works but when I scan an actual printed QR code scanner I doesn't work

openImageDialog function does work on windows. Works fine my mac and android phone

openImageDialog() {
    // Function to be executed by parent in user action context to trigger img file uploader
    this.els.input.click()
}

Uncaught TypeError: Cannot read property 'click' of undefined at openImageDialog

First of all, thank you for this awesome library. I just wanted to point to a minor bug, which does not affect functionality but should easily be fixed.

My code looks like this:

import React from 'react'
import QrReader from 'react-qr-reader'

class AddPermission extends React.Component {
  constructor() {
    super()
    this.state = {
      delay: 300,
      result: 'No result'
    }
    this.handleScan = this.handleScan.bind(this)
  }
  handleScan(data) {
    if (data) {
      this.setState({
        result: data
      })
    }
  }
  handleError(err) {
    console.error(err)
  }
  render() {
    return (
      <div>
        <QrReader
          delay={this.state.delay}
          onScan={this.handleScan}
          onError={this.handleError}
          style={{ maxWidth: '300px', width: '100%' }}
          showViewFinder={false}
        />
        <p>{this.state.result}</p>
      </div>
    )
  }
}

export default AddPermission

The weird thing is just that this does not happen in your storybook.

Hi, I tried installing the library but I get the following error when running it using webpack dev server:

Error in ./~/react-qr-reader/lib/index.js
Module build failed: Error: Couldn't find preset "stage-0" relative to directory "/node_modules/react-qr-reader"
at Array.map (native)
@ ./app/approvals/code-scanner.js 27:21-47
@ ./app/approvals/approvals.js
@ ./app/approvals/index.js
@ ./app/App.js
@ ./app/index.js
@ multi ./config/polyfills.js ./app/index.js

I shouldn't need to install those deps.

I have already installed REACT but then, after installing your npm I get this:

root@server [~]# npm install react-qr-reader --save
[email protected] /root
+-- UNMET PEER DEPENDENCY [email protected] extraneous
+-- UNMET PEER DEPENDENCY [email protected] extraneous
`-- [email protected]
  `-- [email protected]  (git+https://github.com/cozmo/jsQR.git#1fb946a235abdc7709f04cd0e4aa316a3b6eae70)

npm WARN [email protected] requires a peer of react@^15.0.2 but none was installed.
npm WARN [email protected] requires a peer of react-dom@^15.0.2 but none was installed.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
root@server [~]#

Thanks for helping!

node_modules/md-gum-polyfill/mediaDevices-getUserMedia-polyfill.js:36
[2] })();
[2] ^

ReferenceError: navigator is not defined

I have this issue when compile my application.

Hi,
I have some problem integrating this component in my pure React application.
this is the code:

QrCode

Login

And this is the error message I found:

addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Already tried this: https://gist.github.com/jimfb/4faa6cbfb1ef476bd105 . Removed npm_modules/ folder and npm install again but didn't work. Any clue about that?
Thanks

I just made our client test the other day with their iPhone and the QR Reader did not work at all.

Instead of a video playback we would see a gray canvas with a play button inside, but when clicking on it nothing happens.

The iPhone was on iOS 9.3.4 and we tested both Safari and Chrome.

Any idea ?

I've updated to 1.1.0 and my onScan() event is firing continuously, passing a null data object. It's still recognizing the delay (ms or false). I added an early exit for !data so it still works for legit scans but just checking if this is intended.

chooseDeviceId prop is not working. Doesn't seem to be executing. I looked at your code and it seems that your github code and your npm packaged code are out of sync.

After accepting usuage of my camera in Google Chrome on my desktop, the QR-code recognizing does work.
However, after reloading the page, recognizing QR-codes stops.
The application only works correctly on localhost

When I use the library in firefox this error is displayed in console:

OverconstrainedError

but not in chrome.

Any idea?