{"id":26140926,"url":"https://github.com/undecaf/zbar-wasm","last_synced_at":"2025-04-05T06:02:26.008Z","repository":{"id":39516914,"uuid":"442765726","full_name":"undecaf/zbar-wasm","owner":"undecaf","description":"A WebAssembly build of the ZBar Bar Code Reader","archived":false,"fork":false,"pushed_at":"2024-07-19T17:51:30.000Z","size":1994,"stargazers_count":149,"open_issues_count":0,"forks_count":16,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T05:01:43.015Z","etag":null,"topics":["barcode-scanner","emscripten","javascript-library","qrcode-scanner","wasm","webassembly","zbar"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-2.1","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/undecaf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-29T12:27:05.000Z","updated_at":"2025-03-29T01:51:25.000Z","dependencies_parsed_at":"2024-01-11T21:59:08.471Z","dependency_job_id":"2240c3e6-bb53-4856-89b3-e7eb7b69b405","html_url":"https://github.com/undecaf/zbar-wasm","commit_stats":{"total_commits":38,"total_committers":4,"mean_commits":9.5,"dds":0.07894736842105265,"last_synced_commit":"703ac777fe69b1df930910cfa45293479a5f1c84"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/undecaf%2Fzbar-wasm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/undecaf%2Fzbar-wasm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/undecaf%2Fzbar-wasm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/undecaf%2Fzbar-wasm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/undecaf","download_url":"https://codeload.github.com/undecaf/zbar-wasm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294514,"owners_count":20915340,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["barcode-scanner","emscripten","javascript-library","qrcode-scanner","wasm","webassembly","zbar"],"created_at":"2025-03-11T02:58:27.527Z","updated_at":"2025-04-05T06:02:25.993Z","avatar_url":"https://github.com/undecaf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A WebAssembly build of the ZBar Bar Code Reader\n\n![Open issues](https://badgen.net/github/open-issues/undecaf/zbar-wasm)\n![Vulnerabilities](https://snyk.io/test/npm/@undecaf/zbar-wasm/badge.svg)\n![Total downloads](https://badgen.net/npm/dt/@undecaf/zbar-wasm)\n![Hits/month](https://badgen.net/jsdelivr/hits/npm/@undecaf/zbar-wasm)\n![License](https://badgen.net/github/license/undecaf/zbar-wasm)\n\nThis project was forked from [ZBar.wasm](https://github.com/samsam2310/zbar.wasm),\na [WebAssembly](https://webassembly.org/) build\nof the [ZBar Bar Code Reader](https://github.com/mchehab/zbar) written in C/C++.\n\n## Features\n\n+ Provided as minified ES module, CommonJS module and plain script\n+ Runs in modern browsers, in Node.js and also in workers\n+ Deployment size approx. 330 kByte\n+ Supports Code-39, Code-93, Code-128, Codabar, Databar/Expanded,\n  EAN/GTIN-5/8/13, ISBN-10/13, ISBN-13+2, ISBN-13+5, ITF (Interleaved 2 of 5), QR Code, UPC-A/E.\n+ Detects multiple barcodes per frame, also with different types\n+ Barcodes may be oriented horizontally or vertically\n+ Scans [`ImageData`](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) and \n  RGB/grayscale [`ArrayBuffer`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) objects\n+ Outperforms pure JavaScript barcode scanners\n\n:warning: zbar-wasm versions 0.10 and above contain breaking changes with respect to version 0.9, please refer to section [Bundling/deploying zbar-wasm](#bundlingdeploying-zbar-wasm).\n\n\n## Examples based on zbar-wasm\n\n+ A simple example: [on GitHub](https://undecaf.github.io/zbar-wasm/example/) \n  ([source code](https://github.com/undecaf/zbar-wasm/tree/master/docs/example)),\n  [on CodePen](https://codepen.io/undecaf/pen/ZEXmqdB)\n  \n+ A polyfill for the [`BarcodeDetector` Web API](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector):\n  [on GitHub](https://undecaf.github.io/barcode-detector-polyfill/example-loaded/)\n  ([source code](https://github.com/undecaf/barcode-detector-polyfill/tree/master/example-loaded) \n  with build scripts for Rollup and esbuild),\n  [on CodePen](https://codepen.io/undecaf/pen/LYzXXzg)\n  \n\n\n## Getting started\n\n### Using zbar-wasm as `\u003cscript type=\"module\"\u003e`\n\nAn example that scans a static image file:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n  \u003cimg id=\"img\" crossorigin=\"anonymous\" src=\"https://raw.githubusercontent.com/undecaf/zbar-wasm/master/tests/img/qr_code.png\"\u003e\n  \u003cpre id=\"result\"\u003e\u003c/pre\u003e\n\n  \u003cscript type=\"module\"\u003e\n    import * as zbarWasm from 'https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.11.0/dist/index.js'\n\n    (async () =\u003e {\n      const\n        img = document.getElementById('img'),\n        result = document.getElementById('result'),\n        canvas = document.createElement('canvas'),\n        context = canvas.getContext('2d');\n\n      await img.decode()\n      canvas.width = img.naturalWidth\n      canvas.height = img.naturalHeight\n      context.drawImage(img, 0, 0)\n\n      const\n        imageData = context.getImageData(0, 0, canvas.width, canvas.height),\n        symbols = await zbarWasm.scanImageData(imageData);\n      \n      symbols.forEach(s =\u003e s.rawData = s.decode())\n      result.innerText = JSON.stringify(symbols, null, 2)\n    })()\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n### Using zbar-wasm as plain `\u003cscript\u003e`\n\nAlmost identical to the snippet above, just replace the lines\n\n```html\n    ⁝\n  \u003cscript type=\"module\"\u003e\n    import * as zbarWasm from 'https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.11.0/dist/index.js'\n    ⁝\n```\n\nwith\n\n```html\n    ⁝\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.11.0/dist/index.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    ⁝\n```\n\n\n### Using zbar-wasm as an ESM or CommonJS module in Node.js\n\nInstalling:\n\n```shell script\n$ npm install @undecaf/zbar-wasm@0.11.0\n    or\n$ yarn add @undecaf/zbar-wasm@0.11.0\n```\n\nUsing:\n\n`import ... from '@undecaf/zbar-wasm'` pulls the ES module from the package,\n`require('@undecaf/zbar-wasm')` pulls the CommonJS module.\n\nPlease refer to the [API documentation](#api-documentation) for what can be imported/required.\n\nA simple ES module that scans a static image file:\n\n```javascript\nimport { createCanvas, loadImage }  from 'canvas';\nimport { scanImageData } from '@undecaf/zbar-wasm';\n\n(async (url) =\u003e {\n  const\n          img = await loadImage(url),\n          canvas = createCanvas(img.width, img.height),\n          ctx = canvas.getContext('2d');\n\n  ctx.drawImage(img, 0, 0)\n\n  const\n          imageData = ctx.getImageData(0, 0, img.width, img.height),\n          symbols = await scanImageData(imageData);\n\n  console.log(symbols[0]?.typeName, symbols[0]?.decode())\n})('https://raw.githubusercontent.com/undecaf/zbar-wasm/master/tests/img/qr_code.png')\n```\n\nFor a CommonJS module, just replace the first lines with\n\n```javascript\nconst { createCanvas, loadImage } = require('canvas');\nconst { scanImageData } = require('@undecaf/zbar-wasm');\n```\n\n\n### Bundling/deploying zbar-wasm\n\nBarcode scanning is always delegated to the WebAssembly code in file `zbar.wasm`.\nzbar-wasm provides various functionally equivalent ESM and CommonJS modules for Node.js and for browsers\nthat differ in how `zbar.wasm` is to be provided at runtime:\n\n+ `zbar.wasm` can be loaded from a CDN by browsers.\n+ `zbar.wasm` can be bundled as an asset. That asset should be served to browsers as `application/wasm`\n  so that it can be compiled in parallel with being received.\n+ Several zbar-wasm modules contain `zbar.wasm` as inline data.\n\nThe following overview shows the modules that are available in zbar-wasm. One of them needs to be bundled in your application.\n\n| Path in package           | Module type | Node core modules polyfilled\u003cbr\u003e(suitable for browsers) | `zbar.wasm` inlined |\n|:--------------------------|:-----------:|:-------------------------------------------------------:|:-------------------:|\n| `/dist/index.mjs`         |     ESM     |                   :heavy_check_mark:                    |                     |\n| `/dist/index.js`          |  CommonJS   |                   :heavy_check_mark:                    |                     |\n| `/dist/main.mjs`          |     ESM     |                                                         |                     |\n| `/dist/main.cjs`          |  CommonJS   |                                                         |                     |\n| `/dist/inlined/index.mjs` |     ESM     |                   :heavy_check_mark:                    | :heavy_check_mark:  |\n| `/dist/inlined/index.js`  |  CommonJS   |                   :heavy_check_mark:                    | :heavy_check_mark:  |\n| `/dist/inlined/main.mjs`  |     ESM     |                                                         | :heavy_check_mark:  |\n| `/dist/inlined/main.cjs`  |  CommonJS   |                                                         | :heavy_check_mark:  |\n\nThe [package entry points](https://nodejs.org/docs/latest-v16.x/api/packages.html#package-entry-points) of zbar-wasm have been chosen so that bundlers will emit the \nappropriate module by default in most cases. However, `zbar.wasm` as inline data requires a suitable \n[export condition](https://nodejs.org/docs/latest-v16.x/api/packages.html#conditional-exports) in the bundler configuration, typically `'zbar-inlined'`.\nPlease refer to the `exports` section of `package.json` for details.\n\n[Building zbar-wasm](#building-zbar-wasm-from-source) includes testing the bundling process with [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/) and \n[esbuild](https://esbuild.github.io/) and also testing the resulting bundles. The bundler configuration files\n[`tests/{webpack,rollup,esbuild}.config.js`](https://github.com/undecaf/zbar-wasm/tree/master/tests)\nmay be used as a reference of how to achieve a particular bundling result. Each of them covers\nthe following combinations of platforms, module types and `zbar.wasm` provisioning for the\nrespective bundler:\n\n| `zbar.wasm`       | Node module types | Browser module types  |\n|:------------------|:-----------------:|:---------------------:|\n| loaded from CDN   |                   | ESM, plain `\u003cscript\u003e` |\n| bundled as asset  |   ESM, CommonJS   |          ESM          |\n| inlined in module |   ESM, CommonJS   | ESM, plain `\u003cscript\u003e` |\n\n\n### Loading `zbar.wasm` from a custom location\n\nAs a last resort, if you cannot make your bundler place `zbar.wasm` where it can be located by the script,\nyou can specify an URL or path for that WASM file at runtime:\n\n```javascript\nimport { scanImageData, setModuleArgs } from '@undecaf/zbar-wasm';\n    ⁝\n// Call this function once at the beginning\nsetModuleArgs({\n  /**\n   * This function must return the URL or path of the WASM file.\n   * \n   * @param filename default WASM filename ('zbar.wasm')\n   * @param directory default WASM directory (URL or directory of the current script)\n   * @returns {string} URL or path of the WASM file\n   */\n  locateFile: (filename, directory) =\u003e {\n      return 'file:///your/wasm/directory/zbar.wasm'\n  }   \n});\n    ⁝\n// Then use the scanner\nconst symbols = await scanImageData(...);\n```\n\n\n## API documentation\n\nOwing to the predecessor of this project, [samsam2310/zbar.wasm](https://github.com/samsam2310/zbar.wasm),\na [wiki](https://github.com/samsam2310/zbar.wasm/wiki) and an extensive\n[API Reference](https://github.com/samsam2310/zbar.wasm/wiki/API-Reference) are already available.\nMany thanks to the author!\n\nPlease note that a few classes have been renamed compared to the documentation in order to avoid\nconflicts with built-in JavaScript class names:\n\n+ `Symbol` \u0026rarr; `ZBarSymbol`\n+ `Image` \u0026rarr; `ZBarImage`\n+ `ImageScanner` \u0026rarr; `ZBarScanner`\n\n\n## [`BarcodeDetector`](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector) Web API\n\nThe [BarcodeDetector polyfill](https://www.npmjs.com/package/@undecaf/barcode-detector-polyfill)\npackage (in [this repository](https://github.com/undecaf/zbar-wasm), by the same author) is based on \n`zbar-wasm` but provides a standardized, higher-level and more flexible API.\n\n\n## Building zbar-wasm from source\n\nPrerequisites:\n\n+ A Linux platform\n+ GNU `make`, `tar` and `curl`\n+ [Podman](https://podman.io/) or [Docker](https://www.docker.com/)\n+ [Node.js](https://nodejs.org/) v16+\n+ At least one of the [browsers supported by TestCafé](https://testcafe.io/documentation/402828/guides/intermediate-guides/browsers)\n\nTo build:\n\n- Clone this repository:\n  ```bash\n  $ git clone https://github.com/undecaf/zbar-wasm\n  $ cd zbar-wasm\n  ```\n- Enter your browser(s) in `.testcaferc.json` ([supported browsers](https://testcafe.io/documentation/402828/guides/intermediate-guides/browsers)).\n- Enter two available port numbers in `tests/src/ports.js`.\n- If you prefer [Docker](https://www.docker.com/) over [Podman](https://podman.io/) as container engine then replace\n  ```\n  EM_ENGINE = $(EM_PODMAN)\n  ```\n  with\n  ```\n  EM_ENGINE = $(EM_DOCKER)\n  ```\n  in the provided `Makefile`.\n- Run the build process:\n  ```bash\n  $ make\n  ```\n  The `make` command runs [emscripten](https://emscripten.org/) in a container, compiling the C/C++\n  sources of the [ZBar Bar Code Reader](https://github.com/mchehab/zbar)\n  to [WebAssembly](https://webassembly.org/). It also compiles and bundles the TypeScript glue code\n  and runs the tests in Node.js and in the selected browser(s) on the host machine.\n\n\n## Credits to ...\n\n+ [samsam2310]() for providing invaluable information in his [zbar.wasm](https://github.com/samsam2310/zbar.wasm) repository\n+ [mchehab](https://github.com/mchehab) for maintaining [zbar](https://github.com/mchehab/zbar)\n+ the [emscripten](https://emscripten.org/) folks for their compiler toolchain \n+ the [contributors](https://github.com/undecaf/zbar-wasm/graphs/contributors) to this package\n\n\n## License\n\nSoftware: [LGPL-2.1](http://opensource.org/licenses/LGPL-2.1)\n\nDocumentation: [CC-BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fundecaf%2Fzbar-wasm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fundecaf%2Fzbar-wasm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fundecaf%2Fzbar-wasm/lists"}