{"id":15381882,"url":"https://github.com/justinribeiro/barcode-reader","last_synced_at":"2025-02-28T08:30:28.970Z","repository":{"id":34865767,"uuid":"184817711","full_name":"justinribeiro/barcode-reader","owner":"justinribeiro","description":"A web component that reads barcodes via the Shape Detection API via a Web Worker.","archived":false,"fork":false,"pushed_at":"2023-05-01T01:25:43.000Z","size":26,"stargazers_count":13,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-05T09:58:23.618Z","etag":null,"topics":["comlink","lit-element","shape-detection-api","web-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/justinribeiro.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}},"created_at":"2019-05-03T20:40:58.000Z","updated_at":"2024-08-08T23:46:08.000Z","dependencies_parsed_at":"2022-08-08T02:01:32.106Z","dependency_job_id":null,"html_url":"https://github.com/justinribeiro/barcode-reader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Fbarcode-reader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Fbarcode-reader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Fbarcode-reader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Fbarcode-reader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justinribeiro","download_url":"https://codeload.github.com/justinribeiro/barcode-reader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219871222,"owners_count":16560620,"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":["comlink","lit-element","shape-detection-api","web-component"],"created_at":"2024-10-01T14:29:06.617Z","updated_at":"2024-10-16T19:03:29.468Z","avatar_url":"https://github.com/justinribeiro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/%40justinribeiro%2Fbarcode-reader.svg)](https://badge.fury.io/js/%40justinribeiro%2Fbarcode-reader)\n\n# \\\u003cbarcode-reader\\\u003e\n\n\u003e A web component that reads barcodes via the Shape Detection API via a Web Worker.\n\n![screenshot of barcode-reader](https://user-images.githubusercontent.com/643503/57164618-8765b100-6da9-11e9-9a22-6e6f7fda9c97.png)\n\n## Features\n\n* Uses Shape Detection API available in Chrome M74 (see https://www.chromestatus.com/feature/4757990523535360).\n* Module scripts on DedicatedWorker. You can try the feature with '--enable-experimental-web-platform-features' flag (see https://crbug.com/680046)\n* Uses [Comlink](https://github.com/GoogleChromeLabs/comlink) for the proxy of the worker\n* Built as a web component via [LitElement](https://lit-element.polymer-project.org/)\n\n## Experimental\n\nPlease note, this is **not** production ready. It's not polyfilled, it relies on an experimental platform feature for the Web Worker, and generally I've just been toying with it in various Chrome builds for quite some time.\n\nUse at your own peril! 🐉🔥\n\n## A more complete example\n\nIf you're looking for a more complete PWA example of using barcodes on the web, I highly recommend [Paul Kinlans' QR Snapper](https://github.com/PaulKinlan/qrcode) as well as his blog.\n\n## Install\n\nThis web component is built with Polymer 3 and ES modules in mind and is\navailable on NPM:\n\nInstall barcode-reader:\n\n```sh\nnpm i @justinribeiro/barcode-reader\n# or\nyarn add @justinribeiro/barcode-reader\n```\n\nAfter install, import into your project:\n\n```js\nimport 'barcode-reader';\n```\n\nFinally, use as required:\n\n```html\n\u003cbarcode-reader\u003e\u003c/barcode-reader\u003e\n\u003cscript\u003e\n  customElements.whenDefined('barcode-reader').then(() =\u003e {\n    const barcodeReader = document.querySelector('barcode-reader');\n\n    // start the camera stream\n    // always looks for\n    // facingMode: {\n    //   exact: 'environment',\n    // }\n    barcodeReader.start();\n\n    // component returns a custom event with results\n    document.addEventListener('barcodes-found', (event) =\u003e {\n      console.log(event.detail.barcodes);\n\n      // if you want to stop streaming, ala, I'm hiding you now\n      barcodeReader.stop();\n    }, false);\n  });\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinribeiro%2Fbarcode-reader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustinribeiro%2Fbarcode-reader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinribeiro%2Fbarcode-reader/lists"}