undecaf / barcode-detector-polyfill Goto Github PK
View Code? Open in Web Editor NEWA WebAssembly polyfill for the Barcode Detection API
License: MIT License
A WebAssembly polyfill for the Barcode Detection API
License: MIT License
Hi!
I want to use this package offline, but it depends on the jsdeliver link.
I'm using esbuild, tried using this config to load it from the local node_modules (https://github.com/undecaf/barcode-detector-polyfill/blob/master/example/esbuild.config.js), (installed https://github.com/undecaf/zbar-wasm#readme). But I couldn't get it to work.
Thanks for the help!
I got this error in Chrome for image from remote server
Uncaught (in promise) DOMException: Failed to execute 'getImageData' on 'OffscreenCanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at t2 (http://localhost:3000/node_modules/.vite/deps/@undecaf_barcode-detector-polyfill.js?v=0927827e:104:41)
The code at:
https://cdn.jsdelivr.net/npm/@undecaf/[email protected]/dist/index.js
Says Copyright (c) Microsoft Corporation.
Is this correct or just an artefact of using typescript?
Hi guys!
I am trying to use this plugin in Angular 12 but I have this error:
external "https://cdn.jsdelivr.net/npm/@undecaf/[email protected]/dist/main.js" - Error: The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
I am trying to solve this and read the 8 closed issues but I am not getting the correct answer.
Any help please?
Describe the bug
Currently the path for the zbar.wasm file is hardcoded to "zbar.wasm" which doesn't work well for web applications.
The provided file also doesn't work for import via `import barcodeDetectorPolyfill from "path/index.js".
To Reproduce
import barcodeDetectorPolyfill from "{path}/index.js";
try {
window['BarcodeDetector'].getSupportedFormats()
} catch {
window['BarcodeDetector'] = barcodeDetectorPolyfill.BarcodeDetectorPolyfill
}
window['BarcodeDetector'] = barcodeDetectorPolyfill.BarcodeDetectorPolyfill;
var formats = await window['BarcodeDetector'].getSupportedFormats();
this.barcodeDetector = new BarcodeDetector({ formats: formats });
...
this.barcodeDetector.detect(bitmap);
A minimal working example that reproduces the behavior would be much appreciated.
Any .html file with
https://cdn.jsdelivr.net/npm/@undecaf/[email protected]/dist/index.js and https://cdn.jsdelivr.net/npm/@undecaf/[email protected]/dist/index.js.
Preferred would be the barcode-detector-polyfill/index.js would return an export default
and the zbar.wasm
path could be configured as such:
import barcodeDetectorPolyfill from "{path}/index.js";
barcodeDetectorPolyfill.zbarWasmPath = "/some/arbitrary/path.wasm";
...
First of all thanks for your work - seems to be a well performing barcode scanning solution.
I'm using npm to install it in an Angular/TypeScript project. But compilation fails because it can't resolve the CDN import of @undecaf/zbar-wasm.
It seems like this way of importing is not supported by the version I'm using.
Any help on how to properly load the library at runtime with the provided npm package would be appreciated.
The scanner is really good and is of high quality but it doesn't stop even after it detects a barcode.
can there be a way for the scanner to stop after scanning a barcode ?
Currently instructions needs to update on how to use bundled-in or inlined zbar.wasm introduced in zbar-wasm v0.10.0.
Describe the bug
The final build does not publish a valid source map, but the main script file references it:
//# sourceMappingURL=index.js.map
To Reproduce
N/A
Expected behavior
Should be produced/published a valid source map file (index.js.map
) or the reference for the file should be removed from the main script file.
Edit: this applies to @undecaf/zbar-wasm
package also.
I used this library to recognize qr_code and barcode with format code_128.
It works for qr_code but failed to recognize barcode with format code_128 it on Safari.
this is my code:
// BarcodeReader.tsx
import { BarcodeDetectorPolyfill } from "@undecaf/barcode-detector-polyfill";
import { useEffect } from "react";
const BarcodeReader = () => {
function readBarcode() {
if (!window["BarcodeDetector"]) {
window["BarcodeDetector"] = BarcodeDetectorPolyfill;
}
navigator
.mediaDevices
.getUserMedia({
video: true,
audio: false,
})
.then((stream) => {
if ("BarcodeDetector" in window) {
const videoEl = document.querySelector("video") as HTMLVideoElement;
videoEl.srcObject = stream;
videoEl.play();
const barcodeDetector = new window.BarcodeDetector({
formats: ["code_128"],
});
const barcodes = await barcodeDetector.detect(videoEl);
console.log(barcodes); // print empty array for code_128 but work for qr_code on Safari!
})
.catch(console.log);
}
useEffect(() => {
readBarcode();
}, []);
return (
<div>
<video height={220} width={300} />
</div>
);
}
export default BarcodeReader;
Is there a way to detect code_128 barcode on Safari?
This lib seems to work great, but I get:
Uncaught (in promise) TypeError: URL constructor: zbar.wasm is not a valid URL.
when loading it.
The same error happens when using your port of zbar.wasm directly
LGPL license ask for used code open-source or dynamic import;
i think user don't need use dynamic import zbar.wasm
, because this library is open-source.
Do i have a misunderstand about LGPL license ?
reference: GNU_Lesser_General_Public_License
Related Description: A program that contains no derivative of any portion of the Library, but is designed to work with the Library by being compiled or linked with it, is called a "work that uses the Library". Such a work, in isolation, is not a derivative work of the Library, and therefore falls outside the scope of this License.
Essentially, if it is a "work that uses the library", then it must be possible for the software to be linked with a newer version of the LGPL-covered program. The most commonly used method for doing so is to use "a suitable shared library mechanism for linking". Alternatively, a statically linked library is allowed if either source code or linkable object files are provided.[3]
Thanks a lot for putting this library together! Amazing stuff!
I have one question. It seems that this polyfill fails for me when I'm trying to use it from a Web Worker. On the other hand MSDN states (second NOTE there) that this interface should be accessible from Web Worker.
The method which fails is isImageBitmapSource
which references types like HTMLImageElement
and they are not present in the Web Worker global scope.
Could you please tell what do you think?
My project is a Nuxt 2 (Vue 2) project and I am trying to use the @undecaf/vue-barcode-scanner
on my page (Vue SFC). I installed the @undecaf/barcode-detector-polyfill
package as a dependency of my project using npm
.
import { BarcodeDetectorPolyfill } from '@undecaf/barcode-detector-polyfill'
mounted(){
window.BarcodeDetector = BarcodeDetectorPolyfill
}
However, I am receiving the following error:
in ./node_modules/@undecaf/barcode-detector-polyfill/dist/main.js
Module not found: Error: Can't resolve 'https://cdn.jsdelivr.net/npm/@undecaf/[email protected]/dist/main.js' in '/ptda/node_modules/@undecaf/barcode-detector-polyfill/dist'
@undecaf/zbar-wasm
is a dependency of the polyfill and installed in my node_modules
, so why is it not retrieved locally?I appreciate any help on this matter!
I develop and run a website on a complete offline network. I want to use the scanner there. So normally I install all needed packages with npm on an online pc, zip the folder and transfer it back to the offline pc.
I installed the lib with npm, zipped the project and transferd it but I get the following error on my offline pc:
This dependency was not found:
* https://cdn.jsdelivr.net/npm/@undecaf/[email protected]/dist/main.js in ./node_modules/@undecaf/barcode-detector-polyfill/dist/main.js
I don't get that error on my online pc, since it's probably just downloads the file.
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.