Load barcode detection library

assets/js/app.js

@@ -21,6 +21,7 @@ import "phoenix_html"
 import { Socket } from "phoenix"
 import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
+import "./barcode-scanner"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {

assets/js/barcode-scanner.js

@@ -0,0 +1,20 @@
+import { BarcodeDetector } from "barcode-detector/ponyfill";
+
+const run = async function () {
+  // check supported formats
+  const supportedFormats = await BarcodeDetector.getSupportedFormats();
+  console.log(supportedFormats);
+
+  const barcodeDetector = new BarcodeDetector({
+    // make sure the formats are supported
+    formats: ["qr_code"],
+  });
+
+  const imageFile = await fetch(
+    "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Hello%20world!",
+  ).then((resp) => resp.blob());
+
+  barcodeDetector.detect(imageFile).then(console.log);
+}
+
+run();

assets/package-lock.json

@@ -0,0 +1,48 @@
+{
+  "name": "assets",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "barcode-detector": "^3.0.0"
+      }
+    },
+    "node_modules/@types/emscripten": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.40.0.tgz",
+      "integrity": "sha512-MD2JJ25S4tnjnhjWyalMS6K6p0h+zQV6+Ylm+aGbiS8tSn/aHLSGNzBgduj6FB4zH0ax2GRMGYi/8G1uOxhXWA=="
+    },
+    "node_modules/barcode-detector": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-3.0.0.tgz",
+      "integrity": "sha512-BABMtctq2a5TxTG41xgdPC+rkuTn9Hsh07EAJ3l4bVM1cj0iA6CbXHyCgdjHPaFJCYnhDbiEJF22DSrw8Hr/vg==",
+      "dependencies": {
+        "zxing-wasm": "^2.0.1"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "4.34.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.34.1.tgz",
+      "integrity": "sha512-6kSc32kT0rbwxD6QL1CYe8IqdzN/J/ILMrNK+HMQCKH3insCDRY/3ITb0vcBss0a3t72fzh2YSzj8ko1HgwT3g==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zxing-wasm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-2.0.1.tgz",
+      "integrity": "sha512-C0xM9zqHnZ7Y2quc3aEutAl56qyLzryn72qDUyccsw/DlL8+VG2ZZWxslfy0cDEH0xDtFQwV1sOiC7H40WpGhQ==",
+      "dependencies": {
+        "@types/emscripten": "^1.39.13",
+        "type-fest": "^4.33.0"
+      },
+      "peerDependencies": {
+        "@types/emscripten": ">=1.39.6"
+      }
+    }
+  }
+}

assets/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "barcode-detector": "^3.0.0"
+  }
+}