我的发！地表最强扫一扫

在很久很久以前，我亲爱的同事们在对接二维码扫描业务的时候，都是使用的微信官方自带的扫一扫，比如这样

wx.scanQRCode({
  needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
  success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  }
});

所以我扫码就一定得依赖微信，在普通的浏览器中打开就GG，并且还要绑定公众号，烦的一批。

然后我就在想，扫码不就是靠摄像头捕捉图像进行解码出内容嘛，那肯定会有原生的解决方案。

Google Google Google Google ......

果然是有的，Web API中也提供了一个实验性的功能，Barcode Detection API

它提供了一个detect方法，可以接收图片元素、图片二进制数据或者是ImageData，最终返回一个包含码信息的Promise对象。

但是呢，这个功能的浏览器兼容性比较差，看了caniuse，心凉了一半。

但我相信大神们肯定有自己的解决方案，继续Google呗。

Google Google Google Google ......

还真有这么一个库，html5-qrcode，它在zxing-js的基础之上，又增加了对多种码制的解码支持，站在巨人的肩膀上又跟高了一层。

html5-qrcode支持的码有：

Code	Example
QR Code
AZTEC
CODE_39
CODE_93
CODE_128
ITF
EAN_13
EAN_8
PDF_417
UPC_A
UPC_E
DATA_MATRIX
MAXICODE*
RSS_14*
RSS_EXPANDED*

我个人觉得非常够用了，平时用的最多的还是二维码、条形码，其他的码也都少见。

关键是人家还支持了各种浏览器，可以说已经是很良心了（什么UC浏览器的，其实我都瞧不上，不支持就不支持，无所吊谓）

来看看官方提供的demo效果

好好好，很棒。但是他们没有提供框架支持，那么我又可以站在巨人的肩膀上的巨人的肩膀上造轮子了。

先来看看我自己封装的React组件

使用方法也简单

function App() {
  const scanCodeRef = useRef();
  const [scanResult, setScanResult] = useState('');

  function startScan() {
    scanCodeRef.current?.initScan();
  }

  return (
    <div>
      <button onClick={startScan}>扫一扫</button>
      <p>扫描结果: {scanResult}</p>
      <ScanQrCodeH5
        ref={scanCodeRef}
        scanTips="请一定要对准二维码哦～"
        onScanSuccess={(text) => {
          setScanResult(text);
        }}
        // onScanError={(err) => {
        //   console.log(err);
        // }}
      />
    </div>
  );
}

三二一，上链接，rc-qrcode-scan

这次的版本没有加入从相册选择图片进行解码，下个版本将会加入，希望能帮到掘友们。

2023-09-28更新，掘友们我把从相册选择加进去了。