@vue-solana/vue 4.1.8 → 4.1.10

package/dist/index.mjs

@@ -18,7 +18,7 @@ export { u as useSignAndSendTransactions } from './shared/vue.sPcsjyKU.mjs';
 export { u as useSignatureStatus } from './shared/vue.Bu2cQ690.mjs';
 export { u as useSignIn } from './shared/vue.SeuJipQ8.mjs';
 export { t as tryUseSolana, u as useSolana } from './shared/vue.CcOZ9858.mjs';
-export { u as useSolanaQrScanner } from './shared/vue.B7s1pOGD.mjs';
+export { u as useSolanaQrScanner } from './shared/vue.D0MQeVy2.mjs';
 export { u as useSolanaQrCode } from './shared/vue.Bo4nAja_.mjs';
 export { u as useSolanaPay } from './shared/vue.gvgOc5rc.mjs';
 export { u as useSolanaPayConfirmation } from './shared/vue.MN-kcudq.mjs';

package/dist/shared/{vue.B7s1pOGD.mjs → vue.D0MQeVy2.mjs}

@@ -1,6 +1,7 @@
 import { ref, shallowRef, onUnmounted } from 'vue';
 import { parseURL } from '@vue-solana/core/solana-pay';
 
+const DECODE_SIZE = 720;
 async function createQrCodeDetector() {
   const BarcodeDetectorCtor = globalThis.BarcodeDetector;
   if (!BarcodeDetectorCtor) {
@@ -16,6 +17,18 @@ async function createQrCodeDetector() {
     return null;
   }
 }
+async function loadQrDecoder() {
+  try {
+    const mod = await import('jsqr');
+    const jsQR = mod.default ?? mod;
+    if (typeof jsQR !== "function") {
+      return null;
+    }
+    return (data, width, height) => jsQR(data, width, height, { inversionAttempts: "dontInvert" })?.data || null;
+  } catch {
+    return null;
+  }
+}
 function useSolanaQrScanner() {
   const scanning = ref(false);
   const result = shallowRef(null);
@@ -25,6 +38,8 @@ function useSolanaQrScanner() {
   let videoElement = null;
   let scanTimer = null;
   let barcodeDetector = null;
+  let qrDecoder = null;
+  let frameCanvas = null;
   let stopped = false;
   function stopTracks() {
     if (mediaStream) {
@@ -54,20 +69,55 @@ function useSolanaQrScanner() {
       throw e;
     }
   }
+  async function detectWithBrowser(video) {
+    if (!barcodeDetector) {
+      return null;
+    }
+    try {
+      const codes = await barcodeDetector.detect(video);
+      return codes[0]?.rawValue || codes[0]?.raw || codes[0]?.value || null;
+    } catch {
+      return null;
+    }
+  }
+  function decodeFrame(video) {
+    const side = Math.min(video.videoWidth, video.videoHeight);
+    if (!qrDecoder || !side) {
+      return null;
+    }
+    const size = Math.min(side, DECODE_SIZE);
+    frameCanvas ??= document.createElement("canvas");
+    frameCanvas.width = size;
+    frameCanvas.height = size;
+    const context = frameCanvas.getContext("2d", { willReadFrequently: true });
+    if (!context) {
+      return null;
+    }
+    context.drawImage(
+      video,
+      (video.videoWidth - side) / 2,
+      (video.videoHeight - side) / 2,
+      side,
+      side,
+      0,
+      0,
+      size,
+      size
+    );
+    return qrDecoder(context.getImageData(0, 0, size, size).data, size, size);
+  }
   async function scanFrame() {
-    if (!barcodeDetector || !videoElement || videoElement.readyState < 2) {
+    if (!videoElement || videoElement.readyState < 2) {
+      return false;
+    }
+    const text = await detectWithBrowser(videoElement) ?? decodeFrame(videoElement);
+    if (!text) {
       return false;
     }
     try {
-      const codes = await barcodeDetector.detect(videoElement);
-      const text = codes[0]?.rawValue || codes[0]?.raw || codes[0]?.value;
-      if (!text) {
-        return false;
-      }
       await scanFromText(text);
       return true;
-    } catch (e) {
-      error.value = e;
+    } catch {
       return false;
     }
   }
@@ -86,8 +136,8 @@ function useSolanaQrScanner() {
       if (!navigator?.mediaDevices?.getUserMedia) {
         throw new Error("Camera not available");
       }
-      barcodeDetector = await createQrCodeDetector();
-      if (!barcodeDetector) {
+      [barcodeDetector, qrDecoder] = await Promise.all([createQrCodeDetector(), loadQrDecoder()]);
+      if (!barcodeDetector && !qrDecoder) {
         throw new Error("This browser cannot detect QR codes. Paste the payment URL instead.");
       }
       mediaStream = await navigator.mediaDevices.getUserMedia({

package/dist/useSolanaPay.d.ts

@@ -6,7 +6,7 @@ declare function useSolanaPay(): {
     requestUrl: vue.ShallowRef<string | null, string | null>;
     parsedRequest: vue.ShallowRef<unknown, unknown>;
     reference: vue.ShallowRef<unknown, unknown>;
-    status: vue.ShallowRef<"idle" | "error" | "confirmed" | "finalized" | "pending" | "found" | "expired", "idle" | "error" | "confirmed" | "finalized" | "pending" | "found" | "expired">;
+    status: vue.ShallowRef<"confirmed" | "finalized" | "error" | "idle" | "pending" | "found" | "expired", "confirmed" | "finalized" | "error" | "idle" | "pending" | "found" | "expired">;
     loading: vue.ShallowRef<boolean, boolean>;
     error: vue.ShallowRef<unknown, unknown>;
     createTransferRequest: (input: Record<string, unknown>) => Promise<string>;

package/dist/useSolanaQrScanner.mjs

@@ -1 +1 @@
-export { u as useSolanaQrScanner } from './shared/vue.B7s1pOGD.mjs';
+export { u as useSolanaQrScanner } from './shared/vue.D0MQeVy2.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-solana/vue",
-  "version": "4.1.8",
+  "version": "4.1.10",
   "description": "Vue plugin and composables for Solana applications.",
   "license": "MIT",
   "keywords": [
@@ -194,7 +194,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@vue-solana/core": "4.1.8"
+    "jsqr": "^1.4.0",
+    "@vue-solana/core": "4.1.10"
   },
   "peerDependencies": {
     "vue": "^3.5.0"