undecaf / zbar-wasm Goto Github PK

Can you add support for the datamatrix code?

Thank you!

Overview

• zbar-wasm/src/instance.ts

  Lines 4 to 16 in 703ac77

  	let zbarInstance: ZBarInstance
  	const zbarInstancePromise = (async () => {
  	zbarInstance = await zbarJs()
  	if (!zbarInstance) {
  	throw Error('WASM was not loaded')
  	}
  	return zbarInstance
  	})()
  	export const getInstance = async (): Promise<ZBarInstance> => {
  	return await zbarInstancePromise
  	}

• https://github.com/undecaf/zbar-wasm?tab=readme-ov-file#bundlingdeploying-zbar-wasm

I really appreciate all the documentation put into the bundles of ZBar, but the process is quite difficult still. I was wondering. Would be possible to pass the Zbar Instance to the library.

The benefits of this would be great considering the additional complexity it would add. Namely, it would allow the application to decide how the WASM in bundled and deployed into the application. It would put less work in trying to work around the tooling failings in currents stacks.

Looking over the code, I noticed the instance function could probably be easily modified to accommodate this. Some factory function or user config would need to be assed to propagate to it here though.

export const getInstance = async (customLoader?: () => Promise<ZBarInstance>): Promise<ZBarInstance> => {
  if (customLoader) {
     return await customLoader();
  }
    
  return await zbarInstancePromise
}

Side node

For better encapsulation, you can refactor the zbarInstancePromise function to something like below (hard to type code in comments). This is pure suggestion and can be completely ignored.

let zbarInstance: ZBarInstance

const zbarInstancePromise = (() => {
  let zbarInstance: ZBarInstance

  const instancePromise = async () => {
    zbarInstance = await zbarJs()
    if (!zbarInstance) {
      throw Error('WASM was not loaded')
    }
    return zbarInstance
  };
  
  return instancePromise
})()

Hello, I am trying different images with the codepen demo site, but have a problem.
Files of very big images (40-50 MP) are returning with no results '[ ]', in the first try.

Same image, second attempt from same file, all is well, all qrcodes are correctly identified. If I resize down to something around 2000px width, instant result comes, no problems even in the first attempt with that file.

What might be causing this ?

I develop capacitor-community/barcode-scanner and want to make it support off-line, so zbar.wasm needs to be included.

I successfully included it in a dist of this module:

  plugins: [
    copy({
      targets: [
        { src: 'node_modules/@undecaf/zbar-wasm/dist/zbar.wasm', dest: 'dist' },
      ]
    })
  ],

But when I use barcode-scanner in my project (npm i "@capacitor-community/barcode-scanner@../barcode-scanner" for local development) and build it, resulting dist does not include zbar.wasm file.

I checked example-bundled, but this seems not intended for use in the module project (and also it is for old rollup 2).

Or it is really necessary to ask module's users to bundle zbar.wasm themself? How to make zbar-wasm to require it correctly then?

Thank you for your help.

https://output.jsbin.com/nidonin
Please try my live sample based on zbar.wasm, which will detecting QR or other supported code types continuously. Just open it on your iPhone or Android phone then point & shoot. It outperforms other pure JavaScript QR detection libraries.

But sometime my live sample stops to detect from new video feed, even once it recognized correctly just seconds ago. I figured out one pattern to reproduce this bug:

1. Point to some supported QR code/Barcode, worked fine to recognize all of them continuously.
2. Include some unspported barcode in video feed, suddently it stops to recognize any more.
3. (Sometime it seems that a failed try on supported code type will also cause consequent failure).
4. (Misleading in title: not pause of live sample, but once worked well, sometime suddently stop to recognize from further new video feed. Reload will restart recognition again. Is it any way to recycle/recover consequent detection programtically?)

From https://github.com/mebjas/html5-qrcode, I printed out many different types of QR code and Barcode for testing.

Prepare for a NPM release of this package please

The image is confidential, so it should be removed

Nodejs 18 breaks emscripten

Fix: bump emscripten to the latest version.
e.g. this

Describe the bug

Not able to detect barcodes in certain cases like in the image attached, while it is completely working barcode and tried to scan the same with some online barcode readers and with my phone both worked fine.

To Reproduce

1. Open demo website -> https://undecaf.github.io/zbar-wasm/example/
2. and scan this below image with the barcode
   

A minimal working example that reproduces the behavior would be much appreciated.

Or else the environment in which the behavior occurs needs to be specified:

• Which target environment (Node/browser/other)?
• Browser
• Which type of modules (ESM/CommonJS/other)?
• Which framework(s)?
• Which devtools, including their configuration files?
• package.json content
• Any other context about the problem

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Describe the bug

On Ipad safari the webassembly script fails to compile due to the following error:

failed to asynchronously prepare wasm: CompileError: WebAssembly.Module doesn't parse at byte 1227: invalid opcode 192, in function at index 28

To Reproduce

Opening the example on an ipad and uploading an image file of a barcode https://undecaf.github.io/zbar-wasm/example/ will result in "Source not ready" with the specified error above.

Or else the environment in which the behavior occurs needs to be specified:

• Which target environment (Node/browser/other)? IOS Safari (on Iphone/Ipad, Macbook works fine)
• Which type of modules (ESM/CommonJS/other)? CommonJS Version 0.10.1, 0.9.16, 0.9.15, 0.9.14

'Error: Corrupted zip: missing 48 bytes.\n at ZipEntries.readEndOfCentral (D:\codebase\iona\onboarding-dbmodel\node_modules\jszip\lib\zipEntries.js:243:19)\n at ZipEntries.load (D:\codebase\iona\onboarding-dbmodel\node_modules\jszip\lib\zipEntries.js:255:14)\n at D:\codebase\iona\onboarding-dbmodel\node_modules\jszip\lib\load.js:48:24'

iwhen i call import { scanImageData } from '@undecaf/zbar-wasm'; and use return scanImageData(imageData)
.then(symbols => { ...
I show this error, how can fixe that please
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Not allowed to load local resource: file:///D://node_modules/@undecaf/zbar-wasm/dist/zbar.wasm
Aborted([object ProgressEvent]). Build with -sASSERTIONS for more info.
RuntimeError: Aborted([object ProgressEvent]). Build with -sASSERTIONS for more info.

Describe the bug

I created react project with vite typescript.
My problem's is using the library @undecaf/zbar-wasm.

BarcodeScanner.jsx

import { scanImageData } from "@undecaf/zbar-wasm"

const scanBarcode = useCallback(async () => {

                const context = canvasRef.current.getContext("2d")
		context.drawImage(videoRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height)
		const imageData = context.getImageData(0, 0, canvasRef.current.width, canvasRef.current.height)
		try {

			const symbols = await scanImageData(imageData)
			if (symbols.length > 0) {
				const barcode = symbols[0].decode()
				const quality = symbols[0].quality
				updateScannedBarcodes(barcode, quality)
			}
		} catch (err) {
			console.error("Error scanning image data:", err)
		}
	}, [updateScannedBarcodes, isScanning])
[...]

My vite.config.ts

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import path from "path"

export default defineConfig({
	plugins: [
		react(),
	],
	resolve: {
		alias: {
			src: path.resolve(__dirname, "src"),
		},
	},
	server: {
		port: 3000,
	},
	assetsInclude: ['**/*.wasm'],
});

Errors

wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ @undecaf_zbar-wasm.js?v=fd05e335:210
Promise.then (async)

failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

Error scanning image data: RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -sASSERTIONS for more info.
    at P (@undecaf_zbar-wasm.js?v=fd05e335:70:14)
    at @undecaf_zbar-wasm.js?v=fd05e335:103:59

In my investigation I learned that vite does not provide .wasm .

My solution for the problem, which is not the preferred:

import { scanImageData, setModuleArgs } from "@undecaf/zbar-wasm"

setModuleArgs({
	locateFile: (filename) => `https://cdn.jsdelivr.net/npm/@undecaf/[email protected]/dist/${filename}`
})

The .wasm is provided this way, but not through the library loader :

Describe the bug

I use Vite to build and bundle my project. In order to get the WASM file as a part of my build, I copy it to my site/ folder and it is treated as a static asset. When the imported code attempts to load the WASM file, it uses a path that is deeply nested, such as /.vite/deps/undecaf-zbar-wasm/zbar.wasm because the script is served from that location for development. In production, the file would be built into /assets/index-HASH.js, so it would look for /assets/zbar.wasm.

To Reproduce

I'm using Vite, TypeScript, and it appears that the ESM version is being used.

Expected behavior

Having a way to specify the URL to the WASM file would be ideal instead of having it automatically build a URL based on the imported file.

This is already done with zbar-wasi and I was hoping that something similar could be done with this build.

To work around this issue, I custom-compiled zbar-wasm's output to remove terser, then manually modified the path of "zbar.wasm" and changed it to "/zbar.wasm".

Describe the bug

When using the example on IOS Safari Iphone 12 initially the default hi-res rear camera is used. Leaving the web scanner on in background causes a different camera (fisheye) to be selected. Making scanning nearly impossible.

To Reproduce

Visit demo through Github

• Put browser in background by flicking it out of screen (slide finger from bottom of screen to top)
• Turn off screen with button on right side of iphone
• Wait 10 seconds
• Turn on screen
• Put browser in foreground

Expected behavior

Expected behaviour would be to have the same camera active after returning from background/sleep.

Screenshots

Initial Cam	Cam after BG

I get the following error with the latest version:

ERROR in ../../node_modules/@undecaf/zbar-wasm/dist/main.js 15:653-669
Module not found: Error: Can't resolve 'module' in '/myprj/node_modules/@undecaf/zbar-wasm/dist'
resolve 'module' in '/myprj/node_modules/@undecaf/zbar-wasm/dist'
  Parsed request is a module
  using description file: /myprj/node_modules/@undecaf/zbar-wasm/package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /myprj/packages/sub-project/node_modules
        single file module
          using description file: /myprj/packages/sub-project/package.json (relative path: ./node_modules/module)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /myprj/packages/sub-project/node_modules/module doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /myprj/packages/sub-project/node_modules/module.js doesn't exist
        /myprj/packages/sub-project/node_modules/module doesn't exist
      looking for modules in /myprj/node_modules
        single file module
          using description file: /myprj/package.json (relative path: ./node_modules/module)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /myprj/node_modules/module doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /myprj/node_modules/module.js doesn't exist
        /myprj/node_modules/module doesn't exist
 @ ./out/file.js 1:0-51 14:22-35 21:22-35

webpack 5.88.2 compiled with 1 error in 1608 ms

Describe the bug

Hello! I fail to build when trying to use this library within the Next.JS app directory router. I tried several methods like dynamic import, but none worked. Also, it works with npm run dev.
Thank you.
Next.js 14.0.2

To Reproduce
using node v20.8.0 (npm v10.1.0)
npx create-next-app@latest
** default settings ***
overwrite
src/app/page.tsx
as

'use client'
import { scanImageData } from "@undecaf/zbar-wasm";

export default function Home() {
  scanImageData(new ImageData(1, 1));
  return (
    <></>
  )
}

overwrite
next.config.ts
as

/** @type {import('next').NextConfig} */

const nextConfig = {
    transpilePackages: ['@undecaf/zbar-wasm'],
}

module.exports = nextConfig

and
npm run build

error message

Failed to compile.

static/media/index.33c29f02.mjs from Terser
  x 'import.meta' cannot be used outside of module code.
    ,-[24:1]
 24 |     });
 25 | }
 26 | "function" == typeof SuppressedError && SuppressedError;
 27 | var e, r = (e = import.meta.url, async function() {
    :                 ^^^^^^^^^^^
 28 |     let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
 29 |     var r, n, i = t;
 30 |     i.ready = new Promise((t, e)=>{
    `----

  x 'import.meta' cannot be used outside of module code.
    ,-[33:1]
 33 |     var o, s, a, c = Object.assign({}, i), _ = "object" == "object", u = "function" == typeof importScripts, A = "object" == typeof process && "object" == typeof process.versions && "string" == typeof process.versions.node, f = "";
 34 |     if (A) {
 35 |         const { createRequire: t } = await Promise.resolve().then(()=>g);
 36 |         var h = t(import.meta.url), l = h("fs"), R = h("path");
    :                   ^^^^^^^^^^^
 37 |         f = u ? R.dirname(f) + "/" : h("url").fileURLToPath(new URL("./", import.meta.url)), o = (t, e)=>(t = U(t) ? new URL(t) : R.normalize(t), l.readFileSync(t, e ? void 0 : "utf8")), a = (t)=>{
 38 |             var e = o(t, !0);
 39 |             return e.buffer || (e = new Uint8Array(e)), e;
    `----

  x 'import.meta' cannot be used outside of module code.
    ,-[34:1]
 34 |     if (A) {
 35 |         const { createRequire: t } = await Promise.resolve().then(()=>g);
 36 |         var h = t(import.meta.url), l = h("fs"), R = h("path");
 37 |         f = u ? R.dirname(f) + "/" : h("url").fileURLToPath(new URL("./", import.meta.url)), o = (t, e)=>(t = U(t) ? new URL(t) : R.normalize(t), l.readFileSync(t, e ? void 0 : "utf8")), a = (t)=>{
    :                                                                           ^^^^^^^^^^^
 38 |             var e = o(t, !0);
 39 |             return e.buffer || (e = new Uint8Array(e)), e;
 40 |         }, s = function(t, e, r) {
    `----

  x 'import.meta' cannot be used outside of module code.
     ,-[98:1]
  98 |             B("failed to asynchronously prepare wasm: " + t), P(t);
  99 |         });
 100 |     }
 101 |     i.locateFile ? F(T = "zbar.wasm") || (O = T, T = i.locateFile ? i.locateFile(O, f) : f + O) : T = new URL("zbar.wasm", import.meta.url).href;
     :                                                                                                                            ^^^^^^^^^^^
 102 |     var L, M = (t)=>{
 103 |         for(; t.length > 0;)t.shift()(i);
 104 |     }, x = (t)=>{
     `----

  x 'import', and 'export' cannot be used outside of module code
     ,-[385:1]
 385 | }, Symbol.toStringTag, {
 386 |     value: "Module"
 387 | }));
 388 | export { a as ZBarConfigType, l as ZBarImage, c as ZBarOrientation, R as ZBarScanner, h as ZBarSymbol, s as ZBarSymbolType, d as getDefaultScanner, o as getInstance, y as scanGrayBuffer, E as scanImageData, B as scanRGBABuffer }; //# sourceMappingURL=index.mjs.map
     : ^^^^^^
     `----

Caused by:
    0: failed to parse input file
    1: Syntax Error
Error: 
  x 'import.meta' cannot be used outside of module code.
    ,-[24:1]
 24 |     });
 25 | }
 26 | "function" == typeof SuppressedError && SuppressedError;
 27 | var e, r = (e = import.meta.url, async function() {
    :                 ^^^^^^^^^^^
 28 |     let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
 29 |     var r, n, i = t;
 30 |     i.ready = new Promise((t, e)=>{
    `----

  x 'import.meta' cannot be used outside of module code.
    ,-[33:1]
 33 |     var o, s, a, c = Object.assign({}, i), _ = "object" == "object", u = "function" == typeof importScripts, A = "object" == typeof process && "object" == typeof process.versions && "string" == typeof process.versions.node, f = "";
 34 |     if (A) {
 35 |         const { createRequire: t } = await Promise.resolve().then(()=>g);
 36 |         var h = t(import.meta.url), l = h("fs"), R = h("path");
    :                   ^^^^^^^^^^^
 37 |         f = u ? R.dirname(f) + "/" : h("url").fileURLToPath(new URL("./", import.meta.url)), o = (t, e)=>(t = U(t) ? new URL(t) : R.normalize(t), l.readFileSync(t, e ? void 0 : "utf8")), a = (t)=>{
 38 |             var e = o(t, !0);
 39 |             return e.buffer || (e = new Uint8Array(e)), e;
    `----

  x 'import.meta' cannot be used outside of module code.
    ,-[34:1]
 34 |     if (A) {
 35 |         const { createRequire: t } = await Promise.resolve().then(()=>g);
 36 |         var h = t(import.meta.url), l = h("fs"), R = h("path");
 37 |         f = u ? R.dirname(f) + "/" : h("url").fileURLToPath(new URL("./", import.meta.url)), o = (t, e)=>(t = U(t) ? new URL(t) : R.normalize(t), l.readFileSync(t, e ? void 0 : "utf8")), a = (t)=>{
    :                                                                           ^^^^^^^^^^^
 38 |             var e = o(t, !0);
 39 |             return e.buffer || (e = new Uint8Array(e)), e;
 40 |         }, s = function(t, e, r) {
    `----

  x 'import.meta' cannot be used outside of module code.
     ,-[98:1]
  98 |             B("failed to asynchronously prepare wasm: " + t), P(t);
  99 |         });
 100 |     }
 101 |     i.locateFile ? F(T = "zbar.wasm") || (O = T, T = i.locateFile ? i.locateFile(O, f) : f + O) : T = new URL("zbar.wasm", import.meta.url).href;
     :                                                                                                                            ^^^^^^^^^^^
 102 |     var L, M = (t)=>{
 103 |         for(; t.length > 0;)t.shift()(i);
 104 |     }, x = (t)=>{
     `----

  x 'import', and 'export' cannot be used outside of module code
     ,-[385:1]
 385 | }, Symbol.toStringTag, {
 386 |     value: "Module"
 387 | }));
 388 | export { a as ZBarConfigType, l as ZBarImage, c as ZBarOrientation, R as ZBarScanner, h as ZBarSymbol, s as ZBarSymbolType, d as getDefaultScanner, o as getInstance, y as scanGrayBuffer, E as scanImageData, B as scanRGBABuffer }; //# sourceMappingURL=index.mjs.map
     : ^^^^^^
     `----

Caused by:
    0: failed to parse input file
    1: Syntax Error


> Build failed because of webpack errors
   Creating an optimized production build  .%    

Or else the environment in which the behavior occurs needs to be specified:

• Which target environment (Node/browser/other)?
• Which type of modules (ESM/CommonJS/other)?
• Which framework(s)?
• Which devtools, including their configuration files?
• package.json content

{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@undecaf/zbar-wasm": "^0.10.1",
    "next": "14.0.2",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.2",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

• Any other context about the problem

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

I am using it like this:

import { createCanvas, loadImage } from 'canvas';
import { scanImageData } from '@undecaf/zbar-wasm';

const getImageData = async (src) => {
  const img = await loadImage(src);
  const canvas = createCanvas(img.width, img.height);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  return ctx.getImageData(0, 0, img.width, img.height);
};

const url = 'src/IMG_3361.jpg';
const main = async () => {
  const img = await getImageData(url);
  const res = await scanImageData(img);
  console.log(res[0]?.typeName);
  console.log(res[0]);
  console.log(res[0]?.decode());
};

main();

and getting

TypeError: t is not a function at n (file:///Users/Projects/scna/node_modules/@undecaf/zbar-wasm/dist/main.js:15:706)

I am encountering the following error trying to integrate zbar-wasm in a Quasar + Vite project:

main.js:15  Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
    at n (main.js:15:3357)
    at main.js:15:7714
    at Generator.next (<anonymous>)
    at main.js:15:283
    at new Promise (<anonymous>)
    at t (main.js:15:28)
    at main.js:15:7667

Describe the bug

The disable all but one symbol code sample on wiki works, but when flags are combined like zsType.ZBAR_CODE128 | zsType.ZBAR_EAN13, zsType.ZBAR_CODE128|zsType.ZBAR_QRCODE, no code can be detected.

To Reproduce

var scanner = zbarWasm.getDefaultScanner().then(_scanner => window.scanner = _scanner );
...
var zsType = zbarWasm.ZBarSymbolType;
var zcType = zbarWasm.ZBarConfigType;
var useBarcode = true;
scanner.setConfig(zsType.ZBAR_NONE, zcType.ZBAR_CFG_ENABLE, 0);
var zsTypeSet = useBarcode ?
    zsType.ZBAR_CODE128 | zsType.ZBAR_EAN13 //|zsType.ZBAR_QRCODE
    : 
    zsType.ZBAR_QRCODE
    ;
scanner.setConfig( zsTypeSet, zcType.ZBAR_CFG_ENABLE, 1);
...
let symbols = await zbarWasm.scanImageData(imageData, scanner);

Expected behavior
Should be able to scan only the combined types CODE128+EN13 etc.

Hello! I'm trying to add this library to my project that's using next.js

But I get this error and it doesn't build

Here's a reproducible example:

https://github.com/Loskir/zbar-wasm-nextjs