H5扫码 html5-qrcode + React中使用

html5-qrcode 库简介

html5-qrcode 是一个轻量级的库，可以让你在网页上轻松实现二维码扫描功能。它支持多种设备和浏览器，并且提供了丰富的配置选项。
注：网络协议必须是HTTPS协议，否则访问不了手机摄像头。

安装 html5-qrcode

npm install html5-qrcode
# 或者
yarn add html5-qrcode

主要 API

1. 创建 Html5Qrcode 实例

const html5Qrcode = new Html5Qrcode(elementId);

• elementId：HTML 元素的 ID，该元素将被用作视频流的容器。

2. 开始扫描

html5Qrcode.start(cameraIdOrName, config, successCallback, errorCallback);

• cameraIdOrName：摄像头的 ID 或名称，默认为 'default'，表示默认摄像头。
• config：扫描配置对象。
• successCallback：扫描成功时的回调函数。
• errorCallback：扫描失败时的回调函数。

3. 配置对象

配置对象可以包含以下属性：

• fps: 每秒帧数，默认为 10。
• qrbox: 二维码检测框大小，默认为 undefined。
• rememberLastUsedCamera: 是否记住上次使用的摄像头，默认为 false。
• torch: 是否打开手电筒，默认为 false。

4. 停止扫描

html5Qrcode.stop();

示例代码

下面是一个简单的示例，展示如何使用 html5-qrcode 库进行二维码扫描：

import React, { useEffect, useRef } from 'react';
import Html5Qrcode from 'html5-qrcode';

const BarcodeScanner = () => {
  const html5QrCodeRef = useRef(null); // 使用 ref 来存储扫描器实例
  const isScanning = useRef(false); // 使用 ref 来追踪是否正在扫描

  const startScan = async () => {
    // 如果已经在扫描，则直接返回，防止重复扫描
    if (isScanning.current) {
      return;
    }

    // 创建一个新的 Html5Qrcode 实例
    const html5QrCode = new Html5Qrcode('reader');
    html5QrCodeRef.current = html5QrCode; // 将实例保存到 ref 中
    isScanning.current = true; // 设置为正在扫描

    try {
      await html5QrCode.start(
        { facingMode: "environment" }, // 后置摄像头
        { fps: 10, qrbox: 250, torch: true }, // 扫描配置
        (qrCodeMessage) => {
          console.log('扫描成功:', qrCodeMessage);
          // 扫描成功后停止扫描
          stopScan();
        },
        (err) => {
          console.error('扫描失败:', err);
        }
      );
    } catch (error) {
      console.error('启动扫码失败:', error);
    }
  };

  const stopScan = async () => {
    if (html5QrCodeRef.current) {
      try {
        await html5QrCodeRef.current.stop(); // 停止扫描
        isScanning.current = false; // 结束扫描状态
      } catch (error) {
        console.error('停止扫码失败:', error);
      }
    }
  };

  useEffect(() => {
    startScan(); // 页面加载时开始扫描

    // 清理函数：在组件卸载时停止扫描
    return () => {
      stopScan();
    };
  }, []);

  // 渲染容器
  return (
    <div>
      <div id="reader"></div>
    </div>
  );
};

export default BarcodeScanner;