@nddeps/barcode-scanner 0.5.0 → 0.5.2

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

@@ -0,0 +1,54 @@
+import type { BarcodeFormat } from 'barcode-detector/ponyfill';
+import { type ScanArea } from './utils';
+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, 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 }?: {
+        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,8 @@
+import type { BarcodeFormat, DetectedBarcode } from 'barcode-detector/ponyfill';
+declare function createWorker({ formats }: {
+    formats: BarcodeFormat[];
+}): {
+    decode: (imageData: ImageData) => Promise<DetectedBarcode | null>;
+    worker: Worker;
+};
+export { createWorker };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { createBarcodeScanner } from './create-barcode-scanner';
+export { createWorker } from './create-worker';
+export * from './utils';
+export { createBarcodeScanner };
+export default createBarcodeScanner;

package/dist/index.js

@@ -0,0 +1,267 @@
+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" }), 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
+      },
+      type: "config"
+    });
+  });
+  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));
+      };
+      o.addEventListener("message", u), o.postMessage({
+        payload: {
+          data: i,
+          uuid: s
+        },
+        type: "decode"
+      });
+    });
+  }
+  return {
+    decode: n,
+    worker: o
+  };
+}
+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 b() {
+  if (await _())
+    return !0;
+  try {
+    const o = (await navigator.mediaDevices.getUserMedia({ video: !0 })).getTracks();
+    for (const a of o)
+      a.stop();
+    return !0;
+  } catch {
+    return !1;
+  }
+}
+function C(e) {
+  const o = Math.round(0.6666666666666666 * Math.min(e.videoWidth, e.videoHeight));
+  return {
+    height: o,
+    width: o,
+    x: Math.round((e.videoWidth - o) / 2),
+    y: Math.round((e.videoHeight - o) / 2)
+  };
+}
+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 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: s < n ? e.offsetHeight : e.offsetWidth / s,
+        width: s < n ? e.offsetHeight * s : e.offsetWidth
+      };
+    case "cover":
+      return {
+        height: s > n ? e.offsetHeight : e.offsetWidth / s,
+        width: s > n ? e.offsetHeight * s : e.offsetWidth
+      };
+    case "fill":
+      return a;
+    case "none":
+      return i;
+    case "scale-down":
+      return {
+        height: Math.min(
+          s < n ? e.offsetHeight : e.offsetWidth / s,
+          e.videoHeight
+        ),
+        width: Math.min(
+          s < n ? e.offsetHeight * s : e.offsetWidth,
+          e.videoWidth
+        )
+      };
+    default:
+      return i;
+  }
+}
+function U(e) {
+  return "BarcodeDetector" in e;
+}
+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: 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 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: o.height * h,
+    width: o.width * c,
+    x: s * c,
+    y: r * h
+  };
+}
+function j(e) {
+  return new Promise((o) => setTimeout(o, e));
+}
+async function q(e, {
+  debug: o,
+  formats: a = ["qr_code"],
+  getScanArea: n = C,
+  handleDecodeFailure: i,
+  handleDecodeSuccess: s,
+  lifecycle: r = {},
+  scanRate: h = 24
+} = {}) {
+  if (!(e instanceof HTMLVideoElement))
+    throw new Error("video is not a HTMLVideoElement");
+  if (!(s instanceof Function))
+    throw new Error("handleDecodeSuccess is not a function");
+  if (!(i instanceof Function))
+    throw new Error("handleDecodeFailure is not a function");
+  const c = document.createElement("canvas"), u = c.getContext("2d", { willReadFrequently: !0 });
+  if (!u)
+    throw new Error("canvas context is not supported");
+  const { decode: g, worker: p } = H({ formats: a }), t = {
+    decodeFrameTs: performance.now(),
+    isDecodeFrameProcessed: !1,
+    isDestroyed: !1,
+    isVideoActive: !1,
+    isVideoPaused: !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() - 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(w);
+        return;
+      }
+      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,
+        c.width,
+        c.height
+      );
+      const E = u.getImageData(0, 0, c.width, c.height);
+      o && window.dispatchEvent(
+        new CustomEvent("barcode-scanner:decode-frame", {
+          detail: {
+            imageData: E
+          }
+        })
+      );
+      try {
+        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(m(d.rawValue, k));
+        } else
+          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 {
+        r.onDecode && r.onDecode(f), t.isWorkerLoadFailure === !1 && (t.isDecodeFrameProcessed = !1, t.decodeFrameTs = performance.now(), v(w));
+      }
+    }
+  }
+  function F() {
+    t.isDestroyed || (M(), p.terminate(), t.isDestroyed = !0);
+  }
+  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 x({
+    facingMode: m = "environment",
+    ...l
+  } = {}) {
+    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");
+    t.video.srcObject instanceof MediaStream || (t.video.srcObject = await navigator.mediaDevices.getUserMedia({
+      video: {
+        facingMode: m
+      }
+    }), 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 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 {
+    decode: g,
+    destroy: F,
+    pause: P,
+    start: x,
+    state: t,
+    stop: M
+  };
+}
+export {
+  q as createBarcodeScanner,
+  H as createWorker,
+  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
+};

package/dist/utils/get-camera-access.d.ts

@@ -0,0 +1,2 @@
+declare function getCameraAccess(): Promise<boolean>;
+export { getCameraAccess };

package/dist/utils/get-scan-area.d.ts

@@ -0,0 +1,9 @@
+type ScanArea = {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+};
+declare function getScanArea(video: HTMLVideoElement): ScanArea;
+export type { ScanArea };
+export { getScanArea };

package/dist/utils/get-video-render-offset.d.ts

@@ -0,0 +1,8 @@
+import type { RenderSize } from './get-video-render-size';
+type RenderOffset = {
+    x: number;
+    y: number;
+};
+declare function getVideoRenderOffset(video: HTMLVideoElement, renderSize: RenderSize): RenderOffset;
+export type { RenderOffset };
+export { getVideoRenderOffset };

package/dist/utils/get-video-render-size.d.ts

@@ -0,0 +1,7 @@
+type RenderSize = {
+    height: number;
+    width: number;
+};
+declare function getVideoRenderSize(video: HTMLVideoElement): RenderSize;
+export type { RenderSize };
+export { getVideoRenderSize };

package/dist/utils/has-camera-access.d.ts

@@ -0,0 +1,2 @@
+declare function hasCameraAccess(): Promise<boolean>;
+export { hasCameraAccess };

package/dist/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './get-camera-access';
+export * from './get-scan-area';
+export * from './get-video-render-offset';
+export * from './get-video-render-size';
+export * from './has-camera-access';
+export * from './is-barcode-detector-available';
+export * from './translate-area-to-video-render';
+export * from './translate-area-to-video-source';
+export * from './wait';

package/dist/utils/is-barcode-detector-available.d.ts

@@ -0,0 +1,7 @@
+import type { BarcodeDetector, BarcodeDetectorOptions } from 'barcode-detector/ponyfill';
+declare function isBarcodeDetectorAvailable<T extends object>(value: T): value is {
+    BarcodeDetector: {
+        new (barcodeDetectorOptions?: BarcodeDetectorOptions): BarcodeDetector;
+    } & BarcodeDetector;
+} & T;
+export { isBarcodeDetectorAvailable };

package/dist/utils/translate-area-to-video-render.d.ts

@@ -0,0 +1,3 @@
+import type { ScanArea } from './get-scan-area';
+declare function translateAreaToVideoRender(video: HTMLVideoElement, area: ScanArea): ScanArea;
+export { translateAreaToVideoRender };

package/dist/utils/translate-area-to-video-source.d.ts

@@ -0,0 +1,3 @@
+import type { ScanArea } from './get-scan-area';
+declare function translateAreaToVideoSource(video: HTMLVideoElement, area: ScanArea): ScanArea;
+export { translateAreaToVideoSource };

package/dist/utils/wait.d.ts

@@ -0,0 +1,2 @@
+declare function wait(ms: number): Promise<unknown>;
+export { wait };