@nddeps/barcode-scanner 0.6.0 → 0.6.1

package/dist/index.d.ts

@@ -3,7 +3,13 @@ import { BarcodeDetectorOptions } from 'barcode-detector/ponyfill';
 import { BarcodeFormat } from 'barcode-detector/ponyfill';
 import { DetectedBarcode } from 'barcode-detector/ponyfill';
 
-declare type Context = {
+export declare const BARCODE_SCANNER_BEFORE_START_EVENT = "barcode-scanner:beforestart";
+
+export declare const BARCODE_SCANNER_DECODE_FRAME_EVENT = "barcode-scanner:decode-frame";
+
+export declare const BARCODE_SCANNER_START_EVENT = "barcode-scanner:start";
+
+export declare type Context = {
     state: State;
 };
 
@@ -16,7 +22,6 @@ declare function createBarcodeScanner(video: HTMLVideoElement, { debug, formats,
         handleDecodeFailure?: DecodeFailureHandler;
         handleDecodeSuccess?: DecodeSuccessHandler;
     }) => Promise<void>;
-    startCallbackProcessed: boolean;
     state: State;
     stop: () => Promise<void>;
 }>;
@@ -30,9 +35,9 @@ export declare function createWorker({ formats }: {
     worker: Worker;
 };
 
-declare type DecodeFailureHandler = () => Promise<void> | void;
+export declare type DecodeFailureHandler = () => Promise<void> | void;
 
-declare type DecodeSuccessHandler = (data: string, area: ScanArea) => Promise<void> | void;
+export declare type DecodeSuccessHandler = (data: string, area: ScanArea) => Promise<void> | void;
 
 export declare function getCameraAccess(): Promise<boolean>;
 
@@ -50,7 +55,7 @@ export declare function isBarcodeDetectorAvailable<T extends object>(value: T):
     } & BarcodeDetector;
 } & T;
 
-declare type Lifecycle = {
+export declare type Lifecycle = {
     onBeforeCreate?: LifecycleHook;
     onBeforeDecode?: LifecycleHook;
     onBeforePause?: LifecycleHook;
@@ -63,9 +68,9 @@ declare type Lifecycle = {
     onStop?: LifecycleHook;
 };
 
-declare type LifecycleHook = (ctx: Context) => void;
+export declare type LifecycleHook = (ctx: Context) => void;
 
-declare type Options = {
+export declare type Options = {
     debug?: boolean;
     formats?: BarcodeFormat[];
     getScanArea?: (video: HTMLVideoElement) => ScanArea;
@@ -92,7 +97,7 @@ export declare type ScanArea = {
     y: number;
 };
 
-declare type State = {
+export declare type State = {
     decodeFrameTs: number;
     isDecodeFrameProcessed: boolean;
     isDestroyed: boolean;
@@ -110,4 +115,21 @@ export declare function translateAreaToVideoSource(video: HTMLVideoElement, area
 
 export declare function wait(ms: number): Promise<unknown>;
 
+export declare function waitForEvent(event: string, { resolveOnError, timeout }?: {
+    resolveOnError?: boolean;
+    timeout?: number;
+}): Promise<unknown>;
+
+export declare const WORKER_DECODE_FAILURE_CAUSE = "decode-failure";
+
+export declare const WORKER_DECODE_TIMEOUT: number;
+
+export declare const WORKER_DECODE_TIMEOUT_CAUSE = "decode-timeout";
+
+export declare const WORKER_LOAD_FAILURE_CAUSE = "worker-load-failure";
+
+export declare const WORKER_LOAD_TIMEOUT: number;
+
+export declare const WORKER_LOAD_TIMEOUT_CAUSE = "worker-load-timeout";
+
 export { }

package/dist/index.js

@@ -1,60 +1,59 @@
-const k = "decode-timeout", R = "worker-load-failure";
-const T = "worker-load-timeout", C = "" + new URL("zxing-reader.wasm", import.meta.url).href;
-function H({ formats: e }) {
-  const n = new Worker(new URL(
+const B = "barcode-scanner:beforestart", L = "barcode-scanner:decode-frame", j = "barcode-scanner:start", N = "decode-failure", K = 16e3, V = "decode-timeout", y = "worker-load-failure", q = 32e3, S = "worker-load-timeout", b = "" + new URL("zxing-reader.wasm", import.meta.url).href;
+function k({ formats: e }) {
+  const o = new Worker(new URL(
     /* @vite-ignore */
     "" + new URL("worker.js", import.meta.url).href,
     import.meta.url
-  ), { type: "module" }), i = new Promise((a, r) => {
-    const o = setTimeout(() => {
-      n.removeEventListener("message", f), r(new Error(T));
-    }, 32e3), f = ({ data: { payload: c, type: m } }) => {
-      m === "init" && (clearTimeout(o), n.removeEventListener("message", f), c.status === "success" ? a(!0) : r(new Error(R)));
+  ), { type: "module" }), i = new Promise((a, s) => {
+    const r = setTimeout(() => {
+      o.removeEventListener("message", h), s(new Error(S));
+    }, 32e3), h = ({ data: { payload: c, type: f } }) => {
+      f === "init" && (clearTimeout(r), o.removeEventListener("message", h), c.status === "success" ? a(!0) : s(new Error(y)));
     };
-    n.addEventListener("message", f), n.postMessage({
+    o.addEventListener("message", h), o.postMessage({
       payload: {
         formats: e,
-        wasmUrl: C
+        wasmUrl: b
       },
       type: "config"
     });
   });
-  async function s(a) {
+  async function n(a) {
     await i;
-    const r = `${performance.now()}-${Math.random().toString(36).slice(2)}`;
-    return new Promise((o, f) => {
+    const s = `${performance.now()}-${Math.random().toString(36).slice(2)}`;
+    return new Promise((r, h) => {
       const c = setTimeout(() => {
-        n.removeEventListener("message", m), f(new Error(k));
-      }, 16e3), m = ({ data: { payload: g, type: p } }) => {
-        p !== "decode" || g.uuid !== r || (clearTimeout(c), n.removeEventListener("message", m), o(g.data));
+        o.removeEventListener("message", f), h(new Error(V));
+      }, 16e3), f = ({ data: { payload: E, type: A } }) => {
+        A !== "decode" || E.uuid !== s || (clearTimeout(c), o.removeEventListener("message", f), r(E.data));
       };
-      n.addEventListener("message", m), n.postMessage({
+      o.addEventListener("message", f), o.postMessage({
         payload: {
           data: a,
-          uuid: r
+          uuid: s
         },
         type: "decode"
       });
     });
   }
   return {
-    decode: s,
-    worker: n
+    decode: n,
+    worker: o
   };
 }
-async function V() {
+async function H() {
   try {
     return (await navigator.permissions.query({ name: "camera" })).state === "granted";
   } catch {
     return (await navigator.mediaDevices.enumerateDevices()).filter((i) => i.deviceId && i.kind === "videoinput").length > 0;
   }
 }
-async function _() {
-  if (await V())
+async function U() {
+  if (await H())
     return !0;
   try {
-    const n = (await navigator.mediaDevices.getUserMedia({ video: !0 })).getTracks();
-    for (const i of n)
+    const o = (await navigator.mediaDevices.getUserMedia({ video: !0 })).getTracks();
+    for (const i of o)
       i.stop();
     return !0;
   } catch {
@@ -62,35 +61,35 @@ async function _() {
   }
 }
 function I(e) {
-  const n = Math.round(0.6666666666666666 * Math.min(e.videoWidth, e.videoHeight));
+  const o = Math.round(0.6666666666666666 * Math.min(e.videoWidth, e.videoHeight));
   return {
-    height: n,
-    width: n,
-    x: Math.round((e.videoWidth - n) / 2),
-    y: Math.round((e.videoHeight - n) / 2)
+    height: o,
+    width: o,
+    x: Math.round((e.videoWidth - o) / 2),
+    y: Math.round((e.videoHeight - o) / 2)
   };
 }
-function W(e, n) {
-  const i = window.getComputedStyle(e), [s, a] = i.objectPosition.split(" ").map(
-    (r, o) => r.endsWith("%") ? (o === 0 ? e.offsetWidth - n.width : e.offsetHeight - n.height) * parseFloat(r) / 100 : parseFloat(r)
+function M(e, o) {
+  const i = window.getComputedStyle(e), [n, a] = i.objectPosition.split(" ").map(
+    (s, r) => s.endsWith("%") ? (r === 0 ? e.offsetWidth - o.width : e.offsetHeight - o.height) * parseFloat(s) / 100 : parseFloat(s)
   );
   return {
-    x: s,
+    x: n,
     y: a
   };
 }
-function b(e) {
-  const n = window.getComputedStyle(e), i = { height: e.offsetHeight, width: e.offsetWidth }, s = i.width / i.height, a = { height: e.videoHeight, width: e.videoWidth }, r = a.width / a.height;
-  switch (n.objectFit) {
+function _(e) {
+  const o = window.getComputedStyle(e), i = { height: e.offsetHeight, width: e.offsetWidth }, n = i.width / i.height, a = { height: e.videoHeight, width: e.videoWidth }, s = a.width / a.height;
+  switch (o.objectFit) {
     case "contain":
       return {
-        height: r < s ? e.offsetHeight : e.offsetWidth / r,
-        width: r < s ? e.offsetHeight * r : e.offsetWidth
+        height: s < n ? e.offsetHeight : e.offsetWidth / s,
+        width: s < n ? e.offsetHeight * s : e.offsetWidth
       };
     case "cover":
       return {
-        height: r > s ? e.offsetHeight : e.offsetWidth / r,
-        width: r > s ? e.offsetHeight * r : e.offsetWidth
+        height: s > n ? e.offsetHeight : e.offsetWidth / s,
+        width: s > n ? e.offsetHeight * s : e.offsetWidth
       };
     case "fill":
       return i;
@@ -99,11 +98,11 @@ function b(e) {
     case "scale-down":
       return {
         height: Math.min(
-          r < s ? e.offsetHeight : e.offsetWidth / r,
+          s < n ? e.offsetHeight : e.offsetWidth / s,
           e.videoHeight
         ),
         width: Math.min(
-          r < s ? e.offsetHeight * r : e.offsetWidth,
+          s < n ? e.offsetHeight * s : e.offsetWidth,
           e.videoWidth
         )
       };
@@ -111,66 +110,75 @@ function b(e) {
       return a;
   }
 }
-function U(e) {
+function z(e) {
   return "BarcodeDetector" in e;
 }
-function B(e, n) {
-  const i = /scaleX\(-1\)/.test(e.style.transform), s = b(e), a = W(e, s), r = i ? e.videoWidth - n.x - n.width : n.x, o = n.y;
+function X(e, o) {
+  const i = /scaleX\(-1\)/.test(e.style.transform), n = _(e), a = M(e, n), s = i ? e.videoWidth - o.x - o.width : o.x, r = o.y;
   return {
-    height: n.height / e.videoHeight * s.height,
-    width: n.width / e.videoWidth * s.width,
-    x: r / e.videoWidth * s.width + a.x,
-    y: o / e.videoHeight * s.height + a.y
+    height: o.height / e.videoHeight * n.height,
+    width: o.width / e.videoWidth * n.width,
+    x: s / e.videoWidth * n.width + a.x,
+    y: r / e.videoHeight * n.height + a.y
   };
 }
-function j(e, n) {
-  const i = /scaleX\(-1\)/.test(e.style.transform), s = b(e), a = W(e, s), r = i ? s.width - (n.x - a.x) - n.width : n.x - a.x, o = n.y - a.y, f = e.videoHeight / s.height, c = e.videoWidth / s.width;
+function Y(e, o) {
+  const i = /scaleX\(-1\)/.test(e.style.transform), n = _(e), a = M(e, n), s = i ? n.width - (o.x - a.x) - o.width : o.x - a.x, r = o.y - a.y, h = e.videoHeight / n.height, c = e.videoWidth / n.width;
   return {
-    height: n.height * f,
-    width: n.width * c,
-    x: r * c,
-    y: o * f
+    height: o.height * h,
+    width: o.width * c,
+    x: s * c,
+    y: r * h
   };
 }
-function q(e) {
-  return new Promise((n) => setTimeout(n, e));
+function $(e) {
+  return new Promise((o) => setTimeout(o, e));
 }
-async function K(e, {
-  debug: n,
+function G(e, { resolveOnError: o = !1, timeout: i = 1e3 * 8 } = {}) {
+  return new Promise((n, a) => {
+    const s = setTimeout(() => {
+      window.removeEventListener(e, r), o ? n(null) : a(new Error(`Event ${e} not received`));
+    }, i), r = () => {
+      clearTimeout(s), window.removeEventListener(e, r), n(null);
+    };
+    window.addEventListener(e, r);
+  });
+}
+async function J(e, {
+  debug: o,
   formats: i = ["qr_code"],
-  getScanArea: s = I,
+  getScanArea: n = I,
   handleDecodeFailure: a,
-  handleDecodeSuccess: r,
-  lifecycle: o = {},
-  scanRate: f = 24
+  handleDecodeSuccess: s,
+  lifecycle: r = {},
+  scanRate: h = 24
 } = {}) {
   if (!(e instanceof HTMLVideoElement))
     throw new Error("video is not a HTMLVideoElement");
-  if (!(r instanceof Function))
+  if (!(s instanceof Function))
     throw new Error("handleDecodeSuccess is not a function");
   if (!(a instanceof Function))
     throw new Error("handleDecodeFailure is not a function");
-  const c = document.createElement("canvas"), m = c.getContext("2d", { willReadFrequently: !0 });
-  if (!m)
+  const c = document.createElement("canvas"), f = c.getContext("2d", { willReadFrequently: !0 });
+  if (!f)
     throw new Error("canvas context is not supported");
-  const { decode: g, worker: p } = H({ formats: i }), t = {
+  const { decode: E, worker: A } = k({ formats: i }), t = {
     decodeFrameTs: performance.now(),
     isDecodeFrameProcessed: !1,
     isDestroyed: !1,
     isVideoActive: !1,
     isVideoPaused: !1,
     isWorkerLoadFailure: !1,
-    scanArea: s(e),
-    scanRate: f,
+    scanArea: n(e),
+    scanRate: h,
     video: e
-  }, w = { state: t }, D = e.requestVideoFrameCallback?.bind(e) ?? requestAnimationFrame;
-  t.video.autoplay = !0, t.video.disablePictureInPicture = !0, t.video.hidden = !1, t.video.muted = !0, t.video.playsInline = !0, o.onCreate && o.onCreate(w);
-  let E = !1;
-  document.addEventListener("barcode-scanner:beforestart", () => E = !0), document.addEventListener("barcode-scanner:start", () => E = !1);
-  function S(d, l = () => {
+  }, m = { state: t }, D = e.requestVideoFrameCallback?.bind(e) ?? requestAnimationFrame;
+  t.video.autoplay = !0, t.video.disablePictureInPicture = !0, t.video.hidden = !1, t.video.muted = !0, t.video.playsInline = !0, r.onCreate && r.onCreate(m);
+  let w = null;
+  function W(d, g = () => {
   }) {
-    D(u);
-    async function u() {
+    D(l);
+    async function l() {
       if (t.isDestroyed || t.isVideoActive === !1)
         return;
       if (
@@ -179,10 +187,10 @@ async function K(e, {
         t.isDecodeFrameProcessed || // Skip if the video is not ready
         t.video.readyState <= 1
       ) {
-        D(u);
+        D(l);
         return;
       }
-      t.isDecodeFrameProcessed = !0, t.scanArea = s(t.video), o.onBeforeDecode && o.onBeforeDecode(w), c.height = t.scanArea.height, c.width = t.scanArea.width, m.clearRect(0, 0, c.width, c.height), m.drawImage(
+      t.isDecodeFrameProcessed = !0, t.scanArea = n(t.video), r.onBeforeDecode && r.onBeforeDecode(m), c.height = t.scanArea.height, c.width = t.scanArea.width, f.clearRect(0, 0, c.width, c.height), f.drawImage(
         t.video,
         t.scanArea.x,
         t.scanArea.y,
@@ -193,92 +201,90 @@ async function K(e, {
         c.width,
         c.height
       );
-      const v = m.getImageData(0, 0, c.width, c.height);
-      n && window.dispatchEvent(
-        new CustomEvent("barcode-scanner:decode-frame", {
+      const v = f.getImageData(0, 0, c.width, c.height);
+      o && window.dispatchEvent(
+        new CustomEvent(L, {
           detail: {
             imageData: v
           }
         })
       );
       try {
-        const h = await g(v);
-        if (h) {
-          const A = h.cornerPoints.map((M) => M.x), y = h.cornerPoints.map((M) => M.y), x = {
-            height: Math.max(...y) - Math.min(...y),
-            width: Math.max(...A) - Math.min(...A),
-            x: Math.min(...A) + t.scanArea.x,
-            y: Math.min(...y) + t.scanArea.y
+        const u = await E(v);
+        if (u) {
+          const R = u.cornerPoints.map((O) => O.x), p = u.cornerPoints.map((O) => O.y), x = {
+            height: Math.max(...p) - Math.min(...p),
+            width: Math.max(...R) - Math.min(...R),
+            x: Math.min(...R) + t.scanArea.x,
+            y: Math.min(...p) + t.scanArea.y
           };
-          await Promise.resolve(d(h.rawValue, x));
+          await Promise.resolve(d(u.rawValue, x));
         } else
-          await Promise.resolve(l());
-      } catch (h) {
-        console.warn("Failed to decode barcode"), h && (console.error(h), h instanceof Error && (h.cause === R || h.cause === T) && (t.isWorkerLoadFailure = !0));
+          await Promise.resolve(g());
+      } catch (u) {
+        console.warn("Failed to decode barcode"), u && (console.error(u), u instanceof Error && (u.cause === y || u.cause === S) && (t.isWorkerLoadFailure = !0));
       } finally {
-        o.onDecode && o.onDecode(w), t.isWorkerLoadFailure === !1 && (t.isDecodeFrameProcessed = !1, t.decodeFrameTs = performance.now(), D(u));
+        r.onDecode && r.onDecode(m), t.isWorkerLoadFailure === !1 && (t.isDecodeFrameProcessed = !1, t.decodeFrameTs = performance.now(), D(l));
       }
     }
   }
-  async function P() {
-    t.isDestroyed || (await O(), p.terminate(), t.isDestroyed = !0);
+  async function F() {
+    t.isDestroyed || (await T(), A.terminate(), t.isDestroyed = !0);
   }
-  async function L() {
-    t.isVideoActive === !1 || t.isVideoPaused || t.isDestroyed || (E && await new Promise((d) => {
-      const l = setTimeout(() => {
-        document.removeEventListener("barcode-scanner:start", u), d(null);
-      }, 8e3), u = () => {
-        clearTimeout(l), document.removeEventListener("barcode-scanner:start", u), d(null);
-      };
-      document.addEventListener("barcode-scanner:start", u);
-    }), o.onBeforePause && o.onBeforePause(w), t.video.srcObject instanceof MediaStream && (t.video.srcObject.getTracks().forEach((d) => d.stop()), t.video.srcObject = null), t.isVideoPaused = !0, o.onPause && o.onPause(w));
+  async function P() {
+    t.isVideoActive === !1 || t.isVideoPaused || t.isDestroyed || (w && await w.catch((d) => console.error(d)), r.onBeforePause && r.onBeforePause(m), t.video.srcObject instanceof MediaStream && (t.video.srcObject.getTracks().forEach((d) => d.stop()), t.video.srcObject = null), t.isVideoPaused = !0, r.onPause && r.onPause(m));
   }
-  async function F({
+  async function C({
     facingMode: d = "environment",
-    ...l
+    ...g
   } = {}) {
-    const u = l.handleDecodeSuccess ?? r, v = l.handleDecodeFailure ?? a;
-    if (!u)
-      throw new Error("handleDecodeSuccess is required");
-    if (document.dispatchEvent(new CustomEvent("barcode-scanner:beforestart")), o.onBeforeStart && o.onBeforeStart(w), !await _())
-      throw new Error("No camera access");
-    t.video.srcObject instanceof MediaStream || (t.video.srcObject = await navigator.mediaDevices.getUserMedia({
-      video: {
-        facingMode: d
-      }
-    }), await t.video.play(), t.isVideoActive = !0, t.isVideoPaused = !1, t.scanArea = s(t.video), t.video.style.transform = d === "user" ? "scaleX(-1)" : "none", document.dispatchEvent(new CustomEvent("barcode-scanner:start")), o.onStart && o.onStart(w), S(u, v));
+    if (!w)
+      return w = (async () => {
+        const l = g.handleDecodeSuccess ?? s, v = g.handleDecodeFailure ?? a;
+        if (!l)
+          throw new Error("handleDecodeSuccess is required");
+        if (r.onBeforeStart && r.onBeforeStart(m), !await U())
+          throw new Error("No camera access");
+        t.video.srcObject instanceof MediaStream || (t.video.srcObject = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode: d
+          }
+        }), await t.video.play(), t.isVideoActive = !0, t.isVideoPaused = !1, t.scanArea = n(t.video), t.video.style.transform = d === "user" ? "scaleX(-1)" : "none", r.onStart && r.onStart(m), W(l, v));
+      })().finally(() => w = null), w;
   }
-  async function O() {
-    t.isDestroyed || (E && await new Promise((d) => {
-      const l = setTimeout(() => {
-        document.removeEventListener("barcode-scanner:start", u), d(null);
-      }, 8e3), u = () => {
-        clearTimeout(l), document.removeEventListener("barcode-scanner:start", u), d(null);
-      };
-      document.addEventListener("barcode-scanner:start", u);
-    }), o.onBeforeStop && o.onBeforeStop(w), t.video.srcObject instanceof MediaStream && (t.video.srcObject.getTracks().forEach((d) => d.stop()), t.video.srcObject = null), t.isVideoActive = !1, t.isVideoPaused = !1, t.video.poster = "", o.onStop && o.onStop(w));
+  async function T() {
+    t.isDestroyed || (w && await w.catch((d) => console.error(d)), r.onBeforeStop && r.onBeforeStop(m), t.video.srcObject instanceof MediaStream && (t.video.srcObject.getTracks().forEach((d) => d.stop()), t.video.srcObject = null), t.isVideoActive = !1, t.isVideoPaused = !1, t.video.poster = "", r.onStop && r.onStop(m));
   }
   return {
-    decode: g,
-    destroy: P,
-    pause: L,
-    start: F,
-    startCallbackProcessed: E,
+    decode: E,
+    destroy: F,
+    pause: P,
+    start: C,
     state: t,
-    stop: O
+    stop: T
   };
 }
 export {
-  K as createBarcodeScanner,
-  H as createWorker,
-  K as default,
-  _ as getCameraAccess,
+  B as BARCODE_SCANNER_BEFORE_START_EVENT,
+  L as BARCODE_SCANNER_DECODE_FRAME_EVENT,
+  j as BARCODE_SCANNER_START_EVENT,
+  N as WORKER_DECODE_FAILURE_CAUSE,
+  K as WORKER_DECODE_TIMEOUT,
+  V as WORKER_DECODE_TIMEOUT_CAUSE,
+  y as WORKER_LOAD_FAILURE_CAUSE,
+  q as WORKER_LOAD_TIMEOUT,
+  S as WORKER_LOAD_TIMEOUT_CAUSE,
+  J as createBarcodeScanner,
+  k as createWorker,
+  J as default,
+  U as getCameraAccess,
   I as getScanArea,
-  W as getVideoRenderOffset,
-  b as getVideoRenderSize,
-  V as hasCameraAccess,
-  U as isBarcodeDetectorAvailable,
-  B as translateAreaToVideoRender,
-  j as translateAreaToVideoSource,
-  q as wait
+  M as getVideoRenderOffset,
+  _ as getVideoRenderSize,
+  H as hasCameraAccess,
+  z as isBarcodeDetectorAvailable,
+  X as translateAreaToVideoRender,
+  Y as translateAreaToVideoSource,
+  $ as wait,
+  G as waitForEvent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nddeps/barcode-scanner",
-    "version": "0.6.0",
+    "version": "0.6.1",
     "private": false,
     "keywords": [
         "barcode",