@nddeps/barcode-scanner 0.3.0 → 0.4.0

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

@@ -1,34 +1,43 @@
 import { type ScanArea } from './utils';
-declare function createBarcodeScanner(video: HTMLVideoElement, { calcScanArea, }?: {
-    calcScanArea?: (video: HTMLVideoElement) => ScanArea;
-}): {
-    destroy: () => Promise<void>;
-    pause: () => void;
-    start: ({ facingMode }: {
-        facingMode?: "environment" | "user";
-    } | undefined, onDecodeSuccess: (data: string, area: ScanArea) => void, onDecodeFailure?: () => void) => Promise<void>;
-    state: {
-        calcScanArea: (video: HTMLVideoElement) => ScanArea;
-        canvas: HTMLCanvasElement;
-        canvasContext: CanvasRenderingContext2D;
-        debug: boolean;
-        decodeFrameRequestTimestamp: number;
-        facingMode: "environment" | "user";
-        isDecodeFrameProcessed: boolean;
-        isDestroyed: boolean;
-        isReady: boolean;
-        isVideoActive: boolean;
-        isVideoPaused: boolean;
-        onDecodeFailure: () => void;
-        onDecodeSuccess: (data: string, area: ScanArea) => void;
-        requestFrame: (callback: () => void) => number;
-        resumeOnVisibilityChange: boolean;
-        scanArea: ScanArea;
-        scanRate: number;
-        video: HTMLVideoElement;
-        worker: null | Worker;
-    };
-    stop: () => void;
-    watch: <T>(source: () => T, callback: (newValue: T) => void) => () => void;
+type DecodeFailureHandler = (this: State) => Promise<void> | void;
+type DecodeSuccessHandler = (this: State, data: string, area: ScanArea) => Promise<void> | void;
+type LifecycleHook = (this: State) => void;
+type State = {
+    decodeFrameTs: number;
+    isDecodeFrameProcessed: boolean;
+    isDestroyed: boolean;
+    isVideoActive: boolean;
+    isVideoPaused: boolean;
+    scanArea: ScanArea;
+    scanRate: number;
+    video: HTMLVideoElement;
 };
+declare function createBarcodeScanner(video: HTMLVideoElement, { getScanArea, debug, scanRate, handleDecodeFailure, handleDecodeSuccess, lifecycle, }?: {
+    getScanArea?: (video: HTMLVideoElement) => ScanArea;
+    scanRate?: number;
+    debug?: boolean;
+    handleDecodeFailure?: DecodeFailureHandler;
+    handleDecodeSuccess?: DecodeSuccessHandler;
+    lifecycle?: {
+        onBeforeCreate?: LifecycleHook;
+        onBeforeDecode?: LifecycleHook;
+        onBeforeStart?: LifecycleHook;
+        onBeforeStop?: LifecycleHook;
+        onCreate?: LifecycleHook;
+        onDecode?: LifecycleHook;
+        onStart?: LifecycleHook;
+        onStop?: LifecycleHook;
+    };
+}): Promise<{
+    destroy: () => void;
+    pause: () => Promise<void>;
+    start: ({ facingMode, ...rest }?: {
+        facingMode?: "environment" | "user";
+        handleDecodeFailure?: DecodeFailureHandler;
+        handleDecodeSuccess?: DecodeSuccessHandler;
+    }) => Promise<void>;
+    state: State;
+    stop: () => Promise<void>;
+}>;
+export type { DecodeFailureHandler, DecodeSuccessHandler, LifecycleHook, State };
 export { createBarcodeScanner };

package/dist/create-worker.d.ts

@@ -0,0 +1,6 @@
+import type { DetectedBarcode } from 'barcode-detector/ponyfill';
+declare function createWorker(): {
+    decode: (imageData: ImageData) => Promise<DetectedBarcode | null>;
+    worker: Worker;
+};
+export { createWorker };

package/dist/index-BOvjrDOv.js

@@ -0,0 +1,289 @@
+function x(t) {
+  const o = new EventTarget(), c = new Proxy(t, {
+    get(n, r, i) {
+      return Reflect.get(n, r, i);
+    },
+    set(n, r, i, s) {
+      const d = Reflect.set(n, r, i, s);
+      return o.dispatchEvent(new CustomEvent("change")), d;
+    }
+  });
+  function a(n, r) {
+    let i = n();
+    function s() {
+      const d = n();
+      JSON.stringify(d) !== JSON.stringify(i) && (i = d, r(d));
+    }
+    return o.addEventListener("change", s), () => o.removeEventListener("change", s);
+  }
+  return {
+    state: c,
+    watch: a
+  };
+}
+function F() {
+  const t = new Worker(new URL(
+    /* @vite-ignore */
+    "" + new URL("worker-BTT4rwmP.js", import.meta.url).href,
+    import.meta.url
+  ), { type: "module" }), o = new Promise((a, n) => {
+    const r = setTimeout(() => n(new Error("Worker load timeout")), 16e3);
+    t.addEventListener(
+      "message",
+      ({
+        data: { payload: i, type: s }
+      }) => {
+        s === "message" && (clearTimeout(r), i.status === "success" ? a(!0) : n(new Error("Worker failed to load")));
+      },
+      {
+        once: !0
+      }
+    );
+  });
+  async function c(a) {
+    await o;
+    const n = `${performance.now()}-${Math.random().toString(36).slice(2)}`;
+    return new Promise((r, i) => {
+      let s = 0;
+      const d = ({ data: { payload: w, type: g } }) => {
+        g !== "decode" || w.uuid !== n || (clearTimeout(s), t.removeEventListener("message", d), r(w.data));
+      };
+      s = setTimeout(() => {
+        t.removeEventListener("message", d), i(new Error("Decode timeout"));
+      }, 1e3 * 6), t.addEventListener("message", d), t.postMessage({ payload: { data: a, uuid: n }, type: "decode" });
+    });
+  }
+  return {
+    decode: c,
+    worker: t
+  };
+}
+async function V() {
+  try {
+    return (await navigator.permissions.query({ name: "camera" })).state === "granted";
+  } catch {
+    return (await navigator.mediaDevices.enumerateDevices()).filter((c) => c.deviceId && c.kind === "videoinput").length > 0;
+  }
+}
+async function H() {
+  if (await V())
+    return !0;
+  try {
+    const o = (await navigator.mediaDevices.getUserMedia({ video: !0 })).getTracks();
+    for (const c of o)
+      c.stop();
+    return !0;
+  } catch {
+    return !1;
+  }
+}
+function T(t) {
+  const o = Math.round(0.6666666666666666 * Math.min(t.videoWidth, t.videoHeight));
+  return {
+    height: o,
+    width: o,
+    x: Math.round((t.videoWidth - o) / 2),
+    y: Math.round((t.videoHeight - o) / 2)
+  };
+}
+function D(t, o) {
+  const c = window.getComputedStyle(t), [a, n] = c.objectPosition.split(" ").map(
+    (r, i) => r.endsWith("%") ? (i === 0 ? t.offsetWidth - o.width : t.offsetHeight - o.height) * parseFloat(r) / 100 : parseFloat(r)
+  );
+  return {
+    x: a,
+    y: n
+  };
+}
+function S(t) {
+  const o = window.getComputedStyle(t), c = { height: t.offsetHeight, width: t.offsetWidth }, a = c.width / c.height, n = { height: t.videoHeight, width: t.videoWidth }, r = n.width / n.height;
+  switch (o.objectFit) {
+    case "contain":
+      return {
+        height: r < a ? t.offsetHeight : t.offsetWidth / r,
+        width: r < a ? t.offsetHeight * r : t.offsetWidth
+      };
+    case "cover":
+      return {
+        height: r > a ? t.offsetHeight : t.offsetWidth / r,
+        width: r > a ? t.offsetHeight * r : t.offsetWidth
+      };
+    case "fill":
+      return c;
+    case "none":
+      return n;
+    case "scale-down":
+      return {
+        height: Math.min(
+          r < a ? t.offsetHeight : t.offsetWidth / r,
+          t.videoHeight
+        ),
+        width: Math.min(
+          r < a ? t.offsetHeight * r : t.offsetWidth,
+          t.videoWidth
+        )
+      };
+    default:
+      return n;
+  }
+}
+function k(t) {
+  return "BarcodeDetector" in t;
+}
+function L(t, o) {
+  const c = /scaleX\(-1\)/.test(t.style.transform), a = S(t), n = D(t, a), r = c ? t.videoWidth - o.x - o.width : o.x, i = o.y;
+  return {
+    height: o.height / t.videoHeight * a.height,
+    width: o.width / t.videoWidth * a.width,
+    x: r / t.videoWidth * a.width + n.x,
+    y: i / t.videoHeight * a.height + n.y
+  };
+}
+function O(t, o) {
+  const c = /scaleX\(-1\)/.test(t.style.transform), a = S(t), n = D(t, a), r = c ? a.width - (o.x - n.x) - o.width : o.x - n.x, i = o.y - n.y, s = t.videoHeight / a.height, d = t.videoWidth / a.width;
+  return {
+    height: o.height * s,
+    width: o.width * d,
+    x: r * d,
+    y: i * s
+  };
+}
+function j(t) {
+  return new Promise((o) => setTimeout(o, t));
+}
+async function B(t, {
+  getScanArea: o = T,
+  debug: c,
+  scanRate: a = 24,
+  handleDecodeFailure: n = () => {
+  },
+  handleDecodeSuccess: r = () => {
+  },
+  lifecycle: i = {}
+} = {}) {
+  if (!(t instanceof HTMLVideoElement))
+    throw new Error("video is not a HTMLVideoElement");
+  if (!(r instanceof Function))
+    throw new Error("handleDecodeSuccess is not a function");
+  if (!(n instanceof Function))
+    throw new Error("handleDecodeFailure is not a function");
+  const s = document.createElement("canvas"), d = s.getContext("2d", { willReadFrequently: !0 });
+  if (!d)
+    throw new Error("canvas context is not supported");
+  const { decode: w, worker: g } = F(), { state: e } = x({
+    decodeFrameTs: performance.now(),
+    isDecodeFrameProcessed: !1,
+    isDestroyed: !1,
+    isVideoActive: !1,
+    isVideoPaused: !1,
+    scanArea: o(t),
+    scanRate: a,
+    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, i.onCreate && i.onCreate.call(e);
+  function W(h, u) {
+    v(m);
+    async function m() {
+      if (e.isDestroyed || e.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
+      ) {
+        v(m);
+        return;
+      }
+      e.isDecodeFrameProcessed = !0, e.scanArea = o(e.video), i.onBeforeDecode && i.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,
+        0,
+        0,
+        s.width,
+        s.height
+      );
+      const l = d.getImageData(0, 0, s.width, s.height);
+      c && window.dispatchEvent(
+        new CustomEvent("barcode-scanner:decode-frame", {
+          detail: {
+            imageData: l
+          }
+        })
+      );
+      try {
+        const f = await w(l);
+        if (f) {
+          const p = f.cornerPoints.map((b) => b.x), y = f.cornerPoints.map((b) => b.y), R = {
+            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
+          };
+          await Promise.resolve(h.call(e, f.rawValue, R));
+        } else
+          await Promise.resolve(u.call(e));
+      } catch (f) {
+        console.warn("Failed to decode barcode"), f && console.error(f);
+      } finally {
+        i.onDecode && i.onDecode.call(e), e.decodeFrameTs = performance.now(), e.isDecodeFrameProcessed = !1, v(m);
+      }
+    }
+  }
+  function E() {
+    e.isDestroyed || (A(), g.terminate(), e.isDestroyed = !0);
+  }
+  async function P() {
+    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 M({
+    facingMode: h = "environment",
+    ...u
+  } = {}) {
+    if (i.onBeforeStart && i.onBeforeStart.call(e), !await H())
+      throw new Error("No camera access");
+    e.video.srcObject instanceof MediaStream || (e.video.srcObject = await navigator.mediaDevices.getUserMedia({
+      video: {
+        facingMode: h
+      }
+    }), await e.video.play(), e.isVideoActive = !0, e.isVideoPaused = !1, e.scanArea = o(e.video), e.video.style.transform = h === "user" ? "scaleX(-1)" : "none", i.onStart && i.onStart.call(e), W(u.handleDecodeSuccess ?? r, u.handleDecodeFailure ?? n));
+  }
+  async function A() {
+    e.isVideoActive === !1 || e.isDestroyed || (i.onBeforeStop && i.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, i.onStop && i.onStop.call(e));
+  }
+  return {
+    destroy: E,
+    pause: P,
+    start: M,
+    state: e,
+    stop: A
+  };
+}
+export {
+  B as createBarcodeScanner,
+  B as default,
+  H as getCameraAccess,
+  T as getScanArea,
+  D as getVideoRenderOffset,
+  S as getVideoRenderSize,
+  V as hasCameraAccess,
+  k as isBarcodeDetectorAvailable,
+  L as translateAreaToVideoRender,
+  O as translateAreaToVideoSource,
+  j as wait
+};