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;
