{"id":28384404,"url":"https://github.com/zxing-js/browser","last_synced_at":"2025-06-25T23:31:06.958Z","repository":{"id":37725388,"uuid":"144936398","full_name":"zxing-js/browser","owner":"zxing-js","description":"ZXing for JS's browser layer with decoding implementations for browser.","archived":false,"fork":false,"pushed_at":"2024-05-22T13:55:59.000Z","size":4806,"stargazers_count":243,"open_issues_count":57,"forks_count":43,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-06-20T12:24:19.564Z","etag":null,"topics":["barcode","browser","hacktoberfest","javascript","qr-code","typescript","zxing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zxing-js.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":"2018-08-16T04:25:16.000Z","updated_at":"2025-06-11T01:04:12.000Z","dependencies_parsed_at":"2024-11-06T12:48:13.385Z","dependency_job_id":null,"html_url":"https://github.com/zxing-js/browser","commit_stats":{"total_commits":152,"total_committers":16,"mean_commits":9.5,"dds":0.3486842105263158,"last_synced_commit":"a254f65c770423a1638253f86c12c19937f32f4c"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/zxing-js/browser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zxing-js%2Fbrowser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zxing-js%2Fbrowser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zxing-js%2Fbrowser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zxing-js%2Fbrowser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zxing-js","download_url":"https://codeload.github.com/zxing-js/browser/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zxing-js%2Fbrowser/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261124005,"owners_count":23113046,"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","browser","hacktoberfest","javascript","qr-code","typescript","zxing"],"created_at":"2025-05-30T08:30:28.871Z","updated_at":"2025-06-25T23:31:06.948Z","avatar_url":"https://github.com/zxing-js.png","language":"TypeScript","readme":"[\u003cimg align=\"right\" src=\"https://raw.github.com/wiki/zxing/zxing/zxing-logo.png\"/\u003e][1]\n\n# ZXing\n\n## What is ZXing?\n\n\u003e [ZXing][1] (\"zebra crossing\") is an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.\n\n## Browser layer\n\nThis is a library for enabling you to use with ease the ZXing for JS library on the browser. It includes features like scanning an `\u003cimg\u003e` element, as well as `\u003cvideo\u003e`, images and videos from URLs and also it helps handling webcam use for scanning directly from a hardware connected camera. It does not offers support to any physical barcode readers or things like that.\n\nSee @zxing-js/library for the complete API including decoding classes and use outside of the browser.\n\nSee @zxing-js/ngx-scanner for using the library in Angular.\n\nSee @zxing-js/text-encoding for special character support in barcodes.\n\n## Usage (how to use)\n\nInstallation, import into app and usage examples in this section.\n\n### Instalation\n\nInstall via yarn, npm, etc:\n\n```bash\nyarn add @zxing/browser\n```\n\n```bash\nnpm i @zxing/browser\n```\n\nOr just import an script tag from your favorite NPM registry connected CDN:\n\n```html\n\u003c!-- loading ZXingBrowser via UNPKG --\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/@zxing/browser@latest\"\u003e\u003c/script\u003e\n```\n\n### How to import into your app\n\n#### ES6 modules\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { BrowserQRCodeReader } from '@zxing/browser';\n\n  const codeReader = new BrowserQRCodeReader();\n\n  // do something with codeReader...\n\n\u003c/script\u003e\n```\n\n##### Or asynchronously\n\n```html\n\u003cscript type=\"module\"\u003e\n  import('@zxing/browser').then({ BrowserQRCodeReader } =\u003e {\n\n    const codeReader = new BrowserQRCodeReader();\n\n    // do something with codeReader...\n\n  });\n\u003c/script\u003e\n```\n\n#### With AMD\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/requirejs\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  require(['@zxing/browser'], ZXingBrowser =\u003e {\n\n    const codeReader = new ZXingBrowser.BrowserQRCodeReader();\n\n    // do something with codeReader...\n\n  });\n\u003c/script\u003e\n```\n\n#### With UMD\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/@zxing/browser@latest\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  window.addEventListener('load', () =\u003e {\n\n    const codeReader = new ZXingBrowser.BrowserQRCodeReader();\n\n    // do something with codeReader...\n\n  });\n\u003c/script\u003e\n```\n\n### Using the API\n\nExamples here will assume you already imported ZXingBrowser into your app.\n\n#### Scan from webcam\n\nContinuous scan (runs and decodes barcodes until you stop it):\n\n```typescript\nconst codeReader = new BrowserQRCodeReader();\n\nconst videoInputDevices = await ZXingBrowser.BrowserCodeReader.listVideoInputDevices();\n\n// choose your media device (webcam, frontal camera, back camera, etc.)\nconst selectedDeviceId = videoInputDevices[0].deviceId;\n\nconsole.log(`Started decode from camera with id ${selectedDeviceId}`);\n\nconst previewElem = document.querySelector('#test-area-qr-code-webcam \u003e video');\n\n// you can use the controls to stop() the scan or switchTorch() if available\nconst controls = await codeReader.decodeFromVideoDevice(selectedDeviceId, previewElem, (result, error, controls) =\u003e {\n  // use the result and error values to choose your actions\n  // you can also use controls API in this scope like the controls\n  // returned from the method.\n});\n\n// stops scanning after 20 seconds\nsetTimeout(() =\u003e controls.stop(), 20000);\n```\n\nYou can also use `decodeFromConstraints` instead of `decodeFromVideoDevice` to pass your own constraints for the method choose the device you want directly from your constraints.\n\nAlso, `decodeOnceFromVideoDevice` is available too so you can `await` the method until it detects the first barcode.\n\n### Scan from video or image URL\n\n```javascript\nconst codeReader = new ZXingBrowser.BrowserQRCodeReader();\n\nconst source = 'https://my-image-or-video/01.png';\nconst resultImage = await codeReader.decodeFromImageUrl(source);\n// or use decodeFromVideoUrl for videos\nconst resultVideo = await codeReader.decodeFromVideoUrl(source);\n```\n\n### Scan from video or image HTML element\n\n```javascript\nconst codeReader = new ZXingBrowser.BrowserQRCodeReader();\n\nconst sourceElem = document.querySelector('#my-image-id');\nconst resultImage = await codeReader.decodeFromImageElement(sourceElem);\n// or use decodeFromVideoElement for videos\nconst resultVideo = await codeReader.decodeFromVideoElement(sourceElem);\n```\n\n### Other scan methods\n\nThere's still other scan methods you can use for decoding barcodes in the browser with `BrowserCodeReader` family, all of those and previous listed in here:\n\n- `decodeFromCanvas`\n- `decodeFromImageElement`\n- `decodeFromImageUrl`\n- `decodeFromConstraints`\n- `decodeFromStream`\n- `decodeFromVideoDevice`\n- `decodeFromVideoElement`\n- `decodeFromVideoUrl`\n- `decodeOnceFromConstraints`\n- `decodeOnceFromStream`\n- `decodeOnceFromVideoDevice`\n- `decodeOnceFromVideoElement`\n- `decodeOnceFromVideoUrl`\n\nThat's it for now.\n\n### List of browser readers\n\n- `BrowserAztecCodeReader`\n- `BrowserCodeReader` (abstract, needs to be extend for use)\n- `BrowserDatamatrixCodeReader`\n- `BrowserMultiFormatOneDReader`\n- `BrowserMultiFormatReader` (2D + 1D)\n- `BrowserPDF417CodeReader`\n- `BrowserQRCodeReader`\n\n### Customize `BrowserCodeReader` options\n\nYou can also customize some options on the code reader at instantiation time. More docs comming soon.\n\n---\n\n[![Bless](https://cdn.rawgit.com/LunaGao/BlessYourCodeTag/master/tags/alpaca.svg)](http://lunagao.github.io/BlessYourCodeTag/)\n\n[0]: https://www.npmjs.com/package/@zxing/browser\n[1]: https://github.com/zxing/zxing\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzxing-js%2Fbrowser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzxing-js%2Fbrowser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzxing-js%2Fbrowser/lists"}