zxing-js / library Goto Github PK
View Code? Open in Web Editor NEWMulti-format 1D/2D barcode image processing library, usable in JavaScript ecosystem.
Home Page: https://zxing-js.github.io/library/
License: Apache License 2.0
Multi-format 1D/2D barcode image processing library, usable in JavaScript ecosystem.
Home Page: https://zxing-js.github.io/library/
License: Apache License 2.0
Hey,
I am trying to use this library to decode a QR code rendered on canvas. To achieve that, I use canvas.toDataURL()
to encode the QR code in the image URL. This gives us something like this.
data:image/png;base64,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
We then render the image on page like so.
const img = new Image();
img.height = canvas.height;
img.src = canvas.toDataURL();
img.width = canvas.width;
document.body.appendChild(img);
Finally, we try to decode our QR code.
const reader = new ZXing.BrowserQRCodeReader();
reader.decodeFromImage(img);
Unfortunately, this operation fails with the following error message.
Error
at FinderPatternFinder.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/FinderPatternFinder.js.FinderPatternFinder.selectBestPatterns (FinderPatternFinder.js:546)
at FinderPatternFinder.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/FinderPatternFinder.js.FinderPatternFinder.find (FinderPatternFinder.js:165)
at Detector.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/detector/Detector.js.Detector.detect (Detector.js:66)
at QRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/core/qrcode/QRCodeReader.js.QRCodeReader.decode (QRCodeReader.js:63)
at BrowserQRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.readerDecode (BrowserCodeReader.js:254)
at BrowserQRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.decodeOnce (BrowserCodeReader.js:229)
at BrowserCodeReader.js:180
at new Promise (<anonymous>)
at BrowserQRCodeReader.webpackJsonp../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.decodeFromImage (BrowserCodeReader.js:171)
at index.js:100
If I try to screenshot the rendered <img />
, save it to my computer as screenshot.jpg
and modify my code as follows...
img.src = 'C:\fakepath\screenshot.jpg'
...we get back this.
{
format: 11,
numBits: 288,
rawBytes: Uint8Array(36) [65, 183, 55, 87, 6, 87, 39, 54, 86, 55, 87, 38, 86, 182, 87, 151, 7, 38, 247,
70, 86, 55, 70, 86, 70, 86, 70, 151, 64, 236, 17, 236, 17, 236, 17, 236],
resultMetadata: Map(2) {2 => Array(1), 3 => "H"},
resultPoints: (4) [FinderPattern, FinderPattern, FinderPattern, AlignmentPattern],
text: "supersecurekeyprotectededit",
timestamp: 1533052481452
}
Yay, it works! However, this is not a desired behaviour as we cannot expect the user to download a picture of the canvas on their computer and then upload it again.
Any suggestions how to fix this? I am sure there is a way to achieve what I am trying to do since scanning input from device camera is essentially doing the same thing. Thanks!
Hi,
I have a problem with the decoding of a Qr code image, that i'm passing as a base64 string to the decodeFromImage function, as following
const codeReader = new BrowserQRCodeReader();
codeReader.decodeFromImage(undefined, this.state.qrImage)
.then(
(result) => { this.showSuccessMessage('The QR is valid!'); console.log(result.getResultMetadata()); }
)
.catch(
() => this.showErrorMessage('The QR is unreadable.')
);
When I execute this code multiple times on the same image, the result is not consistent. Sometimes the decoding works and it return the correct result, but other times it throws an exception, and prints in the console the following errors
checksum or format error, trying again... Error
at Decoder.correctErrors (Decoder.js?958e:154)
at Decoder.decodeBitMatrixParser (Decoder.js?958e:125)
at Decoder.decodeBitMatrix (Decoder.js?958e:70)
at QRCodeReader.decode (QRCodeReader.js?680d:64)
at BrowserQRCodeReader.BrowserCodeReader.readerDecode (BrowserCodeReader.js?0615:254)
at BrowserQRCodeReader.BrowserCodeReader.decodeOnce (BrowserCodeReader.js?0615:229)
BrowserCodeReader.js?0615:233 true Error
at Decoder.correctErrors (Decoder.js?958e:154)
at Decoder.decodeBitMatrixParser (Decoder.js?958e:125)
at Decoder.decodeBitMatrix (Decoder.js?958e:70)
at QRCodeReader.decode (QRCodeReader.js?680d:64)
at BrowserQRCodeReader.BrowserCodeReader.readerDecode (BrowserCodeReader.js?0615:254)
at BrowserQRCodeReader.BrowserCodeReader.decodeOnce (BrowserCodeReader.js?0615:229)
I wait for an answer. Thank you
Hi,
In readme is it possible to make Projects and Milestones links accessible to everyone?
I see a 404 but I think it is because it is visible only to the owners of the project
Hi,
What's current status of PDF417 - what work remains?
Thanks
Hi, I have tried online version of barcode scanner but which doesn't work by mobile browser from mobile device. Even I tried with laptop camera, it opens here but doesn't capture any code.
I'm looking on browser based scanner with Javascript. Please let me know if you are facing the same issue.
URL : https://aleris.github.io/zxing-typescript/examples/qr-camera/
The BrowserCodeReader
class has multiple lines for logging errors:
library/src/browser/BrowserCodeReader.ts
Line 257 in af16fdb
library/src/browser/BrowserCodeReader.ts
Line 259 in af16fdb
library/src/browser/BrowserCodeReader.ts
Line 262 in af16fdb
There should be an option to enable/disable this.
hello, I encountered a mistake when I set the camera back by default.it is "element with id 'video' not found"ใCould you help me to see what might be wrong?
html:
component.ts:
getBackVideo() {
const codeReader = new BrowserQRCodeReader();
codeReader.decodeFromInputVideoDevice(undefined, 'video')
.then(result => console.log(result))
.catch(err => console.error(err));
}
Hi Guys,
This is the best scanner in JavaScript i have come across after a long search.
I do have one question, i was using @zxing-js/library the CDN and switched to the npm package.
However i get the message: Deprecated symbol used, consult docs for better alternative
.
I presume that i should use the @zxing-js/browser, but because there are no docs yet and it's new i thought that this is more stable.
What do you advise? I am using the BrowserQRCodeReader and the BrowserBarcodeReader from the library. Will the support stay in the library?
Rename repo to <language>-zxing
to match common used names by community.
My company needs in-browser datamatrix scanning asap.
Thus I am starting now to port zxing datamatrix module to ts, based on this project.
Will you be willing to code review it, test and merge it once its ready? Can I expect some help in case I am stuck?
Thanks in advance and have a great day. :)
text-encoding
is a too heavy dependency, there's no way to support it in browser, server environments are good to go, but it destroys page load times.
Webpack externals
option should be used as a first step to achieve that.
Travis-CI gives a fake positive for build: error
because tests time out. Tests need to be faster so any CI can properly test the entire code.
While decoding a barcode of type UPCA, the library adds a extra 0 to the decoded results. So the decoded result has 13 digits instead of 12
Please find the decoded results
{ format:7 numBits:0 rawBytes:null resultMetadata:null resultPoints: [ResultPoint, ResultPoint] text:"0885909934096" timestamp:1536309792565 ... }
Webpack 4 is here, by upgrading we will get some nice improvements.
Add CODE-128 support to the readme file.
Code is already tested, we just need to integrate Codacy or CodeClimate with TravisCI build pipeline.
Hello, I think this library is very cool. But how can i use in my app ? . Thank you. I'm from Vietnamese and i'm a student
Demo on URL https://zxing-js.github.io/library/examples/barcode-camera/
can't find (404) linked script file (index.min.js
), therefore i just get additional error ZXing is not defined
and nothing works.
Hi
How i can read barcode and qrcode in at same time?
I must istantiate 2 object or exist a mixed class? Have you an example or a docs page?
Device: Pixel 2 XL
Browser: Chrome 67.0.3396.68
OS: Android 8.1.0
Tried both Scan QR Code from Video Camera and Scan Barcode from Image options, toggled dropdown menu that did indicate Camera 0 Front and Camera 1 Rear, Start, Reset, and the rear facing camera would never display in the window to scan from.
I also tried the same thing on a different fork that had the same issue and did not work correctly.
My objective is to scan UPC barcodes with my rear-facing camera.
What's the status of the RSS-14 and RSS-Expanded readers - are the readers going to be available soon?
Make use of the Buffer class on node, to improve performance and get rid of any TextEncoder/TextDecoder (browser will still use TextEncoder and TextDecoder).
Hi there,
I am trying to implement a function with decode from image. For pics with only pure qrcode, it works great. However when I tried to decode images with other content, it gives me no result.
I am trying to import this library using require js. But i am unable to do it. At the same location I have other libraries. I am able to import them, but not his library. Is is not possible to load this using requirejs ?
I am using the index.min.js. Please help me to import your library using requirejs
As found by @andrevargas, TS 2.8 allows us to drop some dependencies and should give us a better tooling and build results at all.
Yarn users are fighting some trouble with dependency versions.
Hi, i have seen that someone already worked on the datamatrix module, so i was wondering when it will be available ?
Thanks.
can zxing read multiple qrcodes at the same time in one image?
because i have multiple qrcodes in one image.
hi
following your example
I've succeded in scan a qrcode in html5 webpage.
after the scan successful result, the video camera scan process stops.
how can I make the scan process continuous?
thanks
You often don't want to scan whole picture. In our case datamatrix is really small, so we want to crop and scan only the center of the picture.
I propose to add additional configuration option to BrowserCodeReader
allowing to pass crop options to drawImage
method: what should be the size of cropped picture and what would be its position in larger picture
I am trying to implement this library in IONIC App. How I can implement this in my IONIC App. Is it available in IONIC or any doc available for it.
Hi
At this link, in library description:
https://github.com/zxing-js/library#browser
"To use from JS you need to include what you need from build/umd folder (for example zxing.min.js)."
But in repos is not present "build" folder. How I can include this lib in my project?
I use django and I want to include this in a single page for scan qrcode and barcode
Hi,
I have installed the library through npm, and now I am trying to import the library in a typescript project by importing the ES6 module:
import { BrowserQRCodeReader, Result } from "@zxing/library";
Typescript compiles my code correctly, but apparently the library doesn't get imported.
At runtime I get a console error in the browser that the module is not found:
Uncaught Error: Cannot find module '@zxing/library'.
Adapt documentation for JSDoc, generate documentation, cleanup source files.
The problem seems to be that IE 11 doesn't support Uint8ClampedArray, which is needed in GlobalHistogramBinarizer.ts (and others).
The paths should be absolute, or something else that works. ๐
I know, the Browser is a pain in the ass but it should work with IE 11 as well
I'm sorry to disturb you again. Can you give me some solutions to this problem? I don't know where to solve it.Thank you very much!
hi
is it possible to set the video constraints of the video tag before initialize the camera?
I cannot find any idea about it
thanks
I am trying to create a EAN13 barcode reader.
But when i use onst codeReader = new BrowserCodeReader(), the constructor asks for a Reader. But there are no readers for EAN13
After calling decodeFromVideoSource
user cannot turn camera off, regardless of whether scan ended with a success or failed.
User should have option to cancel scanning, which would turn camera off, and after successful scan camera should be turned off automatically as a default.
First of all, thank you for this nice module!
I used it in my mobile PWA to show the video stream from the camera in fullscreen and decode a QR code. I also overlay some controls (such as a "Cancel" button) on top of the fullscreen video.
I noticed that while the video is streaming/the library is trying to decode the QR code, the UI becomes a little janky. In order to leave the main thread free, I was thinking of running the decoding algorithm in a web worker. Since I don't know how CPU intensive the QR code decoding algorithm really is, I was looking for some feedback on the idea. Would it improve the overall performance of the library to give such a possibility?
I'm getting constant console logs in both my application, and on the demo site listed in your documentation. Would it be possible to have a verbose mode configuration parameter of some sort to turn these off?
true Error
at t.selectBestPatterns (FinderPatternFinder.ts:595)
at t.find (FinderPatternFinder.ts:181)
at t.detect (Detector.ts:84)
at t.decode (QRCodeReader.ts:75)
at e.t.readerDecode (BrowserCodeReader.ts:278)
at e.t.decodeOnce (BrowserCodeReader.ts:254)
BrowserCodeReader.ts:259 not found, trying again...
Since this library relies on navigator.mediaDevices.getUserMedia
and mediaDevices
is null in WKWebView browsers, things break.
Notably, Safari is working fine.
It seems to be an Apple Issue and probably nothing can be done here. But I think it should be logged anyhow.
Regards,
Drew
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.