Comments (7)
Sorry somehow i didn’t see this.
If your user base is mostly mobile, you should definitely upgrade to v1.1.2
. I made some performance improvements in the QR decoding code that causes up to a 10x speed increase. The API hasn’t changed so its an easy upgrade.
Yes i can see how an onImageLoad
handler would benefit that use case, i’ll add one tomorrow.
The compression is done in the simplest way possible. The full res image is copied on to the canvas. The canvas resolution is lowered to decrease the data size. That canvas data is then used by the decoder.
from react-qr-reader.
Added onImageLoad
in a4547e1. 👍
Will publish when i have more improvements.
from react-qr-reader.
@JodusNodus I'll describe my use case which might better illustrate what I'm hoping to achieve. For every successful scan, I run a procedure from onScan() allowing the user to interact with the output.
Part of this procedure is to toggle the delay to false, so while the user is interacting with the output, the onScan() method isn't running. If the user completes/exists the procedure, I toggle the delay back to a ms interval, allowing the onScan() to re-run for future successful scans.
With legacyMode, if the user complete/exits the same procedure from onScan(), as soon I toggle the delay to a ms interval, it immediately re-runs the onScan() on the same image that was originally loaded (I don't think there's a way I can currently stop this?).
I notice the img initially has no src attribute, with the upload generating a base64 src. What's the better approach, to attempt to delete the src attribute (I can see previous repaint bug in Stack Overflow), or having the file upload create a new Image, which can be hooked into and deleted after use?
from react-qr-reader.
Hmm it shouldn’t rescan when changing the delay in legacyMode. I will take a look at that. Why would you need to change the delay in legacyMode though?
from react-qr-reader.
Should onScan only fire once in legacy? I'm not currently testing for legacy mode in my onScan so it's possible toggling from false back to an integer fires it again. I'll give it a test on Monday and let you know.
from react-qr-reader.
Just tested it out. The scan handler is only called once in legacyMode as it is supposed to. Changing the delay to false and back does indeed trigger another scan. I'll fix that.
from react-qr-reader.
@JodusNodus Thanks for the recent updates, just tested 1.1.1 and all seems to be working fine.
With iOS being a huge chuck of my target user base, trying to provide the best possible legacy experience is one of my top priorities until we can access the webcam.
maxImageSize and delay are 2 properties that I'll be looking to set dynamically based on hardware and/or state as I don't generally think we should be exposing these options to the average user on the main interface. There are however instances where we would need to expose them as either presets or a slider.
A use case would be if a user cannot scan a qr code, or a loaded image of a qr code fails to decode. In live mode, this could be caused by a small qr code or a slightly blurry image with too much light loaded by the user. There are ways in live view that we achieve this dynamically but I don't think it's currently possible in legacyMode without the user having to reload multiple images.
An onImageLoaded handler would be good as it would allow me to measure the progress through the onScan() and provide feedback if there's !data. However, it appears as though the img src needs to physically change to re run onScan(). My thought process is if there's !data, I'd notify the user that the "image quality will be maximised" to ensure the best possible measure(while also reducing the delay). This would only last one onScan() before being reset. From there, I'd want to rerun the image through onScan() at source resolution.
In terms of image compression, where does it take place? Is the base64 src compressed or does it only compress when it runs through onScan()?
from react-qr-reader.
Related Issues (20)
- cant use this library in [email protected] HOT 12
- Camera does not focus HOT 1
- Breaks with React.StrictMode
- Camera does not capture QR on iOS HOT 6
- MediaDevices API has no support for your browser. You can fix this by running "npm i webrtc-adapter" HOT 2
- Last version can scan with image ?
- The height and width of the video does not match the height and width video on the device. HOT 1
- Support for defaultProps will be removed
- Help me error selectBestPatterns nobody fix it before (react-qr-reader 3.0.0-beta-1) HOT 3
- DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. HOT 4
- Black screen and rarely get back camera view HOT 3
- Scan address camera resizes sometimes in mobile devices
- Node version Incompatibilty
- Valid QR code not working
- in mobile after installation first time the camera is not opening nut after that if i close and open it is opening
- Video not showing on the first render
- Primary Camera with facingMode: environment?
- Valid QR code not working
- How to Select the Primary Camera When Using react-qr-reader with facingMode set to environment?
- Not compatible with react 18
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-qr-reader.