Skip to main content

利用电脑摄像头扫描识别二维码

· 4 min read
Kyle
Kyle
CTO of the Ph.D. Creative Station

在现代数字化生活中，二维码已成为信息传递的重要载体。本文将介绍如何开发一个基于 React 的二维码扫描组件，利用电脑摄像头实现纸质二维码的扫描识别功能。

功能演示​

下面是我们开发的二维码扫描组件，您可以直接在浏览器中使用：

Scanner
点击 "开始扫描" 来启动摄像头

功能特性​

✅ 摄像头检测：自动检测并启用可用的摄像头设备
✅ 实时扫描：高效识别纸质印刷的二维码
✅ URL 识别：自动识别并可点击访问 URL 链接
✅ 一键复制：快速复制识别结果到剪贴板
✅ 用户友好：直观的操作界面和状态提示
✅ 响应式设计：适配不同屏幕尺寸

技术实现​

核心技术栈​

  • React 19 - 前端框架
  • TypeScript - 类型安全
  • qr-scanner - 二维码识别核心库
  • Ant Design 5 - UI 组件库
  • CSS Modules - 样式模块化

关键技术要点​

1. 摄像头权限管理​

const checkCameraAvailability = async () => {
  try {
    const hasCamera = await QrScanner.hasCamera();
    setHasCamera(hasCamera);
    if (!hasCamera) {
      setError('未检测到可用的摄像头设备');
    }
  } catch (err) {
    setError('无法访问摄像头权限');
    setHasCamera(false);
  }
};

2. 扫描器初始化配置​

const scanner = new QrScanner(
  videoRef.current,
  (result) => {
    setScanResult(result.data);
    onResult?.(result.data);
    message.success('二维码识别成功！');
  },
  {
    returnDetailedScanResult: true,
    highlightScanRegion: true,
    highlightCodeOutline: true,
    maxScansPerSecond: 5,
    preferredCamera: 'environment'
  }
);

3. 剪贴板 API 使用​

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(scanResult);
    message.success('已复制到剪贴板！');
  } catch (err) {
    // 降级方案：创建临时文本区域
    const textArea = document.createElement('textarea');
    textArea.value = scanResult;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    message.success('已复制到剪贴板！');
  }
};

使用指南​

基本使用​

import QRCodeScanner from './QRCodeScanner';

function App() {
  const handleResult = (result: string) => {
    console.log('扫描结果：', result);
  };

  return (
    <QRCodeScanner 
      onResult={handleResult}
      width={400}
      height={300}
    />
  );
}

组件参数​

参数类型默认值说明
onResult(result: string) => void-扫描成功回调函数
widthnumber400视频区域宽度
heightnumber300视频区域高度
classNamestring''自定义样式类名

操作步骤​

  1. 启动扫描：点击"开始扫描"按钮启动摄像头
  2. 选择摄像头：如有多个摄像头，可在下拉菜单中选择合适的设备（组件会自动选择笔记本电脑的内置摄像头）
  3. 扫描二维码：将纸质二维码放在摄像头前方，保持清晰可见
  4. 查看结果：识别成功后会自动显示结果，URL 会变成可点击链接
  5. 复制内容：点击"复制到剪贴板"按钮快速复制结果
  6. 重新扫描：需要扫描其他二维码时点击"重新扫描"

笔记本电脑使用说明​

摄像头兼容性​

本组件专为笔记本电脑内置摄像头优化：

✅ 自动检测：智能识别笔记本内置摄像头
✅ 前置摄像头优化：自动选择前置摄像头进行扫描
✅ 多摄像头支持：支持外接 USB 摄像头，可手动切换
✅ 权限管理：友好的权限请求和错误提示

扫描技巧​

  • 距离控制：二维码与摄像头保持 15-30cm 距离
  • 光线充足：确保有足够的光线照射二维码
  • 角度调整：保持二维码与摄像头垂直，避免倾斜
  • 稳定手持：避免抖动，让二维码在画面中保持稳定

浏览器兼容性​

  • Chrome/Edge 87+ ✅
  • Firefox 82+ ✅
  • Safari 14+ ✅
  • 移动端浏览器 ✅
注意事项
  • 需要在 HTTPS 环境下使用（本地开发可使用 localhost）
  • 首次使用需要授权摄像头权限
  • 建议使用良好光线环境下进行扫描
  • 保持二维码平整清晰，避免反光

项目部署​

组件已集成到 Docusaurus 项目中，支持：

  • 本地开发：npm start
  • 生产构建：npm run build
  • Cloudflare Pages 部署：npm run deploy

总结​

通过本项目的实现，我们成功开发了一个功能完整的二维码扫描组件，不仅实现了基本的扫描识别功能，还提供了良好的用户体验和错误处理机制。这个组件可以轻松集成到其他 React 项目中，为用户提供便捷的二维码扫描服务。

该组件展示了现代 Web 技术的强大能力，通过浏览器原生 API 和优秀的开源库，我们可以构建出媲美原生应用的功能体验。