二维码扫描演示

支持 QR Code、Data Matrix、Aztec、Code 128、Code 39、EAN-13、UPC-A 等多种格式。

交互演示

↗ 在新窗口打开演示

支持的码类型

类型	格式
二维码	QR Code, Data Matrix, Aztec Code
条形码	Code 128, Code 39, Code 93, EAN-13, EAN-8, UPC-A, UPC-E, ITF, Codabar

核心实现

import { IDScanner } from 'id-scanner-lib';

const scanner = new IDScanner();
await scanner.initialize();

const qrModule = scanner.getQRCodeModule({
  formats: ['qr', 'code_128', 'ean_13'],
  continuous: true,
  tryHarder: true
});

// 启动摄像头实时扫描
await qrModule.startCapture(videoElement, {
  facingMode: 'environment',
  resolution: 'hd'
});

qrModule.on('scan', (result) => {
  console.log('码内容:', result.text);
  console.log('码类型:', result.format);
});

从图片扫描

const imageElement = document.getElementById('image');
const results = await qrModule.scanImage(imageElement);

if (results.length > 0) {
  results.forEach(code => {
    console.log(`${code.format}: ${code.text}`);
  });
}

高级配置

const qrModule = scanner.getQRCodeModule({
  // 码类型
  formats: ['qr', 'code_128', 'data_matrix', 'ean_13'],

  // 性能
  useWorker: true,
  tryHarder: true,

  // 用户体验
  highlightFound: true,
  beepOnSuccess: true,

  // 扫描区域（占视频百分比）
  scanRegion: {
    left: 0.1,
    top: 0.1,
    width: 0.8,
    height: 0.8
  }
});

多码同时扫描

const qrModule = scanner.getQRCodeModule({
  detectMultiple: true,  // 启用多码检测
  maxCodes: 5
});