undecaf/zbar-wasm

A WebAssembly build of the ZBar Bar Code Reader

zbar-wasm's Issues

The barcode type DataMatrix is not supported

Can you add support for the datamatrix code?

Thank you!

How to bundle zbar.wasm in a module project?

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.

[BUG] WebAssembly.Module doesn't parse at byte 1227: invalid opcode 192, in function at index 28

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

Paused when failed to detect unsupported code type.

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.

zbar-wasm doesn't work with nodejs 18

Nodejs 18 breaks emscripten

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

big images cannot be scanned succesfully, in the first attempt.

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 ?

Issue with utf-8

The image is confidential, so it should be removed

after 15 june this package giving an error

'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'

webpack error migrating from 0.9.15 -> 0.9.16

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

Build fails when using in Next.js App directory router.

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.

Please Help : Why i show this error when i tray import the package in Angular 16

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.

__dirname is not defined with nextjs

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

TypeError: Failed to construct 'URL': Invalid URL

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

[BUG] On IOS Safari Iphone 12 - after background/sleep mode reactivation changes camera to fisheye

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

loading zbar-wasm as ES module fails in Node

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)