网络扫描器 SDK

@exige/web-scanner-sdk 是客户端网络文档扫描器SDK。 文档查找、 OCR 和编辑在浏览器中运行 。 车辆和车牌识别在顶层的浏览器中运行. 公开演示是唯一不需要账户的路径. 您控制的主机名需要签名许可密钥 .

• 产品
• 定价
• 扫描机比较
• 动态软件比较
• 财务问题

所有图像处理都发生在浏览器中. 相机、发现器、扫描、OCR、编辑、车辆探测和火炬需要签名的许可证钥匙(setLicenseKey) (中文(简体) ). 发行密钥是一个单独的 Next.js app in license-portal/,不是 npm 软件包的一部分.

公共 API

import {
  cropDocument,
  mapDocumentCornersToFrame,
  recognizeText,
  redactProgrammatically,
  setLicenseKey,
  startCamera,
  startFinder,
} from '@exige/web-scanner-sdk'

const licenseKey = '<signed key from the license desk>'
await setLicenseKey(licenseKey)
const video = document.querySelector('video')!
const session = await startCamera(video)
const finder = await startFinder({
  source: video,
  autoCapture: 'defaultOn',
  onCapture: async ({ frame, detection }) => {
    if (!detection?.corners) return
    const corners = mapDocumentCornersToFrame(
      detection.corners,
      { width: detection.sourceWidth, height: detection.sourceHeight },
      { width: frame.width, height: frame.height },
    )
    const scan = await cropDocument(frame, corners)
    if (scan.status !== 'success' || !scan.canvas) {
      console.warn(scan.message)
      return
    }
    const ocr = await recognizeText(scan.canvas, {
      language: 'eng',
      minConfidence: 0.5,
      includeWords: true,
    })
    const redaction = await redactProgrammatically(scan.canvas, {
      ocr,
      rules: [
        { id: 'name', strategy: 'string', mode: 'case-insensitive', values: ['Taylor Morgan'] },
      ],
      style: { mode: 'blackout' },
    })
    console.log(redaction.status, ocr.words?.[0])
  },
})

每个API接受浏览器图像源(Blob, (中文(简体) ), HTMLImageElement, (中文(简体) ), HTMLCanvasElement,或 ImageBitmap),并导出 TypeScript 结果类型.

minConfidence 使用规范化 0–1 缩放和默认值 0.5。单词和字符独立过滤; text 由保留字段重建,总体 confidence 是他们的算术刻薄。 当每个字都低于门槛时, 文字是空的,信心是 0。 OCR 框提取为选入 : includeWords 财务报告和审定财务报表 includeCharacters 默认为 false 并可以独立启用。 返回的边框在传递到的确切输入画布中使用像素坐标 recognizeText; 扫描后通过 scan.canvas 因此,框映射直接到视图校正的裁剪. OcrResult 总是包括过滤 text, (中文(简体) ), confidence, (中文(简体) ), language, (中文(简体) ), imageWidth,以及 imageHeight,带有过滤器 words 和(或) characters 只有在接到请求时.

识别将原色裁剪上的宇宙汽车与 Sparse 文本合并 将整页照明平整,然后应用 当地(布拉德利-罗斯)阈值。 不使用单页 Otsu 剪接: a 软照明梯度 要么涂上阴影 要么被点燃的纸作墨水. 框被映射回原始坐标, 重叠复制到 更希望有更高的自信, 并空间调整顺序。 独立的标点 和几何或视而不见的框在 置信过滤器,防止图形片段成为文本同时 恢复孤立的显示词 .

shadowPass 默认为 true。12x12网格查找连接的暗纸 包括通常布局的中央或相抵布局 电话和手放在灯光下 细规则和孤立的艺术品 不符合区域/印刷外接试验。 可选的瓦片被打开 光线和标志性的质量 里面的blob, 不在接受的字数,所以 一个遮蔽的角落 装满92%的垃圾 仍然得到一个平坦的再读。 瓷砖 被用同样平整平整的灰度 来裁剪 通过。 框映射在正常合并前返回原始裁剪坐标 和拒绝管道。 最坏的情况是一块有界限的瓦片识别 没有合格荫影工资,只有72×72分析样本. OcrResult.diagnostics 报告传球是否运行、其强度和 原-像素阴影区域.

程序编辑

开发者可以结合字符串,相邻的标签,规范化模板矩形,以及模板锚定规则. 通过先前的单词级别 OCR 以避免第二次 OCR 的通过 :

const result = await redactProgrammatically(scan.canvas, {
  ocr,
  rules: [
    { id: 'name', strategy: 'string', mode: 'case-insensitive', values: ['Taylor Morgan'] },
    { id: 'dob', strategy: 'label', label: 'DOB', direction: 'any' },
  ],
  template: {
    id: 'badge-v2',
    fields: [
      { id: 'photo', strategy: 'rect', rect: { x: 0.05, y: 0.12, width: 0.28, height: 0.52 } },
    ],
  },
  style: { mode: 'blackout' },
  requireAll: true,
})

if (result.status === 'unmatched') {
  console.warn(result.unmatchedRuleIds) // no canvas/blob in fail-closed mode
}

使用 matchRedactionRules 预览与几何相匹配,而不改变像素. applyRedactions 是您已经拥有的可信区域的像素画家 。 自己通过那些矩形。 没有公众 redact() 用于最终用户绘图工具.

无标签和编码的ID可以使用语义规则. 逻辑查找是默认的 。 ML 查找是一个单独的规则 detector: 'model';加载一个字段模型不会取代逻辑规则.

const result = await redactProgrammatically(scan.canvas, {
  ocr,
  rules: [
    { id: 'name', strategy: 'semantic', field: 'person_name' },
    { id: 'ml-name', strategy: 'semantic', field: 'person_name', detector: 'model' },
    { id: 'dob', strategy: 'semantic', field: 'date_of_birth' },
    { id: 'address', strategy: 'semantic', field: 'address' },
  ],
  models: { fields: '/models/id-fields-yolox-nano.onnx', fieldLayout: 'yolox' },
  requireAll: true,
})

逻辑规则使用device AAMVA别名,ICAO MRZ证据,符号验证,和保守版式前作. detector 实值 'logical' | 'model' 默认为 'logical'. 示范规则使用Apache-2.0 YOLOX-Nano(models.fieldLayout: 'yolox',解码输出 [1, 8400, 12]) (中文(简体) ). 所提供模型被懒惰地装入,其盒会选择通过字段符号检查的OCR字. 如果文件无法装入, allowHeuristicFallback (default true) 让模型规则使用逻辑查找和报告 modelStatus: 'fallback'. 弃权 fieldLayout 仍然解码 YOLOv8 [1, classes+4, anchors]。 。 。 .

演示中有一个训练有素的检查站 /models/id-fields-yolox-nano.onnx。 。 。 . 语义字段编辑 运行逻辑查找而不下载模型. ML 字段编辑 装入文件 fieldLayout: 'yolox'控制可以单独进行,也可以同时进行. openCamera 不获取字段权重, Npm 软件包不下载。 呼叫通过 models.fields 他们自己。 该文件在官方的MIDV-500图像上进行了微调,后又在官方的MIDV-2020模板上进行了微调. MIDV-2020 搁置是模板样本 ids 90–99 (标签) mAP@ 0 联合国 这和合成的val是分开的 mAP@ 0 0.998)和从早先的MIDV-500文档中41–50分0.117. 这些重量在同一个MIDV-500分数上得分为0.075分. postal_code 财务报告和审定财务报表 state 没有MIDV-2020盒。 相片和扫描档案不标记 SDK 字段 .

脸部校正 分别。 过 models.face 改为 redactProgrammatically。该选项在 /models/id-face-yolox-nano.onnx单级YOLOX-Nano([1, 8400, 6]) (中文(简体) ). 被探测到的相貌矩形在图像上被黑出. 它们不是OCR的单词,这种控制不会改变七等场模型. openCamera 不下载。 重量从模板,相片和扫描中被培训到MIDV-2020的官方面相矩. 标本编号90-99 training/yolox-fields/face-holdout-metrics.json (单位:千美元)mAP@ 0 0.934,机会0.099). 这是模拟文件的分拆,而不是对其他身份证件的声称.

detectDocument 运行 DocAligner 并返回命令 DocumentQuad 与 topLeft, (中文(简体) ), topRight, (中文(简体) ), bottomRight, (中文(简体) ), bottomLeft键入 top, (中文(简体) ), right, (中文(简体) ), bottom,以及 left 线段。 结果是 success, (中文(简体) ), no-document, (中文(简体) ), low-confidence,或 low-quality。 。 。 . scanDocument 用同一个四角进行投影视角曲面,并将四角包括在结果中.

在触摸/移动类设备上,分析默认为560px工作图像(当页高时长边缘为1280px),并在支持时在模块Worker中运行. 透视输出默认上限为4096px, 与远程内存封顶相同 capturePhoto()覆盖 maxAnalysisDimension, (中文(简体) ), maxOutputDimension,或 useWorker 内 ScanOptions 需要的时候。 颜色 takePhoto() 无法匹配Android相机应用(没有 HDR+ / OEM ISP). 关于Android, ScannerProvider captureMode="auto" (默认)打开相机应用程序通过 pickNativeCameraStill() 尽快 open 从用户的手势变为真实——没有应用中的快关。 礛 scanSystemCameraStill() 庄稼是最显著的文档。 设定 open 在与主机按钮相同的点击中。 想要在Android Pass上进行直播的主持人 captureMode="live"。强制任何平台上的拾取者使用 captureMode="system-camera"。 。 。 .

现场搜索和自动抓取

使用真实的视频/流或无相机的画布模拟器:

const simulator = createFinderSimulator(canvas)
simulator.start()

const finder = await startFinder({
  source: canvas,
  autoCapture: 'defaultOn',
  onStatus: ({ state, quad, guidance }) => {
    renderOverlay(state, quad)
    instruction.textContent = guidance.hint
  },
  onCapture: async ({ frame, detection }) => {
    if (!detection?.corners) return
    const corners = mapDocumentCornersToFrame(
      detection.corners,
      { width: detection.sourceWidth, height: detection.sourceHeight },
      { width: frame.width, height: frame.height },
    )
    const scan = await cropDocument(frame, corners)
  },
})

自动抓取模式完全相同 defaultOn, (中文(简体) ), defaultOff, (中文(简体) ), alwaysOn, (中文(简体) ), alwaysOff,以及 only。默认模式显示可变的最终用户复选框;总是模式隐藏它. only 强制自动抓取,隐藏复选框,并隐藏手动抓取按钮. alwaysOn 仍然显示手动抓取按钮. setAutoCapture() 返回虚伪 only高度自信、稳定的生角、限制轴上72%的填充量、1.5%的边缘清除量和可接受的视角,才能自动断裂。 之后,发现者仍然等待一秒钟(holdStillMs,默认为1000ms),所以在用户仍在调整时没有捕获一个刚刚找到的页面. 丢失或不稳定的正弦重置计时器 。 百叶窗上面的上方芯片说 别动 (无 3–2–1); 框使用 readyColorHex 在扣留期间。 手动抓取不会等待。 Android系统-相机路径没有活盒. 填充是四面体宽度和高度填充量中较大的一个,所以一个已经填充了长轴的高收发或宽度登机口已经准备好,而不是被告知要更靠近;高视度文件则需要那长相的80%. 分出,出站下限通过普通手动保持平稳状态. FinderStatus.guidance 显示一个终端用户提示——将文档放置在位置上,走得更近,走得更远,保持相机直线,或保持静止——加上其打出的理由、限制轴填充比例和每轴 fill 崩溃。 手动抓取总是通过 finder.capture()。 。 。 .

ML 角检测

文件查找总是使用DocAligner LCNet100. detectDocument, (中文(简体) ), scanDocument,以及 startFinder(...).detection 负载 Exige 的可活性,默认情况下由 CORS 启用的 CDN 模型. 奥米 modelUrl中,推论或几何故障仍为 modelStatus: "failed"。工人启动投掷 ScannerError 有代码 worker。一个失败的 DocAligner HTTP 响应抛出 ScannerError 有代码 model-http。发现者既捕捉又报告 modelStatus: "failed" 所以摄影机保持上升。 一个不好的形象 no-document, (中文(简体) ), low-confidence,或 low-quality 而不掷出.

懒惰的工人 onnxruntime-web (按外接;不缩合为: scanner-sdk.js),在WebKit的WebGPU上运行 DocAligner,当 navigator.gpu 被曝光(如果会话失败或热映射为空的WASM),并且只将WASM保留在Android上,重复使用会话,以及IndexedDB中的缓存模型字节加上浏览器缓存. JSEP原是和它的胶水ort-wasm-simd-threaded.jsep.wasm 财务报告和审定财务报表 ort-wasm-simd-threaded.jsep.mjs货包里有船 文档查找以文字加载 new URL 当主机捆绑者发出它们时呼叫。 下个 next dev --turbo 不复制这些兄弟姐妹 [email protected] 在 Exige 演示 CDN 或 jsDelivr 上。 主机应用程序不复制 /ort/ 或设置 ortWasmPaths 用于默认路径。 奥米 ortWasmPaths。仅通过它来替换这些文件:字符串是一个包含两者的目录,或者一个对象 { wasm, mjs } 设置每个 URL。 404重覆仍会掉回针上 DocAligner的权重保留在CDN上,相邻的Apache-2.0属性,只被复制到演示构建中. 见 VitePress ML 探测器指南。 。 。 .

全屏反相机

该演示由一个提供者的反相相机和查看部件组成:

import { setLicenseKey } from '@exige/web-scanner-sdk'
import {
  ScannerControls,
  ScannerFrame,
  ScannerNotice,
  ScannerPreview,
  ScannerProvider,
  ScannerQuad,
  ScannerStatus,
  ScannerTopBar,
} from '@exige/web-scanner-sdk/react'
import '@exige/web-scanner-sdk/camera-overlay.css'

await setLicenseKey(licenseKey)

<ScannerProvider
  open={cameraOpen}
  autoCapture="defaultOn"
  onCancel={() => setCameraOpen(false)}
  onCapture={({ frame, method, settings, displayedQuad }) => {
    console.log(method, settings.width, settings.height)
    return processFullResolutionFrame(frame, displayedQuad)
  }}
>
  <ScannerFrame style={{ position: 'fixed', inset: 0 }} title="Scan a document">
    <ScannerPreview />
    <ScannerQuad />
    <ScannerTopBar title="Scan a document" />
    <ScannerNotice />
    <ScannerStatus />
    <ScannerControls />
  </ScannerFrame>
</ScannerProvider>

useScanner() 阅读提供者内部的会话. useScannerRef() 给父母一个必须的手柄,通过为 apiRef和MUI一样 useGridApiRef. 相机覆盖了取景口,尊重安全区域,显示发现者/允许/错误状态,并保持现有的自动抓取政策. 关于Android, captureMode="auto" 跳过直播预览并立即打开系统相机应用 open 从用户手势变为真实; DocAligner 然后在 JPEG 上找到最突出的文档。 误入屏幕 再试一次iOS保持直播覆盖和自动抓取. useCase="drivers-license" 从 PDF417 条码返回 AAMVA 字段(onDriverLicense) (中文(简体) ). 它没有叫 onCapture。见 驾驶证。 。 。 . useCase="vehicles" 财务报告和审定财务报表 useCase="plates" 使用已恢复的车辆/平板查找器(watch 或已运出的YOLO11n型号),并仍在呼叫 onCapture。通过 vehicleRearGuide (单位:千美元)true 用于包装后轿车,或自定义的SVG/PNG URL)并渲染 ScannerVehicleGuide 介于 ScannerPreview 财务报告和审定财务报表 ScannerQuad。见 车辆和车牌. 活道请求一个理想的4K后相机流(No 1080×1920 Android cap),在预览中显示该流,并连续地镜像上个非黑框. 在 WebKit 外部, 实时抓取用途 ImageCapture.takePhoto() 最大相片大小, 当其侧面与预览不同时保持平稳; 仍长于4096px的缩放为高质量的平滑。 网络Kit takePhoto() 返回黑色静态,因此 iOS 复制了现场预览或镜像框。 一个真正空白的捕捉失败, 而不是导出黑色像素 。 Finder 分析保留在520–1600的工作副本上. 渲染器 ScannerDiagnostics 用于具有引擎/浏览器、视频和音轨状态、亮度和所选捕捉路径的活性诊断面板; 复制报告 贴上百叶窗时间的垃圾堆以获取支持 。 过 theme 改为 ScannerFrame 要重新显示相机. primaryColorHex 替换黄绿色口音(#c8ff45) (中文(简体) ). seekingColorHex 财务报告和审定财务报表 detectingColorHex 是等待框的颜色(均为 #ef6a5b 除非被分开, unstableColorHex 实值 #ffbe40, (中文(简体) ), readyColorHex 实值 #8af25a,以及 capturedColorHex 实值 #ffffff关闭 theme 或保留默认值的任何字段。 这个 反应相机指南 列出每个字段的画作。 演示源屏幕在相机启动和通过调色板前选择默认、海洋、紫罗兰或信号 theme 打开 ScannerFrame。捕捉结果包括显示的四和其范围分析维度 mapDocumentCornersToFrame() 加号 cropDocument() 所以最后的收成 符合屏幕上的内容。 根包中仍可提供无框架的必要API.

运行演示

npm install
npm run dev

打开 http://localhost:43127 (英语)上传 PNG/JPEG/WebP 或使用移动相机,然后检测和裁剪、运行OCR、检查检测建议、应用开发商编辑规则并导出结果。 没有绘图工具. 寻找 在文件或相机之前选择文档、平板或车辆. 平板扫描仪 (只有车辆)抓住车辆,然后寻找车上的一个车牌. 驾驶证 运行双侧 AAMVA 流并打印管辖权,到期后,其余的字段.

npm test
npm run typecheck
npm run build

两栋楼:图书馆和演示

该寄存器从同一个来源产生出两个独立的捆绑. 演示进口 src/index.ts,准确的公开条目公布为 @exige/web-scanner-sdk,因此所部署的应用软件可以练习开发者向上的API.

图书馆的建筑没有 index.html因此服务 dist/ 由网页主机让浏览器下载包项而不是渲染出一页. 部署 dist-demo/。 。 。 .

本地制作演示

npm run build:demo
npm run preview

打开 http://localhost:43129 (英语) 并用扫描、查找器、 OCR 和编辑UI确认 HTML 页面加载.

Vercel部署

vercel.json 针入演示文稿构建, 因此部署不能返回库输出 :

{
  "framework": "vite",
  "buildCommand": "npm run build:demo",
  "outputDirectory": "dist-demo",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

匹配 Vercel 项目设置( 设置 ) :

保留工程级构建命令, 输出目录将覆盖此功能 vercel.json 应用;如果在仪表盘中已经设置了覆盖,请设定为上面的值。 A 类 vercel-build 脚本也被定义为零配置构建的倒置. 不需要环境变量或秘密.

运行公开文件

VitePress网站包含集成指南和一个由TypeDoc生成的API参考. API 页面是从 src/index.ts 在开发与生产建设之前,所以已公布的签名会跟踪套件的出口.

npm run docs:dev

打开 http://localhost:43261 (英语)核查生产场地:

npm run docs:build
npm run docs:preview

vitepress-plugin-llms 将每页都作为下划线(/guide/quickstart.md, (中文(简体) ), /api.md)并写作 /llms.txt 从同一个来源。 该插件的 复制为下标记 按钮复制该文件。 文档 MCP (list_pages, (中文(简体) ), get_page, (中文(简体) ), search_docs)读取这些URL. 文件网页 /guide/docs-mcp 带有向光标按钮添加,而其他客户端则有片断。 安装同样远程 MCP 的光标插件在其中 plugins/exige-scanner-docs。将该网站作为第三个带有根目录的Vercel项目 site设置、下标 URL 模式和 MCP 中 site/README.md登记清单为 docs-mcp/server.json。 。 。 .

这些文件涉及相机/风扇对出口的流量、自动抓捕政策、方案调整和移动/Safari一体化。 生成的 API 引用反映了当前公共表面, 不包括绘图框 redact() 函数.

发布到 npm

@exige/web-scanner-sdk 发表于Origin CI at .depot/workflows/publish.yml 当 a vX.Y.Z 标记被推出 。 匹配的 GitHub 动作复制活性 .github/workflows/publish.yml; Origin 运行 Depot 路径. 这份工作不是靠普通人来完成的 main它安装在 npm ci检查 package.json "version" 匹配标签( n)v0.1.0 ↔ "0.1.0"),运行 npm test,用 npm run build:lib,则 npm publish --access public。 。 。 . build:lib 副本 yolo11n.onnx 财务报告和审定财务报表 license-plate-finetune-v1n.onnx 输入 dist/models/,所以公布的柏油球 包括那些重量旁边 dist/scanner_core.wasm. Auth 使用电站密钥 NPM_TOKEN 结束 actions/setup-node (单位:千美元)registry-url: https://registry.npmjs.org和 NODE_AUTH_TOKEN。不要设置符号 .npmrc 并不要打印这个秘密.

不要在CI中自动跳出版本. 释放:

1. 设定 "version" 内 package.json 切换到新模块(例如 0.1.0) (中文(简体) ).
2. 上交更改 main (和任何其他文件的发布需要).
3. 标记承诺并按下标记 :

git checkout main
git pull
git tag v0.1.0
git push origin v0.1.0

替换 0.1.0 你刚刚承诺的版本 A 类 workflow_dispatch 运行为倒置; 键入相同的 vX.Y.Z 标记在确认输入中。 如果该值不匹配, 工作流程仍然拒绝发布 package.json。 。 。 .

文件模式

文档查找使用 DocAligner LCNet100. 默认 URL 是 Exige CDN 文件 。 演示也可以装入 /models/docaligner-lcnet100-f4117b78.onnx识别字段并面对 ONNX 文件 public/models/ 存在用于编辑:语义和 ML 字段规则,和相向矩形 applyRedactionsnpm 柏油球不包括这些重量。 呼叫通过 modelUrl 或者说 models.fields 编号 : models.face。 。 。 .

recognizeText() 装入装入装入的宇宙魔方工人, LSTM 核心选择相同的方式 createWorker 有(松弛的SIMD、SIMD,然后是基线建设)和英语 eng.traineddata.gz 从包裹。 它不会从jsDelivr下载。 对于任何 language 其他 eng,通过 langPath: 文件被命名的目录 URL ${language}.traineddata.gz (相同的路径 sectract.js 附加). 设定 langPath 与 language: 'eng' 仅用于替换包装的英语模型。 Apache-2.0 宇宙魔方和英国模型的通知 与这些文件相邻 dist/assets/tesseract/。 。 。 .

车辆、车牌和车牌文本

detectVehicles 当找到任何车辆时,返回一个框。 它保留了中心距离图像中心最近的盒子,并且更喜欢更大的面积,因此一款大型的中心车辆会比起边上更小的车辆. 信心不选择框. 板块检测未变. decodeDetections 仍然会把每个盒子都送回来.

呼叫通过 modelUrl继续低迷 source: "heuristic" 框中输入. allowFallback: false 跳过那个盒子.

公开演示 寻找 对源步骤的控制是测试路径。 在选择文件或使用相机之前选择文档、平板电脑或车辆。 自动捕捉等待目标进入框架和稳定状态. 平板扫描仪 在车辆照片上寻找车牌后.

双用 layout: 'yolov8' 财务报告和审定财务报表 preprocess: 'letterbox-01' 640号 盘点文本保留 Apache 读取器 /models/plate-text.onnx。套件出口为 @exige/web-scanner-sdk/models/yolo11n.onnx 财务报告和审定财务报表 @exige/web-scanner-sdk/models/license-plate-finetune-v1n.onnx. iOS包和Android AAR复制了相同的字节.

原生核心

native/ 是在C++中相同的解码,有CAPI和WASM,iOS,和Android构建. ONNX Runtime Web仍然运行着车辆和车牌型号. 核心的WASM构件解码了这些收发机,选取了一辆车,并且只保留了该车上的一盘. 如果WASM模块无法加载, src/sdk/detect.ts 使用JavaScript解码器.

浏览器支持和隐私

SDK需要风扇, createImageBitmap网络工人和网络大会 目前Chromium,Firefox,和Safari的释放支持了这些API. 图像仍然是局部的,除非主机应用程序明确发送到其他地方.