@nddeps/barcode-scanner 0.4.1 → 0.5.1

package/dist/constants.d.ts

@@ -0,0 +1,7 @@
+declare const WORKER_DECODE_TIMEOUT: number;
+declare const WORKER_DECODE_TIMEOUT_CAUSE = "decode-timeout";
+declare const WORKER_DECODE_FAILURE_CAUSE = "decode-failure";
+declare const WORKER_LOAD_FAILURE_CAUSE = "worker-load-failure";
+declare const WORKER_LOAD_TIMEOUT: number;
+declare const WORKER_LOAD_TIMEOUT_CAUSE = "worker-load-timeout";
+export { WORKER_DECODE_FAILURE_CAUSE, WORKER_DECODE_TIMEOUT, WORKER_DECODE_TIMEOUT_CAUSE, WORKER_LOAD_FAILURE_CAUSE, WORKER_LOAD_TIMEOUT, WORKER_LOAD_TIMEOUT_CAUSE, };

package/dist/create-barcode-scanner.d.ts

@@ -1,34 +1,45 @@
+import type { BarcodeFormat } from 'barcode-detector/ponyfill';
 import { type ScanArea } from './utils';
-type DecodeFailureHandler = (this: State) => Promise<void> | void;
-type DecodeSuccessHandler = (this: State, data: string, area: ScanArea) => Promise<void> | void;
-type LifecycleHook = (this: State) => void;
+type Context = {
+    state: State;
+};
+type DecodeFailureHandler = () => Promise<void> | void;
+type DecodeSuccessHandler = (data: string, area: ScanArea) => Promise<void> | void;
+type Lifecycle = {
+    onBeforeCreate?: LifecycleHook;
+    onBeforeDecode?: LifecycleHook;
+    onBeforePause?: LifecycleHook;
+    onBeforeStart?: LifecycleHook;
+    onBeforeStop?: LifecycleHook;
+    onCreate?: LifecycleHook;
+    onDecode?: LifecycleHook;
+    onPause?: LifecycleHook;
+    onStart?: LifecycleHook;
+    onStop?: LifecycleHook;
+};
+type LifecycleHook = (ctx: Context) => void;
+type Options = {
+    debug?: boolean;
+    formats?: BarcodeFormat[];
+    getScanArea?: (video: HTMLVideoElement) => ScanArea;
+    handleDecodeFailure?: DecodeFailureHandler;
+    handleDecodeSuccess?: DecodeSuccessHandler;
+    lifecycle?: Lifecycle;
+    scanRate?: number;
+};
 type State = {
     decodeFrameTs: number;
     isDecodeFrameProcessed: boolean;
     isDestroyed: boolean;
     isVideoActive: boolean;
     isVideoPaused: boolean;
+    isWorkerLoadFailure: boolean;
     scanArea: ScanArea;
     scanRate: number;
     video: HTMLVideoElement;
 };
-declare function createBarcodeScanner(video: HTMLVideoElement, { debug, getScanArea, handleDecodeFailure, handleDecodeSuccess, lifecycle, scanRate, }?: {
-    debug?: boolean;
-    getScanArea?: (video: HTMLVideoElement) => ScanArea;
-    handleDecodeFailure?: DecodeFailureHandler;
-    handleDecodeSuccess?: DecodeSuccessHandler;
-    lifecycle?: {
-        onBeforeCreate?: LifecycleHook;
-        onBeforeDecode?: LifecycleHook;
-        onBeforeStart?: LifecycleHook;
-        onBeforeStop?: LifecycleHook;
-        onCreate?: LifecycleHook;
-        onDecode?: LifecycleHook;
-        onStart?: LifecycleHook;
-        onStop?: LifecycleHook;
-    };
-    scanRate?: number;
-}): Promise<{
+declare function createBarcodeScanner(video: HTMLVideoElement, { debug, formats, getScanArea, handleDecodeFailure, handleDecodeSuccess, lifecycle, scanRate, }?: Options): Promise<{
+    decode: (imageData: ImageData) => Promise<import("barcode-detector/ponyfill").DetectedBarcode | null>;
     destroy: () => void;
     pause: () => Promise<void>;
     start: ({ facingMode, ...rest }?: {

package/dist/create-worker.d.ts

@@ -1,5 +1,7 @@
-import type { DetectedBarcode } from 'barcode-detector/ponyfill';
-declare function createWorker(): {
+import type { BarcodeFormat, DetectedBarcode } from 'barcode-detector/ponyfill';
+declare function createWorker({ formats }: {
+    formats: BarcodeFormat[];
+}): {
     decode: (imageData: ImageData) => Promise<DetectedBarcode | null>;
     worker: Worker;
 };

package/dist/index.js

@@ -1,112 +1,96 @@
-function x(t) {
-  const r = new EventTarget(), a = new Proxy(t, {
-    get(i, o, c) {
-      return Reflect.get(i, o, c);
-    },
-    set(i, o, c, s) {
-      const d = Reflect.set(i, o, c, s);
-      return r.dispatchEvent(new CustomEvent("change")), d;
-    }
-  });
-  function n(i, o) {
-    let c = i();
-    function s() {
-      const d = i();
-      JSON.stringify(d) !== JSON.stringify(c) && (c = d, o(d));
-    }
-    return r.addEventListener("change", s), () => r.removeEventListener("change", s);
-  }
-  return {
-    state: a,
-    watch: n
-  };
-}
-const O = 1e3 * 32, F = 1e3 * 16;
-function T() {
-  const t = new Worker(new URL(
+const L = "decode-timeout", O = "worker-load-failure";
+const R = "worker-load-timeout", V = "" + new URL("zxing-reader.wasm", import.meta.url).href;
+function H({ formats: e }) {
+  const o = new Worker(new URL(
     /* @vite-ignore */
     "" + new URL("worker.js", import.meta.url).href,
     import.meta.url
-  ), { type: "module" }), r = new Promise((n, i) => {
-    const o = setTimeout(() => {
-      i(new Error("Worker load timeout"));
-    }, O);
-    t.addEventListener(
-      "message",
-      ({ data: { payload: c, type: s } }) => {
-        s === "init" && (clearTimeout(o), c.status === "success" ? n(!0) : i(new Error("Worker failed to load")));
+  ), { type: "module" }), a = new Promise((i, s) => {
+    const r = setTimeout(() => {
+      o.removeEventListener("message", h), s(new Error(R));
+    }, 32e3), h = ({ data: { payload: c, type: u } }) => {
+      u === "init" && (clearTimeout(r), o.removeEventListener("message", h), c.status === "success" ? i(!0) : s(new Error(O)));
+    };
+    o.addEventListener("message", h), o.postMessage({
+      payload: {
+        formats: e,
+        wasmUrl: V
       },
-      {
-        once: !0
-      }
-    );
+      type: "config"
+    });
   });
-  async function a(n) {
-    await r;
-    const i = `${performance.now()}-${Math.random().toString(36).slice(2)}`;
-    return new Promise((o, c) => {
-      const s = setTimeout(() => {
-        t.removeEventListener("message", d), c(new Error("Decode timeout"));
-      }, F), d = ({ data: { payload: w, type: g } }) => {
-        g !== "decode" || w.uuid !== i || (clearTimeout(s), t.removeEventListener("message", d), o(w.data));
+  async function n(i) {
+    await a;
+    const s = `${performance.now()}-${Math.random().toString(36).slice(2)}`;
+    return new Promise((r, h) => {
+      const c = setTimeout(() => {
+        o.removeEventListener("message", u), h(new Error(L));
+      }, 16e3), u = ({ data: { payload: g, type: p } }) => {
+        p !== "decode" || g.uuid !== s || (clearTimeout(c), o.removeEventListener("message", u), r(g.data));
       };
-      t.addEventListener("message", d), t.postMessage({ payload: { data: n, uuid: i }, type: "decode" });
+      o.addEventListener("message", u), o.postMessage({
+        payload: {
+          data: i,
+          uuid: s
+        },
+        type: "decode"
+      });
     });
   }
   return {
-    decode: a,
-    worker: t
+    decode: n,
+    worker: o
   };
 }
-async function V() {
+async function _() {
   try {
     return (await navigator.permissions.query({ name: "camera" })).state === "granted";
   } catch {
     return (await navigator.mediaDevices.enumerateDevices()).filter((a) => a.deviceId && a.kind === "videoinput").length > 0;
   }
 }
-async function H() {
-  if (await V())
+async function b() {
+  if (await _())
     return !0;
   try {
-    const r = (await navigator.mediaDevices.getUserMedia({ video: !0 })).getTracks();
-    for (const a of r)
+    const o = (await navigator.mediaDevices.getUserMedia({ video: !0 })).getTracks();
+    for (const a of o)
       a.stop();
     return !0;
   } catch {
     return !1;
   }
 }
-function k(t) {
-  const r = Math.round(0.6666666666666666 * Math.min(t.videoWidth, t.videoHeight));
+function C(e) {
+  const o = Math.round(0.6666666666666666 * Math.min(e.videoWidth, e.videoHeight));
   return {
-    height: r,
-    width: r,
-    x: Math.round((t.videoWidth - r) / 2),
-    y: Math.round((t.videoHeight - r) / 2)
+    height: o,
+    width: o,
+    x: Math.round((e.videoWidth - o) / 2),
+    y: Math.round((e.videoHeight - o) / 2)
   };
 }
-function A(t, r) {
-  const a = window.getComputedStyle(t), [n, i] = a.objectPosition.split(" ").map(
-    (o, c) => o.endsWith("%") ? (c === 0 ? t.offsetWidth - r.width : t.offsetHeight - r.height) * parseFloat(o) / 100 : parseFloat(o)
+function W(e, o) {
+  const a = window.getComputedStyle(e), [n, i] = a.objectPosition.split(" ").map(
+    (s, r) => s.endsWith("%") ? (r === 0 ? e.offsetWidth - o.width : e.offsetHeight - o.height) * parseFloat(s) / 100 : parseFloat(s)
   );
   return {
     x: n,
     y: i
   };
 }
-function W(t) {
-  const r = window.getComputedStyle(t), a = { height: t.offsetHeight, width: t.offsetWidth }, n = a.width / a.height, i = { height: t.videoHeight, width: t.videoWidth }, o = i.width / i.height;
-  switch (r.objectFit) {
+function S(e) {
+  const o = window.getComputedStyle(e), a = { height: e.offsetHeight, width: e.offsetWidth }, n = a.width / a.height, i = { height: e.videoHeight, width: e.videoWidth }, s = i.width / i.height;
+  switch (o.objectFit) {
     case "contain":
       return {
-        height: o < n ? t.offsetHeight : t.offsetWidth / o,
-        width: o < n ? t.offsetHeight * o : t.offsetWidth
+        height: s < n ? e.offsetHeight : e.offsetWidth / s,
+        width: s < n ? e.offsetHeight * s : e.offsetWidth
       };
     case "cover":
       return {
-        height: o > n ? t.offsetHeight : t.offsetWidth / o,
-        width: o > n ? t.offsetHeight * o : t.offsetWidth
+        height: s > n ? e.offsetHeight : e.offsetWidth / s,
+        width: s > n ? e.offsetHeight * s : e.offsetWidth
       };
     case "fill":
       return a;
@@ -115,175 +99,168 @@ function W(t) {
     case "scale-down":
       return {
         height: Math.min(
-          o < n ? t.offsetHeight : t.offsetWidth / o,
-          t.videoHeight
+          s < n ? e.offsetHeight : e.offsetWidth / s,
+          e.videoHeight
         ),
         width: Math.min(
-          o < n ? t.offsetHeight * o : t.offsetWidth,
-          t.videoWidth
+          s < n ? e.offsetHeight * s : e.offsetWidth,
+          e.videoWidth
         )
       };
     default:
       return i;
   }
 }
-function L(t) {
-  return "BarcodeDetector" in t;
+function U(e) {
+  return "BarcodeDetector" in e;
 }
-function j(t, r) {
-  const a = /scaleX\(-1\)/.test(t.style.transform), n = W(t), i = A(t, n), o = a ? t.videoWidth - r.x - r.width : r.x, c = r.y;
+function I(e, o) {
+  const a = /scaleX\(-1\)/.test(e.style.transform), n = S(e), i = W(e, n), s = a ? e.videoWidth - o.x - o.width : o.x, r = o.y;
   return {
-    height: r.height / t.videoHeight * n.height,
-    width: r.width / t.videoWidth * n.width,
-    x: o / t.videoWidth * n.width + i.x,
-    y: c / t.videoHeight * n.height + i.y
+    height: o.height / e.videoHeight * n.height,
+    width: o.width / e.videoWidth * n.width,
+    x: s / e.videoWidth * n.width + i.x,
+    y: r / e.videoHeight * n.height + i.y
   };
 }
-function C(t, r) {
-  const a = /scaleX\(-1\)/.test(t.style.transform), n = W(t), i = A(t, n), o = a ? n.width - (r.x - i.x) - r.width : r.x - i.x, c = r.y - i.y, s = t.videoHeight / n.height, d = t.videoWidth / n.width;
+function B(e, o) {
+  const a = /scaleX\(-1\)/.test(e.style.transform), n = S(e), i = W(e, n), s = a ? n.width - (o.x - i.x) - o.width : o.x - i.x, r = o.y - i.y, h = e.videoHeight / n.height, c = e.videoWidth / n.width;
   return {
-    height: r.height * s,
-    width: r.width * d,
-    x: o * d,
-    y: c * s
+    height: o.height * h,
+    width: o.width * c,
+    x: s * c,
+    y: r * h
   };
 }
-function U(t) {
-  return new Promise((r) => setTimeout(r, t));
+function j(e) {
+  return new Promise((o) => setTimeout(o, e));
 }
-async function B(t, {
-  debug: r,
-  getScanArea: a = k,
-  handleDecodeFailure: n = () => {
-  },
-  handleDecodeSuccess: i = () => {
-  },
-  lifecycle: o = {},
-  scanRate: c = 24
+async function q(e, {
+  debug: o,
+  formats: a = ["qr_code"],
+  getScanArea: n = C,
+  handleDecodeFailure: i,
+  handleDecodeSuccess: s,
+  lifecycle: r = {},
+  scanRate: h = 24
 } = {}) {
-  if (!(t instanceof HTMLVideoElement))
+  if (!(e instanceof HTMLVideoElement))
     throw new Error("video is not a HTMLVideoElement");
-  if (!(i instanceof Function))
+  if (!(s instanceof Function))
     throw new Error("handleDecodeSuccess is not a function");
-  if (!(n instanceof Function))
+  if (!(i instanceof Function))
     throw new Error("handleDecodeFailure is not a function");
-  const s = document.createElement("canvas"), d = s.getContext("2d", { willReadFrequently: !0 });
-  if (!d)
+  const c = document.createElement("canvas"), u = c.getContext("2d", { willReadFrequently: !0 });
+  if (!u)
     throw new Error("canvas context is not supported");
-  const { decode: w, worker: g } = T(), { state: e } = x({
+  const { decode: g, worker: p } = H({ formats: a }), t = {
     decodeFrameTs: performance.now(),
     isDecodeFrameProcessed: !1,
     isDestroyed: !1,
     isVideoActive: !1,
     isVideoPaused: !1,
-    scanArea: a(t),
-    scanRate: c,
-    video: t
-  }), v = t.requestVideoFrameCallback?.bind(t) ?? requestAnimationFrame;
-  e.video.autoplay = !0, e.video.disablePictureInPicture = !0, e.video.hidden = !1, e.video.muted = !0, e.video.playsInline = !0, o.onCreate && o.onCreate.call(e);
-  function b(h, u) {
-    v(m);
-    async function m() {
-      if (e.isDestroyed || e.isVideoActive === !1)
+    isWorkerLoadFailure: !1,
+    scanArea: n(e),
+    scanRate: h,
+    video: e
+  }, f = { state: t }, v = 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(f);
+  function T(m, l = () => {
+  }) {
+    v(w);
+    async function w() {
+      if (t.isDestroyed || t.isVideoActive === !1)
         return;
       if (
         // Skip if the time since the last request frame is less than the scan rate
-        performance.now() - e.decodeFrameTs < 1e3 / e.scanRate || // Skip if the frame is already processed
-        e.isDecodeFrameProcessed || // Skip if the video is not ready
-        e.video.readyState <= 1
+        performance.now() - t.decodeFrameTs < 1e3 / t.scanRate || // Skip if the frame is already processed
+        t.isDecodeFrameProcessed || // Skip if the video is not ready
+        t.video.readyState <= 1
       ) {
-        v(m);
+        v(w);
         return;
       }
-      e.isDecodeFrameProcessed = !0, e.scanArea = a(e.video), o.onBeforeDecode && o.onBeforeDecode.call(e), s.height = e.scanArea.height, s.width = e.scanArea.width, d.clearRect(0, 0, s.width, s.height), d.drawImage(
-        e.video,
-        e.scanArea.x,
-        e.scanArea.y,
-        e.scanArea.width,
-        e.scanArea.height,
+      t.isDecodeFrameProcessed = !0, t.scanArea = n(t.video), r.onBeforeDecode && r.onBeforeDecode(f), c.height = t.scanArea.height, c.width = t.scanArea.width, u.clearRect(0, 0, c.width, c.height), u.drawImage(
+        t.video,
+        t.scanArea.x,
+        t.scanArea.y,
+        t.scanArea.width,
+        t.scanArea.height,
         0,
         0,
-        s.width,
-        s.height
+        c.width,
+        c.height
       );
-      const l = d.getImageData(0, 0, s.width, s.height);
-      r && window.dispatchEvent(
+      const E = u.getImageData(0, 0, c.width, c.height);
+      o && window.dispatchEvent(
         new CustomEvent("barcode-scanner:decode-frame", {
           detail: {
-            imageData: l
+            imageData: E
           }
         })
       );
       try {
-        const f = await w(l);
-        if (f) {
-          const p = f.cornerPoints.map((E) => E.x), y = f.cornerPoints.map((E) => E.y), P = {
-            height: Math.max(...y) - Math.min(...y),
-            width: Math.max(...p) - Math.min(...p),
-            x: Math.min(...p) + e.scanArea.x,
-            y: Math.min(...y) + e.scanArea.y
+        const d = await g(E);
+        if (d) {
+          const D = d.cornerPoints.map((y) => y.x), A = d.cornerPoints.map((y) => y.y), k = {
+            height: Math.max(...A) - Math.min(...A),
+            width: Math.max(...D) - Math.min(...D),
+            x: Math.min(...D) + t.scanArea.x,
+            y: Math.min(...A) + t.scanArea.y
           };
-          await Promise.resolve(h.call(e, f.rawValue, P));
+          await Promise.resolve(m(d.rawValue, k));
         } else
-          await Promise.resolve(u.call(e));
-      } catch (f) {
-        console.warn("Failed to decode barcode"), f && console.error(f);
+          await Promise.resolve(l());
+      } catch (d) {
+        console.warn("Failed to decode barcode"), d && (console.error(d), d instanceof Error && (d.cause === O || d.cause === R) && (t.isWorkerLoadFailure = !0));
       } finally {
-        o.onDecode && o.onDecode.call(e), e.decodeFrameTs = performance.now(), e.isDecodeFrameProcessed = !1, v(m);
+        r.onDecode && r.onDecode(f), t.isWorkerLoadFailure === !1 && (t.isDecodeFrameProcessed = !1, t.decodeFrameTs = performance.now(), v(w));
       }
     }
   }
-  function R() {
-    e.isDestroyed || (D(), g.terminate(), e.isDestroyed = !0);
+  function F() {
+    t.isDestroyed || (M(), p.terminate(), t.isDestroyed = !0);
   }
-  async function S() {
-    if (e.isVideoActive === !1 || e.isVideoPaused || e.isDestroyed)
-      return;
-    e.video.pause(), s.height = e.video.videoHeight, s.width = e.video.videoWidth, d.drawImage(e.video, 0, 0, s.width, s.height, 0, 0, s.width, s.height);
-    const h = await new Promise((u, m) => {
-      s.toBlob(
-        (l) => {
-          l ? u(l) : m(new Error("Failed to convert canvas to blob"));
-        },
-        "image/jpeg",
-        0.9
-      );
-    });
-    e.video.poster.startsWith("blob:") && URL.revokeObjectURL(e.video.poster), e.video.poster = URL.createObjectURL(h), e.video.srcObject instanceof MediaStream && e.video.srcObject.getTracks().forEach((u) => u.stop()), e.isVideoPaused = !0, e.video.srcObject = null;
+  async function P() {
+    t.isVideoActive === !1 || t.isVideoPaused || t.isDestroyed || (r.onBeforePause && r.onBeforePause(f), t.video.srcObject instanceof MediaStream && (t.video.srcObject.getTracks().forEach((m) => m.stop()), t.video.srcObject = null), t.isVideoPaused = !0, r.onPause && r.onPause(f));
   }
-  async function M({
-    facingMode: h = "environment",
-    ...u
+  async function x({
+    facingMode: m = "environment",
+    ...l
   } = {}) {
-    if (o.onBeforeStart && o.onBeforeStart.call(e), !await H())
+    const w = l.handleDecodeSuccess ?? s, E = l.handleDecodeFailure ?? i;
+    if (!w)
+      throw new Error("handleDecodeSuccess is required");
+    if (r.onBeforeStart && r.onBeforeStart(f), !await b())
       throw new Error("No camera access");
-    e.video.srcObject instanceof MediaStream || (e.video.srcObject = await navigator.mediaDevices.getUserMedia({
+    t.video.srcObject instanceof MediaStream || (t.video.srcObject = await navigator.mediaDevices.getUserMedia({
       video: {
-        facingMode: h
+        facingMode: m
       }
-    }), await e.video.play(), e.isVideoActive = !0, e.isVideoPaused = !1, e.scanArea = a(e.video), e.video.style.transform = h === "user" ? "scaleX(-1)" : "none", o.onStart && o.onStart.call(e), b(u.handleDecodeSuccess ?? i, u.handleDecodeFailure ?? n));
+    }), await t.video.play(), t.isVideoActive = !0, t.isVideoPaused = !1, t.scanArea = n(t.video), t.video.style.transform = m === "user" ? "scaleX(-1)" : "none", r.onStart && r.onStart(f), T(w, E));
   }
-  async function D() {
-    e.isVideoActive === !1 || e.isDestroyed || (o.onBeforeStop && o.onBeforeStop.call(e), e.video.srcObject instanceof MediaStream && e.video.srcObject.getTracks().forEach((h) => h.stop()), e.video.poster.startsWith("blob:") && URL.revokeObjectURL(e.video.poster), e.isVideoActive = !1, e.isVideoPaused = !1, e.video.poster = "", e.video.srcObject = null, o.onStop && o.onStop.call(e));
+  async function M() {
+    t.isVideoActive === !1 || t.isDestroyed || (r.onBeforeStop && r.onBeforeStop(f), t.video.srcObject instanceof MediaStream && (t.video.srcObject.getTracks().forEach((m) => m.stop()), t.video.srcObject = null), t.isVideoActive = !1, t.isVideoPaused = !1, t.video.poster = "", r.onStop && r.onStop(f));
   }
   return {
-    destroy: R,
-    pause: S,
-    start: M,
-    state: e,
-    stop: D
+    decode: g,
+    destroy: F,
+    pause: P,
+    start: x,
+    state: t,
+    stop: M
   };
 }
 export {
-  B as createBarcodeScanner,
-  B as default,
-  H as getCameraAccess,
-  k as getScanArea,
-  A as getVideoRenderOffset,
-  W as getVideoRenderSize,
-  V as hasCameraAccess,
-  L as isBarcodeDetectorAvailable,
-  j as translateAreaToVideoRender,
-  C as translateAreaToVideoSource,
-  U as wait
+  q as createBarcodeScanner,
+  q as default,
+  b as getCameraAccess,
+  C as getScanArea,
+  W as getVideoRenderOffset,
+  S as getVideoRenderSize,
+  _ as hasCameraAccess,
+  U as isBarcodeDetectorAvailable,
+  I as translateAreaToVideoRender,
+  B as translateAreaToVideoSource,
+  j as wait
 };