@nocobase/client-v2 2.4.0-alpha.5 → 2.4.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.4.0-alpha.5",
+  "version": "2.4.0-alpha.7",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.4.0-alpha.5",
-    "@nocobase/flow-engine": "2.4.0-alpha.5",
-    "@nocobase/sdk": "2.4.0-alpha.5",
-    "@nocobase/shared": "2.4.0-alpha.5",
-    "@nocobase/utils": "2.4.0-alpha.5",
+    "@nocobase/evaluators": "2.4.0-alpha.7",
+    "@nocobase/flow-engine": "2.4.0-alpha.7",
+    "@nocobase/sdk": "2.4.0-alpha.7",
+    "@nocobase/shared": "2.4.0-alpha.7",
+    "@nocobase/utils": "2.4.0-alpha.7",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -46,7 +46,8 @@
     "lodash": "4.17.21",
     "react-device-detect": "2.2.3",
     "react-i18next": "^11.15.1",
-    "react-router-dom": "^6.30.1"
+    "react-router-dom": "^6.30.1",
+    "zxing-wasm": "^3.1.3"
   },
-  "gitHead": "ce4b0948641b13d2964c44905cb30bebe877a657"
+  "gitHead": "bb018bfc8bdcc0f399244d2f248c55e51ceb2d1e"
 }

package/src/components/form/ScanInput/CodeScanner.tsx

@@ -41,6 +41,7 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
   const inputId = useId().replace(/:/g, '');
   const scannerElementId = `code-scanner-${inputId}`;
   const imgUploaderRef = useRef<HTMLInputElement>(null);
+  const scannerViewportRef = useRef<HTMLDivElement>(null);
   const [cameraAvailable, setCameraAvailable] = useState(false);
   const [scannerSize, setScannerSize] = useState({ width: 0, height: 0 });
   const [viewport, setViewport] = useState(getViewportSize);
@@ -84,6 +85,7 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     elementId: scannerElementId,
     formatsToSupport,
     onScannerSizeChanged: setScannerSize,
+    scanViewportRef: scannerViewportRef,
     onScanSuccess: handleScanSuccess,
     onScanFailure: showScanFailure,
     onCameraStartFailure: showCameraStartFailure,
@@ -207,7 +209,7 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
 
   return (
     <div className={rootClass}>
-      <div className={scannerWrapperClass}>
+      <div ref={scannerViewportRef} className={scannerWrapperClass}>
         <div
           className={scannerSurfaceClass}
           style={{

package/src/components/form/ScanInput/__tests__/CodeScanner.test.tsx

@@ -14,6 +14,7 @@ import { CodeScanner } from '../CodeScanner';
 
 const mocks = vi.hoisted(() => ({
   getCameras: vi.fn().mockResolvedValue([{ id: 'rear-camera' }]),
+  scanViewport: null as HTMLElement | null,
 }));
 
 vi.mock('html5-qrcode', () => ({
@@ -53,15 +54,18 @@ vi.mock('../useCodeScanner', async (importOriginal) => {
     useCodeScanner: ({
       enabled,
       onScannerSizeChanged,
+      scanViewportRef,
     }: {
       enabled: boolean;
       onScannerSizeChanged?: (size: { width: number; height: number }) => void;
+      scanViewportRef?: { current: HTMLElement | null };
     }) => {
       ReactModule.useEffect(() => {
         if (enabled) {
+          mocks.scanViewport = scanViewportRef?.current || null;
           onScannerSizeChanged?.({ width: 1280, height: 720 });
         }
-      }, [enabled, onScannerSizeChanged]);
+      }, [enabled, onScannerSizeChanged, scanViewportRef]);
 
       return { startScanFile: vi.fn() };
     },
@@ -70,6 +74,7 @@ vi.mock('../useCodeScanner', async (importOriginal) => {
 
 describe('CodeScanner', () => {
   afterEach(() => {
+    mocks.scanViewport = null;
     vi.restoreAllMocks();
   });
 
@@ -82,6 +87,7 @@ describe('CodeScanner', () => {
     render(<CodeScanner visible onClose={() => undefined} onScanSuccess={() => undefined} />);
 
     await waitFor(() => expect(document.getElementById('code-scan-box')).toBeInTheDocument());
+    expect(mocks.scanViewport).toBeInstanceOf(HTMLElement);
 
     const scannerElement = document.querySelector<HTMLElement>('[id^="code-scanner-"]');
     const scannerSurface = scannerElement?.parentElement;

package/src/components/form/ScanInput/__tests__/useCodeScanner.test.tsx

@@ -10,7 +10,14 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React, { useCallback } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { DEFAULT_CODE_FORMATS, getCodeScanBoxSize, scanQrVideoFrame, useCodeScanner } from '../useCodeScanner';
+import {
+  DEFAULT_CODE_FORMATS,
+  getCodeScanBoxSize,
+  isIOSBrowser,
+  scanQrVideoFrame,
+  scanQrVideoFrameWithZxingWasm,
+  useCodeScanner,
+} from '../useCodeScanner';
 
 type MockScannerInstance = {
   applyVideoConstraints: ReturnType<typeof vi.fn>;
@@ -58,6 +65,10 @@ const jsQrMocks = vi.hoisted(() => {
   };
 });
 
+const zxingWasmMocks = vi.hoisted(() => ({
+  decodeQrCodeWithZxingWasm: vi.fn(),
+}));
+
 vi.mock('html5-qrcode', () => ({
   Html5Qrcode: mocks.Html5Qrcode,
   Html5QrcodeScannerState: {
@@ -81,6 +92,7 @@ vi.mock('html5-qrcode', () => ({
 }));
 
 vi.mock('jsqr', () => jsQrMocks);
+vi.mock('../zxingWasmDecoder', () => zxingWasmMocks);
 
 function ScannerHost({
   onCameraStartFailure,
@@ -148,19 +160,71 @@ function stubImageElement(size: { width: number; height: number } = { width: 600
   });
 }
 
-function stubCanvas() {
+function stubCanvas(imageData?: ImageData) {
   const canvasContext = {
     drawImage: vi.fn(),
-    getImageData: vi.fn((_x: number, _y: number, width: number, height: number) => ({
-      data: new Uint8ClampedArray(width * height * 4),
-      height,
-      width,
-    })),
+    getImageData: vi.fn(
+      (_x: number, _y: number, width: number, height: number) =>
+        imageData || {
+          data: new Uint8ClampedArray(width * height * 4),
+          height,
+          width,
+        },
+    ),
   } as unknown as CanvasRenderingContext2D;
 
   vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(canvasContext);
 }
 
+function createCustomerQrFrame(width: number, height: number) {
+  const modules = [
+    '111111101101001111111',
+    '100000100101101000001',
+    '101110100111101011101',
+    '101110100111101011101',
+    '101110101100101011101',
+    '100000101000101000001',
+    '111111101010101111111',
+    '000000000111100000000',
+    '011111110001100110001',
+    '011010001101101111110',
+    '101101110010011000110',
+    '011000001011010110101',
+    '011110111011000100100',
+    '000000001100100001010',
+    '111111101001100101110',
+    '100000101001100001101',
+    '101110101010000101110',
+    '101110101011111001000',
+    '101110101110101011000',
+    '100000101101111010001',
+    '111111100110100010000',
+  ];
+  const data = new Uint8ClampedArray(width * height * 4);
+  data.fill(255);
+  const moduleSize = 12;
+  const left = Math.floor((width - modules.length * moduleSize) / 2);
+  const top = 60;
+
+  modules.forEach((row, rowIndex) => {
+    Array.from(row).forEach((module, columnIndex) => {
+      if (module !== '1') {
+        return;
+      }
+      for (let y = 0; y < moduleSize; y += 1) {
+        for (let x = 0; x < moduleSize; x += 1) {
+          const pixelIndex = ((top + rowIndex * moduleSize + y) * width + left + columnIndex * moduleSize + x) * 4;
+          data[pixelIndex] = 0;
+          data[pixelIndex + 1] = 0;
+          data[pixelIndex + 2] = 0;
+        }
+      }
+    });
+  });
+
+  return { data, height, width } as ImageData;
+}
+
 describe('useCodeScanner', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -170,6 +234,7 @@ describe('useCodeScanner', () => {
     mocks.stop.mockResolvedValue(null);
     mocks.getState.mockReturnValue(1);
     jsQrMocks.default.mockReturnValue(undefined);
+    zxingWasmMocks.decodeQrCodeWithZxingWasm.mockResolvedValue(undefined);
   });
 
   afterEach(() => {
@@ -233,7 +298,7 @@ describe('useCodeScanner', () => {
     });
   });
 
-  it('decodes a centered QR code from the raw camera frame fast path', () => {
+  it('keeps the existing centered scan region outside iOS', () => {
     jsQrMocks.default.mockReturnValueOnce({ data: 'FAST-QR' });
     stubCanvas();
     const video = document.createElement('video');
@@ -255,6 +320,115 @@ describe('useCodeScanner', () => {
     });
   });
 
+  it('decodes the camera preview visible on iOS without scanning offscreen content', async () => {
+    const actualJsQr = await vi.importActual<typeof import('jsqr')>('jsqr');
+    jsQrMocks.default.mockImplementationOnce(actualJsQr.default);
+    stubCanvas(createCustomerQrFrame(431, 933));
+    const video = document.createElement('video');
+    Object.defineProperties(video, {
+      getBoundingClientRect: {
+        value: () => ({ bottom: 864, height: 864, left: -573, right: 963, top: 0, width: 1536 }),
+      },
+      readyState: { value: HTMLMediaElement.HAVE_CURRENT_DATA },
+      videoHeight: { value: 1080 },
+      videoWidth: { value: 1920 },
+    });
+    const scanViewport = document.createElement('div');
+    vi.spyOn(scanViewport, 'getBoundingClientRect').mockReturnValue({
+      bottom: 844,
+      height: 844,
+      left: 0,
+      right: 390,
+      top: 0,
+      width: 390,
+      x: 0,
+      y: 0,
+      toJSON: () => undefined,
+    });
+    const canvas = document.createElement('canvas');
+
+    expect(scanQrVideoFrame(video, canvas, scanViewport)).toBe('TCBNVBY064J3');
+
+    const context = canvas.getContext('2d');
+    expect(context?.drawImage).toHaveBeenCalledWith(video, 716, 0, 488, 1055, 0, 0, 431, 933);
+    expect(jsQrMocks.default).toHaveBeenCalledWith(expect.any(Uint8ClampedArray), 431, 933, {
+      inversionAttempts: 'dontInvert',
+    });
+  });
+
+  it('uses ZXing WASM for high-resolution iOS camera frames', async () => {
+    const imageData = createCustomerQrFrame(431, 933);
+    stubCanvas(imageData);
+    zxingWasmMocks.decodeQrCodeWithZxingWasm.mockResolvedValueOnce('CUSTOMER-QR');
+    const video = document.createElement('video');
+    Object.defineProperties(video, {
+      getBoundingClientRect: {
+        value: () => ({ bottom: 864, height: 864, left: -573, right: 963, top: 0, width: 1536 }),
+      },
+      readyState: { value: HTMLMediaElement.HAVE_CURRENT_DATA },
+      videoHeight: { value: 1080 },
+      videoWidth: { value: 1920 },
+    });
+    const scanViewport = document.createElement('div');
+    vi.spyOn(scanViewport, 'getBoundingClientRect').mockReturnValue({
+      bottom: 844,
+      height: 844,
+      left: 0,
+      right: 390,
+      top: 0,
+      width: 390,
+      x: 0,
+      y: 0,
+      toJSON: () => undefined,
+    });
+
+    await expect(scanQrVideoFrameWithZxingWasm(video, document.createElement('canvas'), scanViewport)).resolves.toBe(
+      'CUSTOMER-QR',
+    );
+    const context = document.createElement('canvas').getContext('2d');
+    expect(context?.drawImage).toHaveBeenCalledWith(video, 716, 0, 488, 1055, 0, 0, 488, 1055);
+    expect(jsQrMocks.default).not.toHaveBeenCalled();
+    expect(zxingWasmMocks.decodeQrCodeWithZxingWasm).toHaveBeenCalledWith(imageData);
+  });
+
+  it('detects iPhone browsers', () => {
+    vi.spyOn(window.navigator, 'userAgent', 'get').mockReturnValue('Mozilla/5.0 (iPhone; CPU iPhone OS 18_0)');
+    expect(isIOSBrowser()).toBe(true);
+  });
+
+  it('detects iPad browsers using desktop mode', () => {
+    vi.stubGlobal('navigator', {
+      maxTouchPoints: 5,
+      platform: 'MacIntel',
+      userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15)',
+    });
+    expect(isIOSBrowser()).toBe(true);
+  });
+
+  it('keeps the iOS preview path disabled on other platforms', () => {
+    vi.stubGlobal('navigator', {
+      maxTouchPoints: 0,
+      platform: 'Linux x86_64',
+      userAgent: 'Mozilla/5.0 (X11; Linux x86_64)',
+    });
+    expect(isIOSBrowser()).toBe(false);
+  });
+
+  it('waits for a measurable iOS preview instead of scanning hidden camera content', () => {
+    stubCanvas();
+    const video = document.createElement('video');
+    Object.defineProperties(video, {
+      readyState: { value: HTMLMediaElement.HAVE_CURRENT_DATA },
+      videoHeight: { value: 1080 },
+      videoWidth: { value: 1920 },
+    });
+    const canvas = document.createElement('canvas');
+    const scanViewport = document.createElement('div');
+
+    expect(scanQrVideoFrame(video, canvas, scanViewport)).toBeUndefined();
+    expect(jsQrMocks.default).not.toHaveBeenCalled();
+  });
+
   it('enables continuous camera focus when the device supports it', async () => {
     mocks.getRunningTrackCapabilities.mockReturnValue({ focusMode: ['manual', 'continuous'] });
 

package/src/components/form/ScanInput/__tests__/zxingWasmDecoder.test.ts

@@ -0,0 +1,78 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { beforeEach, expect, it, vi } from 'vitest';
+import { decodeQrCodeWithZxingWasm } from '../zxingWasmDecoder';
+
+const mocks = vi.hoisted(() => ({
+  prepareZXingModule: vi.fn(),
+  purgeZXingModule: vi.fn(),
+  readBarcodes: vi.fn(),
+}));
+
+vi.mock('zxing-wasm/reader', () => mocks);
+vi.mock('zxing-wasm/reader/zxing_reader.wasm', () => ({ default: '/assets/zxing_reader.wasm' }));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.prepareZXingModule.mockResolvedValue(undefined);
+  mocks.readBarcodes.mockResolvedValue([]);
+});
+
+it('retries decoder loading and uses downscaled QR detection', async () => {
+  const imageData = { data: new Uint8ClampedArray(16), height: 2, width: 2 } as ImageData;
+  mocks.prepareZXingModule.mockRejectedValueOnce(new Error('decoder loading failed'));
+
+  await expect(decodeQrCodeWithZxingWasm(imageData)).rejects.toThrow('decoder loading failed');
+  expect(mocks.purgeZXingModule).toHaveBeenCalledTimes(1);
+
+  mocks.readBarcodes.mockResolvedValueOnce([{ text: 'CUSTOMER-QR' }]);
+
+  await expect(decodeQrCodeWithZxingWasm(imageData)).resolves.toBe('CUSTOMER-QR');
+  expect(mocks.prepareZXingModule).toHaveBeenCalledTimes(2);
+  const { overrides } = mocks.prepareZXingModule.mock.calls[1][0] as {
+    overrides: { locateFile: () => string };
+  };
+  const { locateFile } = overrides;
+  expect(locateFile()).toBe('/assets/zxing_reader.wasm');
+  expect(mocks.prepareZXingModule).toHaveBeenLastCalledWith({
+    fireImmediately: true,
+    overrides: { locateFile: expect.any(Function) },
+  });
+  expect(mocks.readBarcodes).toHaveBeenCalledWith(imageData, {
+    binarizer: 'GlobalHistogram',
+    downscaleThreshold: 300,
+    formats: ['QRCode'],
+    maxNumberOfSymbols: 1,
+    tryDenoise: true,
+    tryDownscale: true,
+    tryHarder: true,
+    tryInvert: true,
+    tryRotate: true,
+  });
+});
+
+it('retries reflective frames with local adaptive binarization', async () => {
+  const imageData = { data: new Uint8ClampedArray(16), height: 2, width: 2 } as ImageData;
+  mocks.readBarcodes.mockResolvedValueOnce([]).mockResolvedValueOnce([{ text: 'REFLECTIVE-QR' }]);
+
+  await expect(decodeQrCodeWithZxingWasm(imageData)).resolves.toBe('REFLECTIVE-QR');
+  expect(mocks.readBarcodes).toHaveBeenCalledTimes(2);
+  expect(mocks.readBarcodes).toHaveBeenNthCalledWith(2, imageData, {
+    binarizer: 'LocalAverage',
+    downscaleThreshold: 300,
+    formats: ['QRCode'],
+    maxNumberOfSymbols: 1,
+    tryDenoise: true,
+    tryDownscale: true,
+    tryHarder: true,
+    tryInvert: true,
+    tryRotate: true,
+  });
+});

package/src/components/form/ScanInput/useCodeScanner.ts

@@ -10,7 +10,9 @@
 import { Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats } from 'html5-qrcode';
 import jsQR from 'jsqr';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import type { RefObject } from 'react';
 import type { CodeFormatsToSupport } from './types';
+import { decodeQrCodeWithZxingWasm } from './zxingWasmDecoder';
 
 type ScannerSize = {
   width: number;
@@ -22,6 +24,7 @@ type UseCodeScannerOptions = {
   elementId: string;
   formatsToSupport?: CodeFormatsToSupport;
   onScannerSizeChanged?: (size: ScannerSize) => void;
+  scanViewportRef?: RefObject<HTMLElement | null>;
   onScanSuccess: (text: string) => void;
   onScanFailure?: () => void;
   onCameraStartFailure?: (error: unknown) => void;
@@ -37,6 +40,12 @@ type JsQRImageTransform = {
   threshold?: number;
 };
 
+type QrFrameCaptureLimits = {
+  maxHeight: number;
+  maxPixels: number;
+  maxWidth: number;
+};
+
 type FocusMediaTrackCapabilities = MediaTrackCapabilities & {
   focusMode?: string[];
 };
@@ -47,8 +56,15 @@ type FocusMediaTrackConstraintSet = MediaTrackConstraintSet & {
 
 const QR_SCAN_IMAGE_SIZES = [3200, 2400, 1600, 1000];
 const LIVE_QR_SCAN_INTERVAL = 120;
+const IOS_ZXING_SCAN_INTERVAL = 200;
 const LIVE_QR_SCAN_MAX_WIDTH = 960;
 const LIVE_QR_SCAN_MAX_HEIGHT = 540;
+const LIVE_QR_SCAN_MAX_PIXELS = LIVE_QR_SCAN_MAX_WIDTH * 420;
+const IOS_ZXING_SCAN_LIMITS: QrFrameCaptureLimits = {
+  maxHeight: 720,
+  maxPixels: 720 * 960,
+  maxWidth: 1280,
+};
 const QR_SCAN_IMAGE_TRANSFORMS: JsQRImageTransform[] = [
   {},
   { contrast: 3, threshold: 105 },
@@ -81,7 +97,49 @@ export function getCodeScanBoxSize(width: number, height: number) {
   };
 }
 
-export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElement) {
+export function isIOSBrowser() {
+  return (
+    /iPad|iPhone|iPod/i.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+  );
+}
+
+function getVisibleVideoFrameRegion(video: HTMLVideoElement, scanViewport: Element) {
+  const rect = video.getBoundingClientRect();
+  const viewportRect = scanViewport.getBoundingClientRect();
+  const visibleLeft = Math.max(viewportRect.left, rect.left);
+  const visibleTop = Math.max(viewportRect.top, rect.top);
+  const visibleRight = Math.min(viewportRect.right, rect.right);
+  const visibleBottom = Math.min(viewportRect.bottom, rect.bottom);
+  if (!rect.width || !rect.height || visibleRight <= visibleLeft || visibleBottom <= visibleTop) {
+    return;
+  }
+
+  const sourceX = Math.max(0, Math.floor(((visibleLeft - rect.left) / rect.width) * video.videoWidth));
+  const sourceY = Math.max(0, Math.floor(((visibleTop - rect.top) / rect.height) * video.videoHeight));
+  return {
+    x: sourceX,
+    y: sourceY,
+    width: Math.min(
+      video.videoWidth - sourceX,
+      Math.ceil(((visibleRight - visibleLeft) / rect.width) * video.videoWidth),
+    ),
+    height: Math.min(
+      video.videoHeight - sourceY,
+      Math.ceil(((visibleBottom - visibleTop) / rect.height) * video.videoHeight),
+    ),
+  };
+}
+
+export function getQrVideoFrameImageData(
+  video: HTMLVideoElement,
+  canvas: HTMLCanvasElement,
+  scanViewport?: Element,
+  limits: QrFrameCaptureLimits = {
+    maxHeight: LIVE_QR_SCAN_MAX_HEIGHT,
+    maxPixels: LIVE_QR_SCAN_MAX_PIXELS,
+    maxWidth: LIVE_QR_SCAN_MAX_WIDTH,
+  },
+) {
   if (!video.videoWidth || !video.videoHeight || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
     return;
   }
@@ -89,16 +147,27 @@ export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElem
   const viewfinderWidth = video.clientWidth || video.videoWidth;
   const viewfinderHeight = video.clientHeight || video.videoHeight;
   const scanBoxSize = getCodeScanBoxSize(viewfinderWidth, viewfinderHeight);
-  const sourceWidth = Math.min(video.videoWidth, Math.floor(scanBoxSize.width * (video.videoWidth / viewfinderWidth)));
-  const sourceHeight = Math.min(
-    video.videoHeight,
-    Math.floor(scanBoxSize.height * (video.videoHeight / viewfinderHeight)),
-  );
-  const sourceX = Math.floor((video.videoWidth - sourceWidth) / 2);
-  const sourceY = Math.floor((video.videoHeight - sourceHeight) / 2);
-  const targetScale = Math.min(1, LIVE_QR_SCAN_MAX_WIDTH / sourceWidth, LIVE_QR_SCAN_MAX_HEIGHT / sourceHeight);
-  const targetWidth = Math.max(1, Math.floor(sourceWidth * targetScale));
-  const targetHeight = Math.max(1, Math.floor(sourceHeight * targetScale));
+  const scanBoxRegion = {
+    width: Math.min(video.videoWidth, Math.floor(scanBoxSize.width * (video.videoWidth / viewfinderWidth))),
+    height: Math.min(video.videoHeight, Math.floor(scanBoxSize.height * (video.videoHeight / viewfinderHeight))),
+  };
+  const sourceRegion = scanViewport
+    ? getVisibleVideoFrameRegion(video, scanViewport)
+    : {
+        x: Math.floor((video.videoWidth - scanBoxRegion.width) / 2),
+        y: Math.floor((video.videoHeight - scanBoxRegion.height) / 2),
+        ...scanBoxRegion,
+      };
+  if (!sourceRegion) {
+    return;
+  }
+
+  const maxWidth = scanViewport && sourceRegion.height > sourceRegion.width ? limits.maxHeight : limits.maxWidth;
+  const maxHeight = scanViewport && sourceRegion.height > sourceRegion.width ? limits.maxWidth : limits.maxHeight;
+  const pixelScale = scanViewport ? Math.sqrt(limits.maxPixels / (sourceRegion.width * sourceRegion.height)) : 1;
+  const targetScale = Math.min(1, maxWidth / sourceRegion.width, maxHeight / sourceRegion.height, pixelScale);
+  const targetWidth = Math.max(1, Math.floor(sourceRegion.width * targetScale));
+  const targetHeight = Math.max(1, Math.floor(sourceRegion.height * targetScale));
   if (canvas.width !== targetWidth) {
     canvas.width = targetWidth;
   }
@@ -110,30 +179,75 @@ export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElem
     return;
   }
 
-  context.drawImage(video, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, targetWidth, targetHeight);
-  const imageData = context.getImageData(0, 0, targetWidth, targetHeight);
+  context.drawImage(
+    video,
+    sourceRegion.x,
+    sourceRegion.y,
+    sourceRegion.width,
+    sourceRegion.height,
+    0,
+    0,
+    targetWidth,
+    targetHeight,
+  );
+  return context.getImageData(0, 0, targetWidth, targetHeight);
+}
+
+export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElement, scanViewport?: Element) {
+  const imageData = getQrVideoFrameImageData(video, canvas, scanViewport);
+  if (!imageData) {
+    return;
+  }
   return jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' })?.data;
 }
 
-function startLiveQrScan(elementId: string, onScanSuccess: (text: string) => void) {
+export async function scanQrVideoFrameWithZxingWasm(
+  video: HTMLVideoElement,
+  canvas: HTMLCanvasElement,
+  scanViewport: Element,
+) {
+  const imageData = getQrVideoFrameImageData(video, canvas, scanViewport, IOS_ZXING_SCAN_LIMITS);
+  if (!imageData) {
+    return;
+  }
+  return decodeQrCodeWithZxingWasm(imageData);
+}
+
+function startLiveQrScan(
+  elementId: string,
+  onScanSuccess: (text: string) => void,
+  scanViewportRef?: RefObject<HTMLElement | null>,
+) {
   const canvas = document.createElement('canvas');
+  const useVisiblePreview = isIOSBrowser();
   let timer: number | undefined;
   let stopped = false;
 
-  const scan = () => {
+  const scan = async () => {
     if (stopped) {
       return;
     }
     const video = document.getElementById(elementId)?.querySelector('video');
+    const scanViewport = useVisiblePreview ? scanViewportRef?.current : undefined;
     if (video) {
-      const decodedText = scanQrVideoFrame(video, canvas);
-      if (decodedText) {
+      let decodedText: string | undefined;
+      try {
+        decodedText =
+          useVisiblePreview && scanViewport
+            ? await scanQrVideoFrameWithZxingWasm(video, canvas, scanViewport)
+            : scanQrVideoFrame(video, canvas);
+      } catch {
+        // Keep the existing scanners active when the optional WASM decoder cannot load or decode a frame.
+      }
+      if (decodedText && !stopped) {
         stopped = true;
         onScanSuccess(decodedText);
         return;
       }
     }
-    timer = window.setTimeout(scan, LIVE_QR_SCAN_INTERVAL);
+    if (!stopped) {
+      timer = window.setTimeout(scan, useVisiblePreview ? IOS_ZXING_SCAN_INTERVAL : LIVE_QR_SCAN_INTERVAL);
+    }
   };
 
   timer = window.setTimeout(scan, 0);
@@ -304,6 +418,7 @@ export function useCodeScanner({
   elementId,
   formatsToSupport,
   onScannerSizeChanged,
+  scanViewportRef,
   onScanSuccess,
   onScanFailure,
   onCameraStartFailure,
@@ -377,11 +492,11 @@ export function useCodeScanner({
         return;
       }
       if (shouldScanQrWithJsQR(formatsToSupport)) {
-        liveQrScanStopRef.current = startLiveQrScan(elementId, reportScanSuccess);
+        liveQrScanStopRef.current = startLiveQrScan(elementId, reportScanSuccess, scanViewportRef);
       }
       await enableContinuousFocus(scannerInstance);
     },
-    [cancelActiveScan, elementId, formatsToSupport, onScannerSizeChanged, reportScanSuccess],
+    [cancelActiveScan, elementId, formatsToSupport, onScannerSizeChanged, reportScanSuccess, scanViewportRef],
   );
 
   const startScanFile = useCallback(